Unity チュートリアルのタワーディフェンステンプレートを触ってみる（５１）では GameCamera に付属しているコンポーネントである、CameraRig について解説を行った。これで「カメラ編」は一通り完了したことになる。今回から「UI を追加する編」を進めていく。
Unity チュートリアルのタワーディフェンステンプレートを触ってみる（２）で述べた通り、Unity のチュートリアルに沿って作業を進めていく。ということで次にUI を追加するについて進めていく。
Unity 公式ページの「UI を追加する」についてはこちらを参照してほしい。
| Now that we have created towers and enemy Agents with a variety of effects, the next step is to set up a stage where players can build towers to defend a location from those enemies. Setting Up a Stage - Unity Learn - Unity Learn |
１．UI を追加する編 – 概要
『ここでは、プレイヤーがゲーム進行状況の情報を得られるようにします。 本拠地にどれだけ耐久力が残っているか、どのくらいの通貨をタワーに費やす必要があるか、などの情報が含まれます。
このセクションでは、主に UI Canvas と GameUI コンポーネントを使用して、プレイヤーが情報を得られるようにする方法について説明します。』
２．UI を追加する編 – UI Canvas
『UI 用に、Hierarchy ウィンドウで右クリックし、UI > Canvas の順に選択してキャンバスを作成します。次に、Project ウィンドウのPrefabs/UI に移動し、以下のプレハブをキャンバスオブジェクトの子に設定します。』とのことなので指示に従って UI の作成を行っていく。手順については以下の通りとなっている。
-
TowerControllerUI – プレイヤーがタワーをクリックするとポップアップが開き、タワーについての情報が表示され、タワーの売却やアップグレードが可能になります。
-
Build Menu – 作成するタワーの選択肢を表示します。
-
PlayerBaseLife – 本拠地の現在の耐久力の状態と、プレイヤーが使用できる通貨の量を表示する UI 要素です。
-
WaveContainer – 現在のステージのウェーブ数を表示します。
-
Game Over – プレイヤーがすべての敵を破壊するか、本拠地の耐久力がゼロになると、ゲーム終了のポップアップが表示されます。
-
PauseMenu – ゲームを一時停止し、ステージを再スタート、または終了できます。
-
TowerPlaceConfirmationUI – モバイルデバイス上でタワーの配置を確認できます。
-
TowerPlaceInvalid – モバイルデバイスを使用するプレイヤーに、タワーを配置した場所が有効な配置エリアではないことを示します。
上記の手順に従い UI を追加するために、UI > Canvas からキャンバスの追加を行っていく。Canvas を追加すると以下のような画面となる。
さらに上記の指示に従い各 Prefab を追加していくと以下の通りとなる。
さらに『前のセクションで加えた GameCamera オブジェクトの GameUI コンポーネントは、これらのプレハブの一部の参照を必要とします。』とのことなので指示に従って Prefab の追加を行っていく。手順については以下の通りとなっている。
-
RadiusVisualiser プレハブを Radius Visualizer Controller フィールドにドラッグアンドドロップします。
-
TowerControllerUI オブジェクトを Tower UI フィールドにドラッグアンドドロップします。
-
BuildInfo オブジェクトをシーンに配置します。このオブジェクトは Build Menu オブジェクトの 2 階層下の子オブジェクトになります。このオブジェクトを Build Info UI フィールドにドラッグします。
上記の手順に従い RadiusVisualiser の Prefab を Radius Visualizer Controller に追加すると以下の通りとなる。
更に UI を追加していくと以下の通りとなる。
