Unityに関連する記事です

 バレット選択ボタンの制御について、2回の手順にわけて実装を行っていきます。


<実装動画 バレットに発射可能な時間を設定し、ゲージで表示。初期バレットを設定し、初期バレットは時間制限なし>
動画ファイルへのリンク


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

発展23 −バレット用の発射時間の制御−
47.BulletSelectDetail スクリプトを修正し、ボタンを押したときに、発射できる時間の残り時間に合わせてゲージが連動する処理を追加する
48.BulletSelectDetail スクリプトを修正し、初期バレットのボタンは残り時間に関係なく発射できるようにする処理を追加する



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

 ・DOTweenの補間機能と実装例А DOFillAmount メソッドー



47.BulletSelectDetail スクリプトを修正し、ボタンを押したときに、発射できる時間の残り時間に合わせてゲージが連動する処理を追加する

1.設計


 バレット選択ボタンを自動生成し、役割(バレットのデータ)ごとに振る舞いを変更する処理まで実装できました。
ただし、まだ何も制御は出来ていませんので、ここから2回の手順に分けて、ボタンの制御処理を設計し、実装していきます。

 全体としては、次のような設計を考えてみてください。

<ボタンの制御の設計>
◆1.バレット制御ボタンを押すと、発射できる残り時間に合わせて青いゲージが表示されて減少していく制御をする
 2.初期バレットについては、発射できる残り時間の概念はなく、いつでもずっと発射ができるように制御する
 3.発射できる残り時間のゲージが残っている場合に別のバレットを選択した場合には、ゲージの減少を一時停止する。再度、そのバレットを選択したら、残りのゲージ分から減少が再開する
 4.発射できる残り時間がなくなったバレットを選択している場合、強制的に初期バレットが発射できるように制御する。このとき、そのバレットは次に選択するときのために、発射時間を初期値に戻す制御も行う

 毎回同じ説明にはなりますが、すべてを一回の手順で実装する必要はありません
今回はまず、【1】の手順の設計を行い、ロジックを実装してみてましょう。

 なお、こういった全体の流れを考えて実装を行っていくこと、それ自体も設計の1つにあたります。
つまり、このような実装の流れを自分で設計できるようにならなければなりません。

 現在までに実装されている処理と自分が求めている処理の形を考えることによって、残っている実装が見えてきます



 各バレットには、選択すると発射できる制限時間があり、これはデータ化されています。
そのため、この情報を活用すれば、バレットごとに発射できる時間を参照し、利用することが可能です。
先の手順では、このバレットの選択にも制御を追加しますが、いまはバレットのボタンを押すと自由に選択できる前提で作業をしてください。

 バレットを選択すると、残り時間用の青いゲージが表示されて、時間の経過に合わせて減少させていきます
こちらのゲージについては btnBulletSelect ゲームオブジェクトの中に作成してあります
現在は非アクティブ状態で一時的に表示されていませんので、こちらをアクティブに切り替えて表示できるようにします。



 ここまでの処理を実装するにあたり、必要になる情報(変数や処理)がどういうものなのか、考えてみてください。
残り時間のゲージの制御をどう行うのか、選択しているバレットとそうではないバレットをどのように見分けるのか
そういった部分のロジックを考えていくことが大切です。


2.BulletSelectDetail スクリプトを修正し、バレット選択ボタンを押すと、発射できる残り時間に合わせて青いゲージが表示されて減少していく制御をする


 どのようなロジックで進めればいいか、考えてから処理を実装してください。
先ほど記述したように、どんな処理があれば「バレット選択ボタンを押すと、発射できる残り時間に合わせて青いゲージが表示されて減少していく制御」が行えるのか
全体の流れをみて考えていく必要があります。

 残り時間のゲージの制御をどう行うのか、選択しているバレットとそうではないバレットをどのように見分けるのか、まずはこの部分を実装しましょう。



 ゲージについては、Image コンポーネントの画像の ImageType を Filled に設定してありますので、FillAmount という値が表示されています。
この値を操作することによって画像の形状を指定しているタイプに合わせて変更することができます。
これはゲームオブジェクトの設定時に説明していますが、 Unity の教科書でも学習している内容になりますので、参考にしてください。

 FillAmount の値を操作する際には、DOTween の機能を利用すると、ゲージが滑らかにアニメーションしながら変化させることが出来ます。
DOFillAmount メソッドという専用のメソッドがありますので、下にメソッドの内容説明は用意してありますが、まずは調べてみてください。
「こんな処理をしたいけど、なにか利用できる機能はないかな」、という視点を持つことが大切です。



 バレットを発射できる時間は BulletData の launchTime 変数を利用してください。この情報に残り時間を設定するようになっています。
また先のことを考えて、現在使用しているバレットのボタン、使用していないバレットのボタンを制御していく必要があります。
他のバレットのボタンについては後で実装を行いますので、まずは、バレットのボタンを押したら、そのボタンを「選択している状態」になるようにしてください。
この状態を「装填中」、選択していない場合を「未装填」と呼称します。そのような情報を持つ変数はありませんので、今までの実装を参考にして考えて運用してみてください。



 必要な変数を把握して必要な型と修飾子で宣言を行ったら、どの部分(メソッド内)に処理を追加すればそれらを利用した処理を実装できるのか、
新しいメソッドの準備は必要ないか、などの自分の考えているロジックを元にして実装していきましょう。


BulletSelectDetail.cs


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



 Prefabs フォルダ内にある btnBulletSelect ゲームオブジェクトのインスペクターを確認します。
新しく SerializeField属性で宣言した変数が追加されています。


btnBulletSelect ゲームオブジェクト インスペクター画像




3.<DOTweenの補間機能と実装例А DOFillAmount メソッドー>


 新しく実装を行った DOTween の機能について説明します。

  // 残り時間とゲージを合わせる = 残り時間がなくなったら、ゲージも見えなくなる
  imgLaunchTimeGauge.DOFillAmount(launchTime / initialLaunchTime, 0.25f);



 DOFillAmount メソッドは、画像の ImageType を Filled に設定している Image コンポーネントに対して実行できるメソッドです。
Image コンポーネントの持つ FillAmout の値に対して補間処理を行って、アニメしているように演出してくれる機能です。

 FillAmount の値を、第1引数で指定した値まで、第2引数で指定した時間をかけて変更します。
第1引数は float 型を指定しますが、FillAmount で取れる値の範囲は 0 - 1.0f の間です。
そのため、現在の残り時間の値 / 残り時間の初期値(最大値) の計算を行うことで、1.0f に対しての割合を算出し、それを用いています。

 例えば、 launchTime が 1.0f 、initialLaunchTimeが 5.0f である場合、計算結果は 0.2f になります。
この値を FillAmount の値として利用しているので、FillAmount の範囲内に値を収めて変更することが出来ています。

 どちらも変数で計算を行っているのは、双方の値が動的に変化しても対応できるようにするためです。
設計を行う際には、そういった部分にも着目して考えておくと運用しやすくなります。


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


 btnBulletSelect ゲームオブジェクトを選択し、インスペクターの一番上にある Open Prefab ボタンを押してプレファブ編集モードに切り替えます。

 非表示状態になっている imgLaunchTimeGauge ゲームオブジェクトをアクティブ状態に切り替えて表示します。


編集モード画像



 BulletSelectDetail スクリプトの imgLaunchTimeGauge 変数に同名のゲームオブジェクトをドラッグアンドドロップしてアサインしてください。
自動的に Image コンポーネントの情報が登録されます。


btnBulletSelect ゲームオブジェクト インスペクター画像



 以上で設定は完了です。


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


 スクリプトを修正し、ゲームオブジェクトの設定が終了したら、見直しを行って、処理の制御の流れを確認しておきます。
ゲームを実行して、実際に実装している処理通りに動いているかを確認します。

 ゲームを実行すると各バレット選択用ボタンに発射時間の情報がセットされて、そののちに、残り時間用のゲージは見えなくなります。
まずはすべてのボタンがこの状態になるか確認してください


<ゲーム実行時 青いゲージは見えない>


 
 つづいて、バレット選択ボタンをクリックしてください。青いゲージが表示されて、設定した時間をかけて時計回りにゲージの表示が減少していけば制御成功です。
他のボタンも押してみてください。同様に動くはずです。


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


 次の手順では、初期選択のバレットについては、残り時間に関係なく、いつでも発射できるようにする制御を追加します。


 

48.BulletSelectDetail スクリプトを修正し、初期バレットのボタンは残り時間に関係なく発射できるようにする処理を追加する

1.設計


 前回の手順で【1】については実装が完了しました。処理の流れが把握できていない場合には、繰り返しスクリプトを見直してください。

<ボタンの制御の設計>
〇1.バレット制御ボタンを押すと、発射できる残り時間に合わせて青いゲージが表示されて減少していく制御をする
◆2.初期バレットについては、発射できる残り時間の概念はなく、いつでもずっと発射ができるように制御する
 3.発射できる残り時間のゲージが残っている場合に別のバレットを選択した場合には、ゲージの減少を一時停止する。再度、そのバレットを選択したら、残りのゲージ分から減少が再開する
 4.発射できる残り時間がなくなったバレットを選択している場合、強制的に初期バレットが発射できるように制御する。このとき、そのバレットは次に選択するときのために、発射時間を初期値に戻す制御も行う

 この手順では【2】の部分のロジックを考えて実装を行っていきます。



 まずは前提として、初期バレットとは何か、という部分から考えていく必要があります。
現在は初期バレットという情報はありません。また、どのような情報のバレットを初期バレットとして設定するか、についても情報はありません。
これらを順番に設計し、その内容に沿った変数や条件をロジック化して実装することにより、これらを管理・運用出来るようになります。

 どのバレットの情報を初期バレットにするかですが、初期バレットとして判断可能な専用の変数を BulletData に追加してもよいですし、
既存の情報を利用して、その情報に合致したものを初期バレットとして設定する方法でもよいです。
今回は既存の情報を利用して設定する方法で実装を行っています。



 BulletData の情報内に、Open Exp 変数があります。こちらの情報は後程利用するものですが、
内容とすると、このバレットを利用可能にするために必要な Exp の値になります。


BulletData 画像



BulletData 画像




 ゲーム開始時のプレイヤーの Exp の値は 0 よりスタートします。
つまり、この値が 0 以上に設定されているバレットについては、ゲーム開始には選択不可能なバレット、およびデータになります。

 逆説的に、この値が 0 のバレットのデータは、Exp が 0 の時から利用可能なバレットのデータになりますので、
この情報を判定基準として利用し、合致するバレットのデータを「初期バレット」として設定するように、設計を行います。
初期バレットであるかどうかは、新しく変数を用意して、そちらに保持しておくといいでしょう。

 例えば bool 型であれば、true なら初期バレットfalse なら初期バレット以外、というように変数のロジックを考えて値に情報設計を行ってください。



 初期バレットを判定する方法が定まりましたので、次はこの情報を運用する方法を考えます。

 発射できる時間については、初期バレットのみ、制限時間なしで、いつでも発射できるように制御します
それ以外のバレットはデータ内で性能差をつけてありますので、初期バレットよりは強い効果のバレットになります。
そのため、制限時間を設けています

 初期バレットであればずっと発射できるようにする、ということを色々な角度から考えてみてください。
制限時間の対象にならないようにする、という制御方法が一番ロジックを組みこみやすいと思います。

 初期バレットの場合は制限時間なしで発射できる、ということですので、ボタンを選択しても、残り時間の青いゲージを表示しないよう制御する必要があります。
このゲージは発射できる残り時間を示すものですから、制御時間のない初期バレットには不要となる処理であるためです。


2.BulletSelectDetail スクリプトを修正


 設計に基づいて、必要な変数を必要な型、修飾子で宣言し、こちらを利用して制御を行う方法を考えてみてください。
初期バレットの設定をどのタイミングで行うかも重要です。


BulletSelectDetail.cs


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


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


 実装したロジックの内容、処理の流れをしっかりと把握しておいてください。
次の手順ではそれらの情報を前提に処理を実装していくことになるためです。

 ゲームを実行して、初期バレットの設定をおこなったバレットのボタンをクリックしてみてください。
青い残り時間ゲージが表示されなければ制御成功です。制限時間なしでずっと発射できる状態になっています。

 他のバレットのボタンを押してから初期バレットのボタンを押しても同じように制御されていれば問題ありません。


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


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

 次は 発展24 −バレット用の発射時間のボタン間の連動− です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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