nabeliwo blog

nabeliwo blog は nabeliwo の日々の出来事だったり生活の中で感じたことだったりを雑にお届けします。

【Unity勉強】5日目：UIを作る

CATEGORY:技術

TAGS:#Unity

あけましておめでとうございます。
今年は「やりたい」を言わずに「やった」を積み上げまくる一年にしたい気持ちがあるので特に抱負も述べずに淡々といつも通りやっていこうと思います。

引き続き、こちらの書籍を使って勉強をしています。

Unity2018入門 最新開発環境による簡単3D&2Dゲーム制作 - Amazon

ゲームの UI の作り方

前回作ったひよこを大砲でいじめるゲームのスタート画面とボタンの UI を作りました。

youtube:https://www.youtube.com/embed/fWkKkHi8jYo

特になんのゲームでもないんだけどスタート画面があるだけでそれだけでゲーム感が出て良いですね。

メモ

Hierarchy -> Create -> UI -> Text でテキストを追加できる。
UI オブジェクトを追加すると Hierarchy ウィンドウには Canvas と EventSystem が追加される。

実際に UI オブジェクトが配置されるのは Canvas の子オブジェクトとして。

Canvas は UI オブジェクトを配置するための領域。
Canvas の子オブジェクトにして Canvas の領域内に配置しないとシーン上に表示されない。

Canvas オブジェクトの Canvas コンポーネントの Render Mode で描画モードの設定を行う。

  • Screen Space - Overlay : 必ず一番手前に UI が表示される
  • Scren Space - Camera : シーンを映すカメラの他に UI を映す専用のカメラを追加でき、それぞれのカメラの描画順を調整してオブジェクトが UI より前に映るようにできる
  • World Space : Canvas の位置や大きさを自由に設定できる

Canvas Scaler コンポーネントの UI Scale Mode で実行環境に合わせて UI オブジェクトの大きさを調整する方法を選択する。

  • Constant Pixel Size : UI オブジェクトの大きさはピクセル指定になり、デバイス側の解像度やアスペクト比に影響されない
  • Scale With Screen Size : スクリーンサイズを基準に自動で UI オブジェクトの拡大・縮小の調整を行う
  • Constant Physical Size : インチやミリメートルなど実際の物理的なサイズを基準で UI オブジェクトの大きさを調整する。

UI オブジェクトは他のオブジェクトの Transform コンポーネントとは異なり、 Rect Transform コンポーネントで位置や角度、大きさの情報を管理する。
UI オブジェクトには Anchor と呼ばれる Canvas 上で位置を固定してくれる機能がある。実行先のデバイス側のアスペクト比や解像度が変わると、 Anchor を基準にして UI オブジェクトの位置が調整される。
UI オブジェクトの位置は Anchor と Pivot の座標で決まる。 Pivot は UI オブジェクトを配置する際の基準点。通常は UI オブジェクトの中心。
Anchor は上下左右に分割して配置することができ、これは Stretch モードと呼ぶ。 Stretch モードは解像度やアスペクト比に合わせて自動で引き伸ばすので UI の表示が粗くなる可能性がある。

Event System はボタンが押された場合など、 UI に関するイベント(インプット)を管理しているオブジェクト。削除するとボタンをクリックしても反応しないなどが起きるので気を付ける。

Image オブジェクトを使う際は、 Image コンポーネントの Source Image に表示したいスプライトをドラッグ＆ドロップする必要があるが、その際 Image オブジェクトの Texture Type を Sprite (2D and UI) にしておく必要がある。

Canvas の背景を変更するには UI オブジェクトの Panel を利用する。 Panel の Image(Script) コンポーネントの Color で色を指定する。

プロジェクトをエクスポートするやり方。
Assets -> Export Package -> Export

プロジェクトをインポートするやり方。
Assets -> Import Package -> Custom Package -> パッケージを選択 -> Open -> Import

C# のログ出力は Debug.Log()
ボタンクリックなどのイベントから関数を呼び出すにはアクセス修飾子を public にしておく必要がある。
作成したスクリプトをボタンにアタッチする。
Button オブジェクトの Inspector で on Click () に Button オブジェクトをドラッグ＆ドロップして、 No Function となっているところを作成した C# Script 名 -> 作成した関数名 で選択して紐づける。
ログ出力したものは Console ウィンドウに表示される。

スクリプトでシーン遷移を行う場合は UnityEngine.SceneManagement というライブラリを宣言する。
シーンの登録を行う必要がある。 File -> Build Settings でデフォルトの Scenes/SampleScene のチェックを外し、自分が作成したシーンをドラッグ＆ドロップして登録する。この Build Settings 上で一番上に置いてあるシーンが起動時に最初に表示されるシーンになる。

前回の疑問の調査

前回はなし。

今回の疑問

今回も特になし。特にないというかわからないことがわからない状態なのでまあゆっくり。

感想

ここまでの知識でとりあえず2Dのゲームは調べながら作ることができるはず。
サーバーに繋いで成績を永続化するとかそういうのは全然よくわかんないけどとりあえずやって終わりの単発のゲームだったら作れるんだろうなって感じがしてきた。
なので何かしらの2Dゲームを作ってみようかなと思います。

この書籍自体はまだまだ続いていて、次は3Dのゲームを作るみたいなので書籍を続けつつ自分でもゲームを作っていこうかなという感じ。終わり。