i-school - 3Dダイビングゲーム 手順18
 この手順ではキャラの姿勢を変更するための条件としてチャージ時間を設定して、ボタンと連動させる処理を実装します。
これは2回に分けて順番に実装を行います。


<完成画像 ゲージが溜まっている間は、ボタンの色を変えて押せないことをアピール>



<完成画像 ゲージが溜まったらボタンの色を戻して押せることをアピール>



<完成動画>
https://gyazo.com/3ac0d206e162c4d41964be9434f66370


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

手順18 ー姿勢変更ボタンと姿勢変更ゲージを同期ー
29.スクリプトを使って、姿勢変更ゲージが満タンになったときだけ姿勢変更ボタンを押せるように制御する



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

 ・ボタンとゲージを連動させるためのロジックを考える
 ・Selectable.interactable プロパティ



29.スクリプトを使って、姿勢変更ゲージが満タンになったときだけ姿勢変更ボタンを押せるように制御する

1.設計


 まずは最初に、姿勢変更ゲージが満タンになったときだけ姿勢変更ボタンを押せるように制御する処理について考えます。
ゲームの開始と同時にゲージは自動的に溜まり始めるように実装できていますので、必要なのはボタンの制御です。

 ・チャージ中(ゲージが溜まっている間)は、ボタンを押せない状態にする
 ・チャージが完了(ゲージが満タンになったとき)は、ボタンを押せる状態にする

 ボタンの状態は、Button コンポーネントが持っている interactable プロパティを利用して制御します。
このスイッチがオンの間はボタンが押せる状態、オフの間はボタンが押せない状態を切り替えることができる機能です。

 大切なのは、このボタンの切り替え制御処理をどの部分に組み込んだらいいのか、そのロジックを考えることです。
どういう状態になったら、この処理を行えばいいのか、上記の日本語をプログラムに置き換えて考えてみてください。


<実行動画 ゲージが溜まっている間はボタンが押せない。満タンになると押せる>
https://gyazo.com/3ac0d206e162c4d41964be9434f66370


 
 この処理が無事に実装できたら、あと2つ、制御が必要な処理があります。

 1つは、ボタンを押せるようになったとき、ボタンを押したら、ゲージが減少している間は、ボタンを押せる状態のままにしておくことです。
つまり、チャージのゲージが減少している間は、もう一度だけボタンを押せるようにすることで直滑降の状態に戻すことができるようにします。
当然、その場合にはゲージが満タンではありませんから、またボタンは押せない状態に戻す必要があります


<実装動画 伏せ状態でゲージが減少している間は、1度だけボタンを押せる。押したら、チャージが終わっていないので、またボタンを押せない状態に戻す>
https://gyazo.com/1b567d8079c76e63e10c1bea2da10c7f
 

 もう1つは、ボタンを押してゲージが減少している間にボタンを押さなかった場合、ゲージが 0 になったら
強制的にキャラの姿勢を戻して、ボタンを押せない状態に戻すように制御します


<実装動画 伏せの状態のままゲージがなくなったら強制的に直滑降の状態とボタンを押せない状態に戻す>
https://gyazo.com/d38da6c1d06b92c6f6734bd703000f57


 これがすべて備わって、ボタンとゲージの連動処理が完成します。
 
 このロジックを、順番に1つずつ考えてみて、ロジックを実装してください。

 ヒントとしましては、チャージが完了しているか、していないかを管理するための変数を1つ用意し、そちらを活用するといいと思います。
ゲージが満タンになったら、この変数を操作し、ゲージが満タンではなくなった場合にも、この変数を操作します。
そうやって「現在のチャージの状態」という情報を新しく設定することによって、実装しやすくなります。


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


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

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

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

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

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

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

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

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


3.PlayerController スクリプトを修正する


 このコードにはすべての必要な処理が記述されています。
自分で考えた制御処理を実装してから、こちらを確認してみてください。
こちらの通りでなくても、正常に処理が制御されているのであれば問題はありません。


PlayerController.cs

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



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


 処理が完成したら、順番に実装できているかを確認します。


<完成画像 ゲージが溜まっている間は、ボタンの色が押せない>



<完成画像 ゲージが溜まったらボタンの色が押せる>



<実行動画 ゲージが溜まっている間はボタンが押せない。満タンになると押せる>
https://gyazo.com/3ac0d206e162c4d41964be9434f66370


<実行動画 伏せ状態でゲージが減少している間は、1度だけボタンを押せる。押したら、チャージが終わっていないので、またボタンを押せない状態に戻す>
https://gyazo.com/1b567d8079c76e63e10c1bea2da10c7f


<実行動画 伏せの状態のままゲージがなくなったら強制的に直滑降の状態とボタンを押せない状態に戻す>
https://gyazo.com/d38da6c1d06b92c6f6734bd703000f57


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

 => 次は 手順19 −花輪をくぐった際の演出を追加− です。