Unityに関連する記事です

 以下の内容で実装を進めていきます。

発展15 ークリアポイント機能の実装ー
21.Canvas_Overlay ゲームオブジェクトを作成し、ポストプロセッシングの影響を受けない UI 用のゲームオブジェクト群を配置する
22.キャラ契約用のクリアポイントを追加し、ステージ選択シーンに表示する機能と、バトルクリア時に加算する機能を実装する



 新しい学習内容は、以下の通りです。

 ・複数の Canvas ゲームオブジェクトの使い分け方



21.Canvas_Overlay ゲームオブジェクトを作成し、ポストプロセッシングの影響を受けない UI 用のゲームオブジェクト群を配置する

1.設計


 ステージ選択シーンにて実装する内容の設計を行います。

 現在、ステージ選択シーンのヒエラルキーには Canvas_Camera(WorldMap) ゲームオブジェクトがあります。
こちらはポストプロセッシングの影響を受けられるように、Canvas コンポーネントの Render Mode を Camera にしています。
そのため、常に最前面に表示されるという方式ではなく、あくまでもカメラを通じて UI 以外のゲームオブジェクトと同様にカメラが UI のゲームオブジェクトを描画しています。

 今回は今までも利用していた常に最前面にカメラの影響下なく表示する UI のゲームオブジェクト群を作成して配置を行いたいため、
新しく Canvas ゲームオブジェクトを作成し、そちらの RenderMode は Overlay にすることで、カメラを利用せずに、常にゲーム画面の最前面に表示されるゲームオブジェクトとして UI を作成していきます。



 今回は次の実装に向けて、大きく分けて2つの機能の UI を作成します。

 1つは、キャラを契約するためのクリアポイントを表示するゲームオブジェクト群です。
クリアポイントとは、バトルをクリアした際に褒賞として獲得できるボーナスポイントです。バトルをクリアするたびに加算されますので、
溜まったクリアポイントを消費して、ユーザーが任意の味方キャラと契約することが出来ます。
 今後は、この契約したキャラのみをバトルで利用できるようにする機能を実装しますので、その際に使います。

 もう1つは、このキャラを契約するためのポップアップを開くためのボタンのゲームオブジェクト群です。
ステージ選択シーンにてこのボタンを押すことで、ユーザーはいつでも味方キャラを契約することができる設計にします。



 参考用の画像を掲載しておきます。機能的に問題がなければ、この通りでなくて構いません。自由に作成してみてください。

<必要な UI 
 ・クリアポイント(キャラ契約用のポイント)を表示するための Text コンポーネントがアタッチされているゲームオブジェクト
 ・上記のポイントのラベル表示(常に TotalClearPoint: と表示)するための Text コンポーネントがアタッチされているゲームオブジェクト
 ・上記2つのゲームオブジェクトの背景用の画像を表示するための Image コンポーネントがアタッチされているゲームオブジェクト
 ・(必要であれば)これら3つを管理するためのフォルダ役のゲームオブジェクト
     (製作していく順番としては、下のゲームオブジェクトから作っていくといいでしょう。フォルダ => 背景画像 => ラベル => クリアポイント表示)

<必要な UI◆
 ・キャラを契約するためのポップアップを開くための Image コンポーネントと Button コンポーネントがアタッチされているゲームオブジェクト
     (子オブジェクトの Text コンポーネントがアタッチされているゲームオブジェクトは不要)
 ・上記のボタンのラベル表示(常に Engage のように表示)するための Text コンポーネントがアタッチされているゲームオブジェクト
 ・(必要であれば)これら2つを管理するためのフォルダ役のゲームオブジェクト
     (製作していく順番としては、下のゲームオブジェクトから作っていくといいでしょう。フォルダ => ラベル => ボタンとボタンの画像)


<完成時のヒエラルキー画像>



<Scene ビュー画像>



<Game ビュー画像>




2.Canvas_Overlay ゲームオブジェクトを作成し、設定を行う


 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択し、新しい Canvas ゲームオブジェクトを作成します。
名前を Canvas_Overlay に変更し、RenderMode が異なることが判別できるようにしておきます。

 通常の UI 用のゲームオブジェクトは、すべてのこの Canvas_Overlay ゲームオブジェクトの子オブジェクトとして作成します。


インスペクター画像


 Canvas コンポーネントの設定は不要です。
この部分が Canvas_Camera(WorldMap) ゲームオブジェクトとの一番の違いになりますので、初期設定である Screen Space - Overlay のままにしておいてください。

 CanvasScaler コンポーネントの設定を修正し、Game ビューの解像度と合わせてください。
こちらは逆に、すでに作成済の Canvas_Camera(WorldMap) ゲームオブジェクトの CanvasScaler コンポーネントの設定と同じで構いませんので、そちらを参考にするとよいでしょう。


Scene ビュー画像とヒエラルキー画像



3.役割に応じた各ゲームオブジェクトを作成して設定を行う


<Top_UI ゲームオブジェクト>



インスペクター画像



Scene ビュー画像とヒエラルキー画像




<imgToalClearPointFrame ゲームオブジェクト>



インスペクター画像



Scene ビュー画像とヒエラルキー画像




<lblTotalClearPoint ゲームオブジェクト>


インスペクター画像



Scene ビュー画像とヒエラルキー画像




<txtTotalClearPoint ゲームオブジェクト>



インスペクター画像



Scene ビュー画像とヒエラルキー画像




<EngageSet ゲームオブジェクト>

 契約という意味で Engage を利用していますが、同様の別単語(Contract など)を利用していただいても構いません。


インスペクター画像



Scene ビュー画像とヒエラルキー画像




<btnEngage ゲームオブジェクト>


インスペクター画像



Scene ビュー画像とヒエラルキー画像




<lblEngage ゲームオブジェクト>


インスペクター画像



Scene ビュー画像とヒエラルキー画像






22.キャラ契約用のクリアポイントを追加し、ステージ選択シーンに表示する機能と、バトルクリア時に加算する機能を実装する

1.設計


 クリアポイントをゲーム内に実装し、運用するための準備を行います。

 クリアポイントの仕様とサイクルとしては次のようなものに検討しています。
クリアポイントという名称は自由に変更してください。

<クリアポイントと契約によるサイクル>
 1.GameData クラスで int 型の totalClearPoint 変数としてクリアポイントの管理を行う。色々なクラスからアクセスしやすいため
   合わせて、契約した味方キャラの情報を管理するための engageCharaNosList 変数も追加しておく

 2.ゲーム開始時の  totalClearPoint 変数の値は 0

 3,バトルシーンをクリアすると、クリアの褒賞として、各 StageData クラスに登録されている clearPoint 変数の値分を  totalClearPoint 変数に加算する

 4.ステージ選択シーンには味方キャラと契約するためのボタンがあり、それを押すと契約用ポップアップが開く
   味方キャラのデータ(CharaData クラス)に契約料として engagePoint 変数を新しく設定し、これがキャラと契約する際に必要なクリアポイントになる

 5.totalClearPoint 変数の値を engagePoint 変数の値分だけ減算することにより、その味方キャラと契約することができる
   このタイミングで GameData クラスの engageCharaNosList 変数に情報が登録されて、ユーザーがどのキャラと契約済かを管理することができる状態にする

 6.【3】〜【5】を繰り返してサイクルとする。契約できる味方キャラを増やしていくことで、配置できる味方キャラが増えてゲームの戦略性が高まる

 この設計をしっかりと念頭に置きまして、実装のための設計を具体的に考えてみてください。

 サイクルとして一連の処理の流れがイメージできているか、できていないかにより、ロジックを組む際の難易度や条件が変わります。
なるべく時間をかけて精査を行い、スムースな処理の流れを考えて設計を作っていきましょう。

 この部分がしっかりしているほど、新しく必要になるスクリプトや、すでにあるスクリプトへの修正箇所が明確になります。


2.GameData スクリプトを修正し、クリアポイントや、契約したキャラを登録するための変数などを追加する




GameData.cs

<= クリックすると開きます


 スクリプトを修正したらセーブを行います。

 GameData ゲームオブジェクトを確認し、どのような情報が増えているかを確認しておきましょう。


インスペクター画像



3.StageSelectManager スクリプトを修正して、ゲーム画面に契約用のポイントの表示・更新を行う機能の実装に挑戦する


 ゲーム画面に契約用のポイントを表示するゲームオブジェクトは作成済ですので、次は、このクリアポイントの表示用ゲームオブジェクトに
GameData クラスに先ほど追加した totalClearPoint 変数を表示し、更新するための処理の実装に挑戦してみてください。

 この totalClearPoint 変数の値はキャラと契約すると、その時点で消費されます。
そのため、画面に一度クリアポイントを表示するだけではなくて、値に変更があった場合には更新を行えるように機能を設計する必要があります



4.ゲームを実行して動作を確認する


 ゲーム開始前に、GameData ゲームオブジェクトの totalClearPoint 変数の値を 0 以外の値に設定しておきます。

 ステージ選択シーンからゲームを開始してください。
ゲーム画面に表示されている totalClearPoint 変数を表示する部分が totalClearPoint 変数の値が反映されて表示されれば制御成功です。 


<実装動画>
動画ファイルへのリンク


 それでは次に、totalClearPoint 変数をゲーム内で加算する処理を実装します。


5.GameManager を修正する


 この手順の最後として、バトルをクリアした報酬として、totalClearPoint 変数を加算する処理を実装します
それ以外の TODO 部分の処理についても一緒に実装していますので、まだ未実装の部分があれば参考にしてください。

 もしも TODO 部分の処理が未実装である場合、その部分はコメントアウトしてください。
ただし、コルーチンメソッド内で yield return の処理が1つも記述されていないとエラーが表示されます
その場合、一度、戻り値を void にするか、コルーチンメソッド内に yield return null; の命令文を追加することで回避出来ます。

 今回の実装で GameManager クラスは完成です。
最初から読み直してみて、処理が読み解けない場所がないかを確認しておきましょう

 なお、すでに自分で考えて実装が済んでいる処理については、修正を行う必要はありません。
その場合には復習の教材として、このような記述の方法もあるという形で利用してください。


GameManager.cs


 スクリプトを修正したらセーブをします。


6.StageDataSO スクリプタブル・オブジェクトの設定を確認する


 Datas フォルダ内にある StageDataSO スクリプタブル・オブジェクトを選択して、各ステージのデータに ClearPoint 変数の値が設定されているかを確認します
ステージをクリアすると、この値が GameData クラスの totalClearPoint 変数に加算されます。0 のままだと加算処理が実行されたかわかりませんので、念のため、調べておいてください。
 
 ClearPoint 変数の値自体は後でバランス調整を行いますので、まずは 0 以外の数値になっていれば問題ありません。


インスペクター画像




7.ゲームを実行して動作する


 ゲームを開始して、バトルをクリアしてください。
クリアしたステージのデータに設定されている ClearPoint 変数の値が GameData クラスの totalClearPoint 変数に加算されれば制御成功です。

 バトル後、ステージ選択シーンに戻った際にも、現在の GameData クラスの totalClearPoint 変数に表示が更新されれば制御成功です。

 どちらも問題ないかを確認しておいてください。



 以上でこの手順は終了です。

 次は 発展16 ー契約時のエフェクト機能の実装− です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます