Unity 初心者がつまずいたこと uGUI編

2017.06.01

先日、スマホアプリをリリースしました。
「あるごん」という子供向けのプログラミング教育アプリです。

alg1
ダウンロードはこちら

alg2
3Dのブロック上にキャラクターを配置してリレーさせるというゲームで、Unityで実装しました。

 

Unity経験ゼロからのスタートでしたが、iOS/Androidの両方に対応したものを何とかリリースすることができました。

今までWebサイトのフロントエンドが主な業務で、C#も触ったことのない初心者だったため、初めてのUnityはつまづく点が多かったです。
今回はuGUIに関してつまずいたこととを挙げていきます。


uGUIとは一体何なのか

Unityの情報を集めていると絶対に出てくるuGUIなのですが、「GUI」という言葉に引っ張られて何をするためのものなのかが最初イマイチ分かりませんでした。
よく言われている言葉で言うとuGUIは「UIシステム」であるということなのですが、3Dゲーム内に、画像やボタン、テキストなど、とにかく2Dのものを配置する時にはuGUIを使って配置する、という理解が正解のようです。

下記の画面でいうと、赤線で囲ったモノたちがuGUIです。

cap1


uGUIを可変にしたい

様々な画面サイズのスマートフォンに対応させるためには可変での実装が必要です。
下記のページを参考にさせていただき、無事に可変で実装することができました。

http://dojican-lab.blogspot.jp/2015/08/unity.html

デザインデータのPSDが1334×750で作られていたため、Canvas ScalerのReference Resolutionをデザインデータと同じ1334×750に設定しました。
こうすることで、この後ボタンなどの要素を配置する際にもデザインデータ上で測った数値と同じ数値を指定すれば勝手に同じ比率で可変するようになります。

cap3
デザインデータ上で16ピクセルとなっている箇所は、

cap4
Unity上でもPosXを16に指定するようにします。

Webサイトで同じことをしようと思ったら、cssですべてパーセント指定するような実装になりますが、この仕組みを使えばデザイン通りの配置が簡単にできるので楽でした。


uGUIの配置について

uGUIの配置も感覚をつかむまで少し戸惑いました。
Webサイトの実装ばかりをやっていたため、どうしても「左上が起点」と思ってしまうのですが、uGUIでは起点は自分の好きな場所にセットできます。

cap5
Anchor Presetsを右下にすると、Canvasの右下を基準とした配置になります。

cap6
数値はこのようにセットします。

例えばiPhoneとiPadでは画角がだいぶ異なるので、画角に振れ幅があっても不自然にならないような起点の決め方をしておいた方が良いようです。

iphone
↑iPhone

ipad
↑iPad

分かってしまえば使いやすいのですが、ここの仕組みが最初はイマイチつかめず苦労しました。

シーンビューでのuGUIがでかい

uGUIの使い勝手が分からないころ、シーンビューでのuGUIの表示が異常にでかいことも気になりました。
ゲームビューにすれば正常な表示になるのですが、でかすぎるので不安でした。

cap7
これに関しては、こちらの記事を参考にさせていただきました。
http://indie-du.com/entry/2016/05/22/100102
実装の仕方がマズイ、ということではないようなので結局このままやりました。

まとめ

普段Webをやっている人間からすると、このようなシンプルな配置ですらつまづくことが多かったです。分かってしまえば苦ではないのですが…。

次回は3D周りでつまずいた事項を書きます。