デジタルな日々

UnityでFFっぽいものを作る2(uGUI設置)


 

前回あらかたGUIを作ってからuGUIの存在を知ったので作りなおした。

 

UnityでFF2

 

Unity4.6からゲームオブジェクトを作る場合、新たに追加されたUIカテゴリーを使うと便利だ

 

CreateuGUI

 

この中で「Panel」や「Canvas」「EventSystem」以外を選ぶとこれら3つのオブジェクトが自動で追加される。

 

作ったuGUI

 

色々作業した後で名前も変わっちゃってるけど、構造はこんなかんじ
ちなみに上から順に処理されるので手前に表示したいものは一番後ろにしておく。

 

まず「Canvas」と「EventSystem」が外側にある(EventSystemの使い方はまだよくわからない…)。
・Canvas

 

1.「Canvas」のCanvasコンポーネントの「RenderMode」によってGUIの表示方法が変わる。

 

Canvas

 

適当にいじってわかったこと

  • screen space-camera…ワールド座標にある?けど設定したカメラに追随する。最低0.3くらいの距離がないと映らない
  • screen space-overlay…今までのGUIと同じ、しかしなぜかシーン上に存在する
  • world space…3D空間のワールド座標に配置する

 

今回はカメラが動いてオブジェクトとGUIが重なったりしても嫌なので「screen space-overlay」にしました。

 

 

2. 「CanvasScaler」を「ScaleWithScreenSize」にして「Screen Match Mode」を「Expand」と画面サイズに合わせてGUIが縮小拡大していい感じ

 

この記事書く時まで初期設定の「ConstantPixelSize」にしてたんだけど、こっちではピクセルがきれいに出る代わりにサイズが絶対値になっていて画面の大きさが変わっても大きさが変わらない。

 

また「PixelPerfect」にすると画面サイズによってぼやけたりする文字とかが若干きれいになりました。でも若干ずれたりもします。
この今回はドットフォントを使ってるのでなるべくボケないように設定しておいきました。

 

こちらに詳しいやり方が載っています。
uGUIのアスペクト比を固定する(修正版) – テラシュールブログ

Panelの使い方よくわかんなかったけど、ちゃんと設定すれば子要素も一緒に縮小拡大してくれるのか!
後述ですが、コマンドは親要素の基準を中心にすると画面が縦に細長くなった時に真ん中へんにでちゃうので左下基準にしました。

 

 

 

この作業中にボタンが反応しなくなっちゃって泣きながらCtrl+Zしてた。どうやら他のUIが重なってしまっていたもよう、RectTransformで大きさを修正したら直った。

 

RectTransform

 

青い矢印が入っている奴が複数のポイントから位置を設定するんだけど、これを使うと画面が小さくなった時にUIが消えちゃったりして使いづらかったので1点ポイントの設定にした。(例えばコマンドは左下基準)

 

 

これで縦に細長くなっても

 

縦長unityFF

 

横に細長くなっても

 

横長UnityFF

 

 

まあ大丈夫

 

 

 

UIのスクリプト部分も書いたけどそこはまた次回

 

UnityでFFっぽいものを作る3(UI制御)

 

 

ユニティちゃんライセンス

このコンテンツは、『ユニティちゃんライセンス』で提供されています

コメントを残す