渋谷ほととぎす通信

完全趣味でやってるUnityメモ。説明できないところを説明できるようにするための個人ブログ。昨日の自分より少しでも大きくなれるように。。。 ※所属団体とは一切関係がありません

Unity uGUIで画面にフィットする便利コンポーネント


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

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

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

ナイツクロニクル

ナイツクロニクル

  • Netmarble Games Corp.
  • ゲーム
  • 無料

画面数多めの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のダウンロードはコチラ(自己責任でお願いします)

最後に

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


UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード

UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード


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

あわせてどうぞ

www.shibuya24.info

www.shibuya24.info

www.shibuya24.info