Unityに関連する記事です

 バレット選択ボタンに選択するために必要な Exp の表示/非表示の制御処理の実装を行います。

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


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

発展25 −バレット選択用ボタンのコストによる制御−
51.BulletSelectDetail スクリプトを修正し、バレットごとの必要なコストの値を表示する
52.BulletSelectDetail スクリプトを修正し、ボタンのオン・オフの切り替え制御と、初期バレットのボタン以外はオフにする制御を追加する



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

 ・Selectable.interactable プロパティ



51.BulletSelectDetail スクリプトを修正し、バレットごとの必要なコストの値を表示する

1.設計


 初期バレット以外のバレット選択ボタンについて、選択するために必要なコストの値を表示する機能を追加します。
設計ロジックとしては、初期バレットかどうかを判定し、初期バレットであれはコストの表示はオフに、それ以外のバレットのボタンにはコストの表示をオンにするように制御をします。

 ポイントしては、値を画面に表示する制御と、その表示している状態を切り替える制御とに分けて実装を行う必要があります。

 コストとして表示する値には、BulletData の Open Exp 変数の値を利用してください。
次の手順ではこの情報を利用して、条件を満たしているボタンについては機能をオンにし、それ以外のボタンについては機能をオフにします。
 
 値を画面に表示するゲームオブジェクトについては既に btnBulletSelect ゲームオブジェクト内に作成済みですので、そちらを利用します。

 パレット選択ボタンの制御を行いますので、この手順でも BulletSelectDetail スクリプトを修正していきます。


2.BulletSelectDetail スクリプトを修正し、バレットごとの必要なコストの値を表示し、操作に合わせて Exp の値の表示/非表示を切り替える


 設計に基づいてどのような値を制御すればいいか、考えてロジックを組んでみてください。
値を表示するためのゲームオブジェクトには Textコンポーネントをアタッチされていますので、
そちらを利用するためにはどうすればいいか、今までの部分を振り返りながら実装してみてください。

 Exp を表示についてはゲーム内での変化はありませんので、最初に値を設定し表示できればそれ以降は値の変更はありません。
 
 その後は、その Exp の表示と非表示の制御をおこなう処理が必要になります。
ボタンの初期設定時ボタンが押された時発射できる時間がなくなった時、の3つです。
この表示の切り替えを行う制御が重要になります。


BulletSelectDetail.cs


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



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


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




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


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

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


編集モード画像



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


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



 以上で設定は完了です。



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


 スクリプトを見直してからゲームを実行して挙動の確認を行います。
ロジックとして考えている挙動と、実際の挙動の内容を確認してください。

<制御内容>
 ・ゲームを実行すると、各バレット選択ボタンに openExp 変数の値と Exp の画像が表示される
 ・初期バレットのボタンには値と Exp の画像は表示されない
 ・バレット選択ボタンを押すと、そのバレットから openExp 変数の値と Exp の画像が非表示になる
 ・発射できる残り時間がなくなると、そのバレット選択ボタンに openExp 変数の値と Exp の画像が再度表示される

<Gameビュー画像>



<実装動画 Exp の表示されているバレットを選択すると、Exp の表示が非表示になる>
動画ファイルへのリンク


<実装動画◆“射できる時間のゲージがなくなると、再度 Exp が表示される。もう一度バレットを押しても同じように動作する>
動画ファイルへのリンク


 以上で完了です。続いて、コストの値に紐づいたボタンのオン・オフの切り替え機能を実装します。


5.応用<処理をメソッド化する>


 教材では Text コンポーネントの表示/非表示の処理に SetActive メソッドを利用しています。
これはその子オブジェクトである Exp の画像も一緒に表示/非表示の制御をさせるためです。

 この処理をメソッド化し、そのメソッドを呼び出すことによって、SetActive メソッドを実行できるように変更してください。
引数を活用する必要がありますので、他の処理も参考にしながらメソッドを作成して実装してみてください。


52.BulletSelectDetail スクリプトを修正し、ボタンのオン・オフの切り替え制御と、初期バレットのボタン以外はオフにする制御を追加する

1.設計


 バレット選択ボタンに、ボタンのオン・オフの切り替えの制御を追加します。
次の手順ではこの制御とコストの値を判定に利用して、Exp の現在値がコストを満たしているかを判断して、ボタンのオン・オフを自動的に切り替えるようにします。

 まずは最初に、ボタンのオン・オフの切り替えを行う処理をメソッドとして用意することを考えます。
これは何回も利用されることとの、オン・オフの切り替えを引数を利用して実装したいためです。

 また、今回は上記の制御処理を利用して、初期パレットのボタン以外はボタンの機能をオフにする制御を実装します。

 ボタンには interactable というオン・オフを切り替える専用の機能がありますので、そちらを利用しましょう。
インスペクター上のコンポーネントに表示されている情報はプロパティと呼ばれています。
この情報は、Button に限らず、操作したいコンポーネントの情報を取得することにより、スクリプトから操作を行うことができます
今回利用する情報も Button コンポーネントに表示されていますので、確認しておいてください。


Button コンポーネント




2.BulletSelectDetail スクリプトを修正し、ボタンのオン・オフの切り替え制御と、初期バレットのボタン以外はオフにする制御を追加する


 SetUpBulletSelectDetail メソッド内にある TODO の部分に処理を追加します。
初期バレットのボタン以外はオフにする制御を追加する、ということは、初期バレットのボタンだけをオンにする制御とも言えます。
この辺りの処理の転換を行ってみてください。

 色々な制御方法はありますが、最初にすべてのボタンをオフにしておいて、初期バレットのボタンだけオンにする、という制御方法を考えてみましょう。
結果として、初期バレットのボタンだけをオンにする制御を実装できるはずです。


BulletSelectDetail.cs


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


3.<Selectable.interactable プロパティ>


 Button コンポーネントは、bool 型の interactable プロパティを持って(管理して)います。

 こちらのスイッチがオン(true)の場合、ボタンは有効な状態です。これを活性状態といいます。

 こちらのスイッチがオフ(false)の場合、ボタンは無効な状態です。
ボタンの色が Disabled Color で設定されている色に変わります(デフォルトは半透明な灰色)。これを非活性状態といいます。

 この情報はプロパティですので、スクリプトから操作をすることが出来ます。
今回はこちらの機能を利用してボタンを制御しつつ、視覚的にもわかるようにしています。

 実際にインスペクターで操作をしてみて、どのように変化するかを確認しておきましょう。

<ボタンを押せない状態にする処理>
  // ボタンを非活性化(半透明で押せない状態)
  btnBulletSelect.interactable = false;

<ボタンを押せる状態にする処理>
  // ボタンを非活性化(半透明で押せない状態)
  btnBulletSelect.interactable = true;

 今回はこの活性化/非活性化の切り替え処理をメソッドの引数を利用して1つの処理で運用出来るようにしています。
このような設計にしておくことで、false 用、true 用といった処理を分けて記述する必要がなくなるためです。
引数の活用方法を覚えると設計が楽になるだけではなく、面白くなります。

    /// <summary>
    /// バレット選択ボタンの活性化/非活性化の切り替えの更新
    /// </summary>
    public void SwitchActivateBulletBtn(bool isSwitch) {
        btnBulletSelect.interactable = isSwitch;
    }


参考サイト
Unity公式スクリプティングAPI
Selectable.interactable
https://docs.unity3d.com/2019.1/Documentation/Scri...
すくまりのメモ帳 様
【Unity】Buttonをinteractableで無効化したり、動的にイベントを追加する方法
https://squmarigames.com/2018/12/10/unity-beginner...


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


 スクリプトの修正がすんだら処理の内容を確認します。
それからゲームを実行して実装した制御が正常に動作しているか、確認します。

 初期バレットのボタンがオンの状態、それ以外のバレットのボタンはオフの状態になれば制御成功です。


<実装画像>



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


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

 次は 発展26 −バレット選択用ボタンのコストと Exp の現在値による、ボタンのオン・オフ制御の連動− です。
この機能を利用して、Exp の現在値に応じて、ボタンのオン・オフが自動的に切り替わる制御を実装します。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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