Unityに関連する記事です

 複数回の手順に分けて、お使いの成果として褒賞を獲得できるようにします。

 最初に、褒賞を表示するためのポップアップ用のゲームオブジェクトと制御するためのスクリプトの作成を行います。
この手順が完成したら、褒賞の内容をデータベース化して、それを抽選して褒賞用のポップアップに反映させる処理を実装していきます。


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


手順17 −お使いの結果の褒賞表示用のポップアップとスクリプトの作成と生成処理の実装−
27.RewardPopUp ゲームオブジェクトと RewardPopUp スクリプトを作成する
28.GameManager スクリプトと CharaDetail スクリプトを修正して、キャラをタップした際に RewardPopUp ゲームオブジェクトを生成する処理を実装する



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

 ・処理の組み立て方を考える



27.RewardPopUp ゲームオブジェクトと RewardPopUp スクリプトを作成する

1.設計


 お使いが完了した際に生成されるキャラのゲームオブジェクトをタップすると、今回のお使いの成果として褒賞を獲得できるシステムを設計して実装します。
 
 この実装には複数の手順が必要になります。

<褒賞獲得までの手順>
 ・獲得した褒賞の情報を表示してプレイヤーに伝えるための褒賞表示用ポップアップ・ゲームオブジェクトと、そのゲームオブジェクトを制御するスクリプト(今回の手順で一部作成)
 ・キャラをタップした際に、褒賞表示用のポップアップ・ゲームオブジェクトを生成する処理(今回の手順で作成)
 ・褒賞の内容を登録するためのデータベースの作成
 ・お使いの難易度に応じた褒賞のデータをランダムで抽出する機能
 ・褒賞表示用ポップアップ・ゲームオブジェクトに、ランダムで抽出された褒賞のデータを送り込んで表示させる機能
 ・セーブしてあるお使いのデータと、 OfflineTimeManager スクリプトの List 内から削除する機能

 また、以下の機能は上記の機能を実装後に追加を検討します。

 ・獲得した褒賞のデータをセーブ・ロードする機能
 ・獲得した褒賞のデータをアルバムにして表示する機能

 まずは最初に、褒賞表示用のポップアップ・ゲームオブジェクトを作成します。
行き先確認用のポップアップのゲームオブジェクトと同じように、Canvas の子オブジェクトとして生成することにより、ゲーム画面の前面に表示します。


2.RewardPopUp ゲームオブジェクトを作成する


 RewardPopUp ゲームオブジェクトを作成して、褒賞の情報を表示するようにします。
褒賞のデータを作成後は、そのデータを反映して表示するようにしますが、今はまだ設定したものをそのまま表示するだけにしておきます。

 褒賞のデータとしては、次のような内容を検討します。これは次の手順で作成します。

<褒賞のデータ(RewardData)>
 ・褒賞の通し番号
 〇褒賞の希少度
 ・褒賞の抽出頻度
 〇褒賞の画像
 〇褒賞のポイント

 以上の情報のうち、〇印のある3つの情報について表示できるようにします。
行き先確認用のポップアップ・ゲームオブジェクトを参考に、自分でゲームオブジェクトを作成してみましょう。

 ここでは必要な手順だけを抜粋します。また、ゲームオブジェクトの構成も任意ですが、以下の情報は表示・制御できるようにしてください。

<褒賞内容の表示制御に必要な情報>
 ・親のゲームオブジェクトには、ポップアップ・ゲームオブジェクトの子オブジェクト群をまとめて表示/非表示にするための CanvasGroup コンポーネントのアタッチ
 ・褒賞の画像を表示・設定するための、Image コンポーネントがアタッチされているゲームオブジェクト
 ・褒賞のポイントを設定・表示するための Text コンポーネントがアタッチされているゲームオブジェクト
 ・褒賞の希少度を設定・表示するための Text コンポーネントがアタッチされているゲームオブジェクト
 ・ポップアップを閉じるための Button コンポーネントがアタッチされているゲームオブジェクト

 上記の他に、以下のようなものを用意します。
 ・固定背景用の、Image コンポーネントがアタッチされているゲームオブジェクト
 ・固定メッセージ用の背景の、Image コンポーネントがアタッチされているゲームオブジェクト
 ・固定メッセージ用の Text コンポーネントがアタッチされているゲームオブジェクト×2


ヒエラルキー画像(例)



Sceneビュー 完成画像(例)



Gameビュー 完成画像





 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Panel を選択します。
Image コンポーネントがアタッチされた新しいゲームオブジェクトが作成されますので、名前を RewardPopUp に変更します。
このゲームオブジェクトは親オブジェクトであり、ポップアップの本体としてのフォルダの役割を持ちます。また、ポップアップ全体の背景画像を設定します。

 CanvasGroup コンポーネントを追加しておいてください。
Image コンポーネントの Source Image の画像と色は任意に設定してください。半透明にしておくとゲーム画面が透過されて見えます。


インスペクター画像



Sceneビュー画像



 続いて、各ゲームオブジェクトの参考画像を列挙しておきます。


3.RewardPopUp ゲームオブジェクトに各子オブジェクト群を作成する


 先ほどの必要な情報を元にして、以前作成してあるポップアップのゲームオブジェクトなどを参考にしながら作成してみてください。
なお、これがすべてではありませんので、自分で自由にデザインして作ってみることが大切です。

 Text コンポーネントについてはプレファブを1つ作成しておいて、そちらをすべてに利用しています
これはすべてに同じフォントを利用したいためです。よってプレファブを変更すれば、すべての Text コンポーネントのフォントが変更になります。

 スクリプトだけでなくゲームオブジェクトを作成する際にも、自分なりの設計を考えて作ってみてください。



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

 褒賞の背景画像の設定を行うためのゲームオブジェクトです。


インスペクター画像



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





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

 褒賞の画像を設定するためのゲームオブジェクトです。
この画像が獲得した褒賞の内容に合わせて、ポップアップが生成されるたびに動的に変更されるようになります。


インスペクター画像



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





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

 ポップアップを閉じるための確認ボタン用のゲームオブジェクトです。
ボタンの画像の設定も行います。


インスペクター画像



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





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

 ボタン上に文字列を表示するためのゲームオブジェクトです。
例えば、ボタン自体に確認のロゴ画像を利用している場合には不要になります。


インスペクター画像



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





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

 褒賞を獲得したことを表示するためのタイトル役のゲームオブジェクトです。


インスペクター画像



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





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

 修飾用のゲームオブジェクトです。
お使い完了の表示を行う部分の背景画像のゲームオブジェクトです。
親であるこのゲームオブジェクトの角度を変えてあるため、子オブジェクトの txtNotice ゲームオブジェクトも同じように角度が変わっています。


インスペクター画像



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





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

 修飾用のゲームオブジェクトです。
お使い完了の文字表示を行う部分のゲームオブジェクトです。


インスペクター画像



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





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

 獲得した褒賞ごとのポイントの値を表示するためのゲームオブジェクトです。
この文字列の数値が獲得した褒賞の内容に合わせて、ポップアップが生成されるたびに動的に変更されるようになります。

インスペクター画像



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



 以上で完成です。


4.RewardPopUp スクリプトを作成する


 作成した RewardPopUp ゲームオブジェクトを制御するためのスクリプトを作成します。
最初はボタンのみ制御を行える状態にしておいて、その後、褒賞の情報の設定に合わせて、必要な情報用の変数を追加します。

 ボタンを含めて、制御したいコンポーネントは5つです。今回は4と5のみ実装していますが、1〜3についても自分でわかる範囲で変数を宣言しておいても構いません。

<制御対象>
 1.txtRewardPoint ゲームオブジェクトの Text コンポーネント   → 褒賞のポイントを表示する

 2.txtRairity ゲームオブジェクトの Text コンポーネント     → 褒賞の希少度を表示する

 3.imgReward ゲームオブジェクトの Image コンポーネント     → 褒賞の画像を表示する

 4.btnSubmit ゲームオブジェクトの Button コンポーネント     → 確認用のボタンを押したときの制御をするため

 5.RewardPopUp ゲームオブジェクトの CanvasGroup コンポーネント → CanvasGroup コンポーネントの Alpha(透明度)を制御するため

 以上のことからもわかるように、このスクリプトは後々「外部のスクリプトから呼び出し命令を受けて、ポップアップ内に表示する褒賞のデータを受け取って」
それを各コンポーネントに対して制御を行い、その都度、受け取った褒賞のデータを反映していく必要があります。

 このようなことを前提としている場合、「外部のスクリプトから呼び出し命令を受けて、ポップアップ内に表示する褒賞のデータを受け取るためのメソッド」を準備し、
これを最初は Start メソッドにて呼び出す形で、自前で処理を呼び出すようにします。

 今後、褒賞のデータが作成されて、そのデータを外部のスクリプトが RewardPopUp スクリプト側に送れる状態になったら、
直接、「外部のスクリプトから呼び出し命令を受けて、ポップアップ内に表示する褒賞のデータを受け取るためのメソッド」を実行してもらって、データを受け取るようにします。
このときには引数を追加して、受け取れるようにします。そしてその際には Start メソッドでの呼び出し命令が不要になります。

 先のことを考えてスクリプトを準備しておくことにより、処理の実装のイメージが沸きやすくなります。


RewardPopUp.cs

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


 スクリプトを作成したらセーブします。


5.RewardPopUp ゲームオブジェクトに RewardPopUp スクリプトをアタッチして設定を行い、プレファブにする


 ヒエラルキーにある RewardPopUp ゲームオブジェクトに、作成した RewardPopUp スクリプトをドラッグアンドドロップしてアタッチしてください。

 RewardPopUp ゲームオブジェクトのインスペクターを確認し、SerializeField 属性にて宣言している変数が2つ表示されていますので、
こちらに、RewardPopUp ゲームオブジェクト内から、必要な情報を持つゲームオブジェクトをアサインしてください。


インスペクター画像



 アサインが終了したらプレファブにしてください。
プレファブ後はヒエラルキーより RewardPopUp ゲームオブジェクトを削除してください。

 以上で RewardPopUp ゲームオブジェクトの完成です。


28.GameManager スクリプトを修正して、キャラをタップした際に RewardPopUp ゲームオブジェクトを生成する処理を実装する

1.設計


 最初に提示した設計の手順に基づいて、キャラをタップした際に、褒賞表示用のポップアップ・ゲームオブジェクトを生成する処理を実装します。

 現在作成してあるどのスクリプトに生成処理を実装するかも合わせて考えてみてください。

 今回は GameManager スクリプト内に、CharaDetail スクリプトより命令を受けて実行される ResultJobs メソッドを設計し、
このメソッド内において、先ほど作成したポップアップの生成処理を行うようにします。

 処理の導線の考え方は、ゴール地点(やりたい処理)とスタート地点(始めるタイミング)、そしてそこに至るまでの繋がりをイメージすることです。

 CharaDetail スクリプトには、OnClickChara メソッドがあります。ここに TODO を記述してありますので、このタイミングで処理を実行、つまりスタート地点とします。

 ゴール地点はポップアップの生成になりますので、OnClickChara メソッドにて GameManager スクリプトに用意する ResultJobs メソッドを実行します。
これがスクリプト同士の繋がりの部分です。

 そして ResultJobs メソッド内において、ポップアップの生成、ゴール地点を実行します。

 1つずつの処理を順序立てて、日本語のコメントや TODO を記述して、どのような処理になればつながていくのかをイメージしながら実装してみてください。


2.GameManager スクリプトを修正する


 ポップアップの生成を行うための ResultJobs メソッドを新しく1つ作成します。
また、ポップアップ用のプレファブを登録するための変数の宣言も追加します。
Canvas ゲームオブジェクト内にて作成したものですので、生成位置についても Canvas ゲームオブジェクトの子オブジェクトとして生成を行います。
それは行き先確認用のポップアップと同じ位置になりますので、こちらの情報はすでにあることになります。

 ResultJobs メソッド内にはたくさんの TODO を用意しています。これは今後実装を行うための目安になりますので、必ず一緒に記述してください
このように実装の手順のイメージを徐々にできるようにしていくためには、常に処理の流れを把握していくことが大切ですので、そのためにもコメントを記述して有効活用しましょう。


GameManager.cs

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


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


3.GameManager ゲームオブジェクトの設定を行う


 GameManager ゲームオブジェクトの インスペクターより、GameManager スクリプトを確認します。
新しく SerializeField 属性にて宣言した変数が表示されていますので、Prefabs フォルダ内にある、プレファブになっている RewardPopUp ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。


インスペクター画像



 以上で設定は完了です。


4.CharaDetail スクリプトを修正する


 OnClickChara メソッド内にある TODO の処理を実装します。
先ほど GameManager スクリプト内に追加して用意をした ResultJobs メソッドを呼び出す処理を実装してみてください。
教材を見ずに処理が書ければ、スクリプト同士のつながりが理解できていると言えるでしょう。

 メソッドとして処理を用意しておいて、その処理のメソッドを呼び出す。これが処理の基本的な作り方になります。


CharaDetail.cs

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


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


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


 お使いを完了した状態にしてキャラを生成します。
キャラをタップした際に、褒賞表示用のポップアップが生成されて、徐々に表示されれば制御成功です。
また各値には情報を渡していないので、作成した情報のまま表示されます。

 確認完了のボタンを押してポップアップが徐々に消えていき、破棄されれば、こちらも制御成功です。

 再度行き先ボタンを押してお使いに行けるようになっているかも確認しておいてください。


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




 以上でこの手順は終了です。
 
 次は 手順18 −褒賞用のデータベースの作成− です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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