4th term 2nd week - dsuz/unity-game-dev1-3d-2019 GitHub Wiki

今回のテーマ

今回の準備

今回は以下のアセットを使います。

このアセットは /Assets の直下にたくさんインポートするので、インポートしたアセットが既存のアセットに埋もれてしまうので、以下のようにひと工夫してもう一つ Unity を起動して別のプロジェクトから複製します。

  1. 一つだけ Unity を起動して新しいプロジェクトを作る
  2. 上記のアセットをインポートする
  3. インポートしたら、新しく UI Samples フォルダを作り、他の全てのフォルダをその中に入れる
  4. Unity をもう一つ起動してこれまで授業で使っていたプロジェクトを開き、UI Samples フォルダを Unity から Unity にドラッグ＆ドロップする
  5. これでプロジェクトにアセットを（フォルダ構成を乱さずに）インポートできた
  6. これ以外の方法としては、パッケージ (unitypackage ファイル) を作ってプロジェクト間でアセットを移動する方法もある
  7. インポートできたら、各シーンを実行してみて「Unity の UI でできること」を試してみましょう

参考

パッケージの作り方については以下を参照してください。

レイアウト (Rect Transform)

UI を思い通りの位置にレイアウトするため、全ての UI に共通する Rect Transform コンポーネントについて以下の意味を知っておくこと。

  1. Anchors - これを理解することが最も重要で、画面との比率でどこからどこまで起点とするかを表す
  2. Anchor Presets - よく使う Anchor の設定があらかじめセットしてあり、選ぶだけで数値をいくつも入れなくてよいためにある
  3. 以下の設定は Anchor の値により項目が変わることに注意する
    • Pos (X, Y, Z) - Anchor からの相対位置を表す
    • Width, Height - 幅と高さ
    • Left, Right, Top, Bottom - Anchor からの相対位置
  4. Pivot - 回転する時の中心
  5. Rotation, Scale - これは Transform と同様に回転とスケールを表す

Game ウィンドウとビルド後のウィンドウのアスペクト比・解像度は関係ないことに注意すること。Unity Editor 上で実行する時は以下の Game ウィンドウの設定が有効になる。

ビルド後のウィンドウでは以下の設定が有効になる

UI をレイアウトした後は、Game ウィンドウのサイズを変えて「サイズを変えてもレイアウトが維持される」ことを確認するようにしましょう。

参考

Canvas

Canvas の下にないと UI は表示されない。Canvas は最初に UI オブジェクトを作ると勝手に作られるが、複数作ることもできるし、後から作ることもできる。Canvas の実体は Canvas コンポーネントが追加されたオブジェクトである。Canvas の重要な設定は Render Mode であり、以下の設定がある。

  • [Screen Space - Overlay] - 通常の設定。ゲーム画面にオーバーレイ表示されるので、全て平面になる。
  • [Screen Space - Camera] - 空間にあるかのように斜めに表示したりできる設定。先のアセットで多用されている。
  • World Space - 空間に UI を表示する。VR ではよく使われる

Canvas Scaler コンポーネント

このコンポーネントで重要な設定は UI Scale Mode の Scale With Screen Size であり、これを使うと設定した値でアスペクト比を固定することができる。これにより異なる解像度の端末に対応することができる。

参考

その他のオブジェクトやコンポーネント

Graphic Raycaster コンポーネント

Canvas オブジェクトについている Graphic Raycaster は UI オブジェクトのマウス（タッチ）操作に必要になる。

EventSystem オブジェクト

UI のイベント処理（クリックやマウスオーバーなど）に必要になる。誤って消してしまった時は GameObject メニュー > UI > Event System を選んで追加できる。

フォント

Unity のデフォルトフォントは Arial であるが、このフォントは日本語表示があまりよくない。フォントファイル (Open Type Format の otf ファイルもしくは True Type Format の ttf ファイル）をアセットとしてインポートすればフォントを使うことができる。

参考リンクにあるフリーフォントから「ラノベPOP」を使って日本語を表示してみましょう。

参考

TextMesh Pro で日本語を表示するには

フォントをインポートするだけでは表示できず、フォントから画像（テクスチャアトラス）を生成する必要がある。方法については以下を参照せよ。

UI のアニメーション

UI にアニメーションを設定することができる。例えば以下のような演出を簡単に加えることができる。

  1. UI のスライド
  2. カットイン

参考

UI をワールドスペースに表示する

以下のようにすることで、空間に UI を表示することができる。

  1. Canvas の Render Mode を World Space にする
  2. Event Camera を適当に設定する（イベントを処理しないならばなくてもよい）
  3. Canvas を敵キャラなどの子オブジェクトにする
  4. このままだとすごく文字が大きくてぼやけるので、Canvas Scaler の Dynamic Pixels Per Unit を大きくする
  5. これで敵キャラ（など）の上に名札のように文字が表示される

典型的な使用例

  • キャラクターのライフゲージ
  • キャラクターの名前表示
  • 演出
  • 空間上の UI 表示

ライフゲージや名前表示では、必要に応じてビルボード化するとよい。

参考