以前フルFlashサイト (ブラウザ全画面Flashサイト) を制作していました。

モニタ解像度やブラウザ画面の縦横比率がどういう状態でも正常にレイアウトされる実装をしないといけない所に苦労した思い出があります。

スマホアプリ開発も同様で、スマホからタブレットまで様々な比率の解像度(主にAndroid)が存在し、フルFlashサイト開発とさして変わりません。

画面数多めのRPGナイツクロニクルが縦横どちらも対応したアプリとしてリリースされたことは記憶に新しいです。

逃げる手段も色々あるが…

比率を固定して、それ以外の比率の端末では左右に黒背景を敷いて逃げるのが最もUI開発としては簡単なのですが、今やそんなことをしているアプリは少ないですし、何よりダサくレガシー感が拭えません。

iPhone3Gが日本で発売されて早8年近く経ち、スマホユーザーのアプリに対する目は確実に肥えていますし、アプリ総数自体が当時と桁違いです。

少しでもアプリをよく見せるためには、多少大変だとしてもリキッドレイアウトを採用して行くべきだと私は考えます。

今回はどんな解像度でも対応できる背景画像実装を紹介します。縦長、横長どちらでも画面にフィットさせることが出来ます。

使い方は、uGUIBgFitコンポーネントをフィットさせたいGameObjectにAddComponentするだけです。

f:id:esakun:20160208011146p:plain:h200
↑↑元画像

f:id:esakun:20160208011525p:plain:h200
比率 3:4 iPad縦持ち

f:id:esakun:20160208011513p:plain:h200
比率 4:3 iPad横持ち

f:id:esakun:20160208011500p:plain:h200
比率 9:16 iPhone5縦持ち

f:id:esakun:20160208011841p:plain:h200
比率 16:9 iPhone5横持ち

すると、このように全ての解像度に画像をフィットさせることが出来ます。まさにフルFlashサイトで実装していた内容と同じです。

今回は基本的なUGUIでの画像フィット実装だけにとどめますが、このままだと縦長解像度ではUnityちゃんの顔が切れてしまいますので、良い感じに調整する機能を追加していく必要がありそうですね。

UGUIBgFitのダウンロードはコチラ(自己責任でお願いします)

最後に

リキッドレイアウト開発は、開発者、デザイナー、ディレクター開発に関わる皆が開発初期から意識して設計しなければ後で大きな後悔を生みます。リキッドレイアウトしない、縦横も縦のみにするなどの意思決定が行われたのであれば貫く勇気を持って頂きたいです。

uGUI初心者にはこの本を一読すると良いかもしれません。

あわせてどうぞ