Unityに関連する記事です

 ステージ選択シーンにおいてキャラを契約した際のエフェクト機能の実装を行います。

 キャラを契約する機能を実装出来ていない場合には、まず、そちらの完成を目指しましょう。


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


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


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

発展16 ー契約時のエフェクト機能の実装ー
23.キャラ契約用のポップアップと契約確認用のポップアップを自作して実装に挑戦する
24.契約時のスタンプエフェクトの作成と演出機能の実装を行う



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

 ・タップに合わせて順番にエフェクトを動作させる方法の実装例



23.キャラ契約用のポップアップと契約確認用のポップアップを自作して実装に挑戦する

1.設計


 ステージ選択シーンにおいて、キャラを契約する機能について、ロジックを考えて実装に挑戦しましょう。

 キャラを契約するためのポップアップについては、バトルシーンの、キャラ配置用のポップアップが参考になります。
キャラを配置する場合、ゲーム画面をタップすることでキャラ配置用のポップアップが表示されていましたが、
そのロジックを応用して、ボタンを押したら、キャラを契約するポップアップが表示されるようにしてみてください。



 事前に契約用のポップアップを生成しておいて、非表示にしておく処理も活用できます。
その場合も、キャラ配置のポップアップと同じように、ポップアップ内の情報を、最新の情報に合わせて更新する必要があります。

 キャラ配置ポップアップの場合には、ポップアップを表示するたびに、カレンシーの値とキャラの配置用のコストとを比較して
配置可能なキャラのみを選択できる状態に制御をしていました。
 
 契約用のポップアップの場合も同様で、キャラを契約するための契約料の値と、プレイヤーのクリアポイントの値を比較して
契約可能なキャラのみを選択できる状態に制御することが大切です。可能であれば、契約済のキャラや、未契約のキャラにも
判別可能なアイコンなどを表示/非表示する制御があると、よりわかりやすい画面になります。

 ただしその場合、キャラ配置ポップアップにおいては契約キャラという概念がないため、
これらのアイコンを導入する場合には、制御する方法を自分で考えて実装にチャレンジしていく必要があります。


<参考画像>




 処理の内容として、実装したい内容は、主に次のような部分です。

 契約するキャラを選択した状態で契約ボタンを押すことで、クリアポイントからキャラごとの契約料を支払うようにしてください。
また、同じキャラとは重複して契約をできないようにもした方がいいでしょう。契約済のキャラをタップできないようにするなどの制御が必要です。

 契約したキャラの情報は、GameData クラス内の engageCharaNosList 変数に追加して、
後程、この値を用いて契約しているキャラのみを配置用のキャラとして選択できる処理を実装できる準備をしておきましょう。


24.契約時のスタンプエフェクトの作成と演出機能の実装を行う

1.設計


 クリアポイントを消費してキャラを契約する処理が実装できたら、こちらの設計を考えます。

 ユーザーにキャラを契約したことを伝えつつ、画面上の演出を行うことが目的となります。

 実装する処理の内容については、次のように制御を行います。


 1.キャラを契約するボタンを押したら、契約したキャラの画像と名前を画面にポップアップして表示する

 2.画面をタップすると、契約用のスタンプが捺印されるアニメ演出を行う

 3.続けて画面をタップすると、ポップアップして表示されている【1】と【2】が消える

 1と2については同じポップアップ用のゲームオブジェクト内に作成しておいて、このゲームオブジェクトを制御するスクリプトを作成して、
タップに応じて、2と3の処理を実行するようにロジックを考えていきます。

 ポップアップ内の構成としては、1のゲームオブジェクトを作成し、ボタンの機能を使えるようにしておきます。
このボタンを押すと、2の機能が実行されるようにします。

 2のスタンプ演出用のゲームオブジェクトの方は、1のゲームオブジェクトよりも優先順位を高くするように配置します。
また、この部分にもボタンの機能を用意しておいて、3の機能を実行出来るようにします。
 
 よって、ボタンを2つ用意しておいて、処理のタイミングをみて、アニメ演出だけではなくて、順番にボタンが押せるようにも制御を行います。


2.Canvas_Overlay ゲームオブジェクトの子オブジェクトとして、ContractSet ゲームオブジェクトを作成する



ヒエラルキー画像



インスペクター画像



Sceneビュー画像




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



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



btnFilter ゲームオブジェクト


インスペクター画像



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



imgFrame ゲームオブジェクト


インスペクター画像



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



lblTitle ゲームオブジェクト


インスペクター画像



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



imgChara ゲームオブジェクト


インスペクター画像



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



txtCharaName ゲームオブジェクト


インスペクター画像



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



btnSubmitContractStamp ゲームオブジェクト


インスペクター画像



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



imgContractStamp ゲームオブジェクト


インスペクター画像



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



ContractDetail スクリプトを作成する


 キャラ契約用のポップアップ内において、キャラを契約するボタンを押すことで、このスクリプトがアタッチされている ContractSet ゲームオブジェクトを生成し、
生成したスクリプト内において、SetUpContractDetail メソッドを実行するように設計しています。

 その後、画面をタップしたタイミングで OnClickFilter メソッドが実行されて、スタンプを押すアニメ演出を実行します。

 2回目に画面をタップしたタイミングで OnClickSubmitContract メソッドが実行されて、このゲームオブジェクトを破棄し、ゲーム画面に戻ります。


ContractDetail.cs

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



ContractSet ゲームオブジェクトに ContractDetail スクリプトをアタッチして設定を行う


 ヒエラルキーにある ContractSet ゲームオブジェクトを選択し、作成した ContractDetail スクリプトをドラッグアンドドロップしてアタッチします。

 各変数に必要な情報をアサインします。


インスペクター画像



 以上で設定は完了です。


ContractSet ゲームオブジェクトをプレファブにする


 ヒエラルキーにある ContractSet ゲームオブジェクトを Prefabs フォルダにドラッグアンドドロップしてプレファブにしてください。

 プレファブにしたら、ヒエラルキーにある ContractSet ゲームオブジェクトは削除してください。


<考えよう!> キャラ契約用のポップアップと ContractSet ゲームオブジェクトとを結びつける処理を実装する


 自作してあるスクリプトを修正し、プレハブにした ContractSet ゲームオブジェクトを生成する処理を実装します。

 キャラ契約用のポップアップにアタッチされているスクリプトを選択し、その中に ContractSet ゲームオブジェクトのプレファブを登録するための変数の宣言を追加します。
SerializeField 属性を付与した private 修飾子の変数として宣言にしておくことにより、インスペクターから情報をアサイン出来ます。
このスクリプト以外でもこれらの情報を利用したい場合には、SerializeField 属性 + private 修飾子ではなくて、代わりに public 修飾子を使いましょう。
このようにしておくことで、プレハブである ContractSet ゲームオブジェクトをアサインして登録し、生成する対象物に指定出来るようになります。

 もう1つ大切なこととして、生成する場合には、 ContractSet ゲームオブジェクトの生成場所を考える必要があります。

 生成されたゲームオブジェクトは、何も指定しないとヒエラルキーにそのまま生成されます。
ただしそうなると、ContractSet ゲームオブジェクトは UI 関係のゲームオブジェクトになりますので、ゲーム画面に表示されません
なぜなら、UI 関係のゲームオブジェクトは Canvas 内に配置する必要がありますが、この時点では Canvas の子オブジェクトになっていないためです。


<この状態だとゲーム画面に表示されない>



 そのため、ContractSet プレハブは、生成する時点、あるいは生成したすぐ直後のいずれかのタイミングで、Canvas_Overley の子オブジェクトにしてあげる必要があります
では、どうすれば、生成した ContractSet ゲームオブジェクトを、ヒエラルキーにある Canvas_Overley の子オブジェクトに出来るのか、を考えていくことになります。

 なお、Canvas_Overlay ゲームオブジェクトはヒエラルキーに存在するため、
プレハブであるキャラ契約用のポップアップのゲームオブジェクトには事前にアサインしておくことが出来ません。
そのため例えば、契約用のポップアップから、親オブジェクトにさかのぼり、Canvas_Overlay ゲームオブジェクトの子オブジェクトとしてセットする処理、
あるいは別の Canvas を作成して、そちらに生成する、といった処理などを検討します。


<これが目標の状態>



 ここまでがキャラ契約用のポップアップのスクリプトに追加する内容になります。

 大切なのは、自分がいま、何をやりたいのかを理解することであって、それを目的とした場合、どんな方法があるか、を考えていく、ということです。
プログラムには正解は1つではありませんが、正常に動作すれば、それは正解の1つになります。

 自分の考えた方法で、実装にチャレンジしてみてください。



 また、この追加した機能を利用した処理の実装も行います。

 ポップアップ内にある契約用のボタンを押したタイミングで実行されるメソッドを用意します。
もしも、この契約用のボタンの情報を変数として準備していない場合には、Button 型の変数を追加して、メソッドを登録して実行できるようにします。

 メソッド内には、ContractSet ゲームオブジェクトを生成する処理と、ContractDetail クラスに記述してある SetUpContractDetail メソッドを実行する処理を記述します。
生成する情報と生成する位置の情報には、先ほど用意しておいた変数を利用しましょう。第2引数を Transform 型に設定することで、親子関係の状態で生成されます。
もしも生成場所が Canvas_Overlay ではなくて契約用のポップアップであるならば、親オブジェクトにさかのぼり、Canvas_Overlay ゲームオブジェクトの子オブジェクトとしてセットする処理も実装します。

 SetUpContractDetail メソッドを実行するためには、引数として CharaData クラスの情報を設定する必要がありますので、ユーザーが選択している契約したいキャラの情報を
変数で管理できる状態にしておくといいでしょう。この辺りの処理は、キャラを配置する際のポップアップのスクリプトの処理が参考になります。

 どのような処理を実装すればいいのか、設計も含めて考えて書いてみましょう。


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


 キャラ契約用のポップアップに処理が実装できたら、デバッグを行います。
キャラを契約するボタンを押したら、ContractSet ゲームオブジェクトが生成されて、契約用に選択していたキャラの画像と名前が設定されていれば制御成功です。

 画面をタップしたら、契約用のスタンプ画像がアニメ演出で実行されます。

 その後、もう一度画面をタップすることで、ContractSet ゲームオブジェクトが破棄されて、ステージ選択シーンに戻ります。


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

 こちらの動画を参考して、想定している処理が動いているかを確認してください。



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

 次は 発展17 ーセーブ・ロード機能の実装  です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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