読者です 読者をやめる 読者になる 読者になる

渋谷ほととぎす通信

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

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


f:id:esakun:20150730215258g:plain

年末から仕事でバタついてまして、やっと少し落ち着いたのでブログを再開します。 あけましておめでとうございます。今年も現場で起きるUnity事件をメインに紹介していこうと思います。

======= ここから本題 =======

私は以前フルFlashサイトというものを作って飯を食べていました。 ブラウザ全画面Flashサイトのことです。
フルFlashサイト制作の大変なところは、モニタ解像度やブラウザ画面の縦横比率がユーザー操作により自由なので、どういう状態でも正常にレイアウトされる実装を施さないといけないところです。

スマホアプリ開発も同様、スマホからタブレットまで様々な比率の解像度(主にAndroid)が存在し、フルFlashサイト開発とさして変わりません。 比率を固定して、それ以外の比率の端末では左右に黒背景を敷いて逃げるのが最もUI開発としては簡単なのですが、今やそんなことをしているアプリは少ないですし、何よりダサくレガシー感が拭えません。

iPhone3Gが日本で発売されて早8年近く経ち、スマホユーザーのアプリに対する目は着々と肥えていると思われます。

少しでもアプリをよく見せるためには、多少大変だとしてもリキッドレイアウトを採用して行くべきだと私は考えます。 (ちなみに開発初期から意識してデザインしないと後で後悔を....orz)

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

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

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初心者にはこの本を一読すると良いかもしれません。

f:id:esakun:20160208012216j:plain