Unity チュートリアルのタワーディフェンステンプレートを触ってみる(52)

Unity チュートリアルのタワーディフェンステンプレートを触ってみる(51)では GameCamera に付属しているコンポーネントである、CameraRig について解説を行った。これで「カメラ編」は一通り完了したことになる。今回から「UI を追加する編」を進めていく。

Unity チュートリアルのタワーディフェンステンプレートを触ってみる(2)で述べた通り、Unity のチュートリアルに沿って作業を進めていく。ということで次にUI を追加するについて進めていく。

Unity 公式ページの「UI を追加する」についてはこちらを参照してほしい。

1.UI を追加する編 – 概要

『ここでは、プレイヤーがゲーム進行状況の情報を得られるようにします。 本拠地にどれだけ耐久力が残っているか、どのくらいの通貨をタワーに費やす必要があるか、などの情報が含まれます。

このセクションでは、主に UI Canvas と GameUI コンポーネントを使用して、プレイヤーが情報を得られるようにする方法について説明します。』

2.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 を追加すると以下のような画面となる。

Canvas の追加

さらに上記の指示に従い各 Prefab を追加していくと以下の通りとなる。

各 Prefab の追加

さらに『前のセクションで加えた GameCamera オブジェクトの GameUI コンポーネントは、これらのプレハブの一部の参照を必要とします。』とのことなので指示に従って Prefab の追加を行っていく。手順については以下の通りとなっている。

  • RadiusVisualiser プレハブを Radius Visualizer Controller フィールドにドラッグアンドドロップします。

  • TowerControllerUI オブジェクトを Tower UI フィールドにドラッグアンドドロップします。

  • BuildInfo オブジェクトをシーンに配置します。このオブジェクトは Build Menu オブジェクトの 2 階層下の子オブジェクトになります。このオブジェクトを Build Info UI フィールドにドラッグします。

上記の手順に従い RadiusVisualiser の Prefab を Radius Visualizer Controller に追加すると以下の通りとなる。

RadiusVisualiser の追加

更に UI を追加していくと以下の通りとなる。

各種 UI の追加
%d人のブロガーが「いいね」をつけました。