２Ｄタップシューティングゲーム 手順１６
最終更新：
orika_ex_miyako 2021年01月22日(金) 21:35:04履歴
耐久力の値の増減に合わせて、耐久力用のゲージをアニメ演出させて徐々に変化させる制御を実装します。
以下の内容で順番に実装を進めていきます。
＜実装動画 耐久力用のゲージをアニメ演出して制御する＞
動画ファイルへのリンク
手順１６ ースクリプトによる耐久力用ゲージの制御処理の実装ー
新しい学習内容は、以下の通りです。
３２．DOTweenをインポートして設定する
１．DOTween とは
DOTween(ドットゥイーン) は、Unity のアセットストアにて無償で公開されている、Tween系(アニメ用)アセットです。
このアセットは処理と処理の間の、補間処理を行ってくれる機能を持っています。
例えば、A地点から B地点にゲームオブジェクトを移動させる処理を実装した場合、通常であれば一瞬で移動を行ってしまいますが
DOTween を利用すると A地点からB地点までの移動するまでの中間の処理を作成して移動を行ってくれます。
この補間処理の機能によって中間の処理があることで、ゲームオブジェクトがアニメーションしているように見せることが出来ます。
２．Unity に DOTween をインポートする
アセットストアにサインインして、検索で DOTween と入力すれば見つかります。Pro版（有償）もありますが、無償版で問題ありません。
直接のリンクアドレスはこちらです。
ダウンロードして Unity にインポートしてください。インポート設定はそのままで問題ありません。
インポートされるとProject内にDemigiantというフォルダが追加されます。こちらがDOTweenアセットのフォルダになります。
Demigiant/DOTween
３．初期設定を行う
インポート後、DOTween Utility Panelという、DOTweenの設定用のポップアップウインドウが自動的に開きますので、Setup DOTweenボタンを押して実行しましょう。
もしも自動で開かない場合には、Unityの左上のメニューより Tools => Demigiant => DOTween Utility Panel を選択すればウインドウを開くことが出来ます。
準備用のポップアップがさらに開いて、準備が完了するとApplyボタンが押せるようになります。
これでDOTweenの準備が完了し、Unityで利用できるようになりました。先ほどのDOTween Utility Panel ウインドウは閉じてしまって問題ありません。
なおDOTweenには様々な機能がありますが、今回の製作ではその一部を利用していきます。
詳しい説明は公式リファレンス、あるいは多くの使用方法の紹介記事がありますので、自分で調べてみてください。
公式サイトのリンク（ドキュメント）
http://dotween.demigiant.com/documentation.php
３３．DefenseBase スクリプトを修正し、耐久力のゲージをアニメ演出しながら徐々に増減させる制御処理を実装する
１．設計
耐久力用のゲージのアニメ演出を実装するには、インポートした DOTween の機能を利用します。
DOTween の機能を利用する場合であっても、操作の対象となるコンポーネントの情報がスクリプトになければ操作は行えません。
今回のゲージの制御を行うためには、ゲージの管理をしている Slider コンポーネントの情報が必要になりますので、
Text コンポーネントの情報を取得した際と同じように、SerializeField属性をつけた Slider 型の変数を用意して、インスペクターから事前に登録を行います。
この Slider 型の変数に対して、DOTween の処理を命令することができます。
ゲージの制御の処理を記述する場所は、すでに TODO 機能で記述してありますので、その部分に処理を追記しましょう。
２．DefenseBase スクリプトを修正し、DOTween の機能を利用して Slider コンポーネントの Value の値を制御する処理を追加する
設計を元に処理を記述します。
今回は初めての DOTween の実装ですので、自分で調べて実装をしていただいてもよいですが、教材を見ながら進めていただいても構いません。
DefenseBase.cs
スクリプトを作成したらセーブします。
DefenseBase ゲームオブジェクトのインスペクターを確認し、新しく SerializeField属性 で宣言した変数が追加されていることを確認します。
DefenseBase ゲームオブジェクト インスペクター画像
３．＜DOTweenの補間機能と実装例� �DOValue メソッドー＞
DOValue メソッドは DOTween の扱えるメソッドの１つです。
Slider コンポーネントに対して使用することが出来るもので、その名前の通り、Slider コンポーネントの持つ Value の値の補間処理を行ってくれます。
第1引数には最終的な Value の値(変更後の値)を入れます。今回は、durability(現在値) の値を maxDurability(最大値) の値で除算することにより、
計算結果の値が、0 〜 1.0f の間の値になります。Slider の Value の値も 0 〜 1.0f の値で設定されていますので、
この計算結果の値をそのまま Value の部分に適用することによって、現在値に応じた分だけゲージが動くように設計しています。
第2引数には、第1引数の値に変化するまでにかける時間を設定します。
そのため、今回の実装では、Value の計算結果の値になるまでに 0.25 秒かけて Value の値を変更しています。
この DOValue メソッドの機能により、ゲージが徐々に減りながら動く、アニメーションしているような処理が実装出来ます。
第1引数については計算結果が 0 - 1.0f になりますが、この部分については次のキャスト処理があることによって成立していますので、続けて学習します。
４．＜キャスト処理＞
DOValue メソッドの第1引数に注目してください。
変数の前に()で型の指定があります。
この処理はキャストと呼ばれる処理で、計算した結果の値を ()内で指定した型に型変換する機能です。
今回のケースでは、 durability の値を maxDurability で割って float 型にキャスト(型変換)した値(0.0f - 1.0f)を Value の値としています。
Value の値は float 型ですので、int型である durability と maxDurability の計算結果は int 型になってしまうため、そのままでは使えません。
また、int 型を除算すると浮動小数点の値が切り捨てられてしまい、0 か 1 のいずれかの値しか取得できません。
そのため、ここではキャストを行い、int 型を除算した結果を float 型にキャストすることで、小数点の値を利用できるように処理しています。
キャストとは型変換の処理のことです。今回は int 型を変換していますが、他の型での変換も、型同士の変換処理はキャストと呼ばれます。
他にもよく使用している処理があります。それが ToString メソッドです。これは int 型などの数字を扱う型を、文字列である string に変換している処理です。
５．DefenseBaseSet ゲームオブジェクトの設定を行う
DefenseBaseSet ゲームオブジェクトのインスペクターより、DefenseBase スクリプトに追加されている変数に必要な情報をアサインします。
今回表示されている変数は slider 変数で、現在は None(Slider) と表示されています。
そのため、この変数にアサインできる情報は、Slider コンポーネントのアタッチされているゲームオブジェクトになります。
ヒエラルキーより、Slider ゲームオブジェクトを見つけて、slider 変数にドラッグアンドドロップしてアサインしてください。
これで、DefenseBase スクリプトは、Slider ゲームオブジェクトの Slider コンポーネントを操作できるようになりました。
DefenseBaseSet ゲームオブジェクト インスペクター画像
以上で設定は完了です。
６．ゲームを実行して動作を確認する
実装が終了しましたので、ゲームを実行してゲージがアニメ演出するか、確認します。
ゲームがスタートすると、空である耐久力のゲージがアニメ演出しながら徐々に満タンになります。
また、エネミーが拠点に侵入して耐久力の値が減算された場合にも、減算後の耐久力の値になるまで、アニメ演出しながら徐々にゲージが減っていきます。
＜実装動画 耐久力用のゲージをアニメ演出して制御する＞
動画ファイルへのリンク
仮に、もしも DOTween の補間機能を利用しない場合、どのようになるかを見てみましょう。
自分でも検証してみてください。
＜検証動画 DOValue メソッドを利用しない場合＞
動画ファイルへのリンク
違いは一目瞭然です。
DOValue メソッドを利用している場合、スタート時にゲージが空の状態から満タンの状態になるようにアニメ演出されて満タンになります。
ですが、Value の値を書き換えるだけですと、すぐに満タンの状態になります。この違いが補間処理(最初と最後だけではなく、中間部分がある)です。
またエネミーに侵入された場合も、DOValue メソッドの場合には、ゲージがアニメ演出しながら徐々に減少して現在の耐久力の値まで移動します。
Value の値を書き換える処理の場合だと、すぐにゲージが現在値の位置まで移動します。
演出はゲーム上、非常に重要な要素になります。
DOTween は多機能ですので、他の部分にも利用できます。今後も学習していきますので、徐々に慣れていきましょう。
以上でこの手順は終了です。
次は 手順１７ ーエネミーのHPゲージの作成とスクリプトによる制御の実装ー です。
以下の内容で順番に実装を進めていきます。
＜実装動画 耐久力用のゲージをアニメ演出して制御する＞
動画ファイルへのリンク
手順１６ ースクリプトによる耐久力用ゲージの制御処理の実装ー
３２．DOTweenをインポートして設定する ３３．DefenseBase スクリプトを修正し、耐久力のゲージをアニメ演出しながら徐々に増減させる制御処理を実装する
新しい学習内容は、以下の通りです。
・DOTweenの補間機能と実装例� �DOValue メソッドー ・キャスト処理
３２．DOTweenをインポートして設定する 
１．DOTween とは
DOTween(ドットゥイーン) は、Unity のアセットストアにて無償で公開されている、Tween系(アニメ用)アセットです。
このアセットは処理と処理の間の、補間処理を行ってくれる機能を持っています。
例えば、A地点から B地点にゲームオブジェクトを移動させる処理を実装した場合、通常であれば一瞬で移動を行ってしまいますが
DOTween を利用すると A地点からB地点までの移動するまでの中間の処理を作成して移動を行ってくれます。
この補間処理の機能によって中間の処理があることで、ゲームオブジェクトがアニメーションしているように見せることが出来ます。
２．Unity に DOTween をインポートする
アセットストアにサインインして、検索で DOTween と入力すれば見つかります。Pro版（有償）もありますが、無償版で問題ありません。
直接のリンクアドレスはこちらです。
https://assetstore.unity.com/packages/tools/animat...
ダウンロードして Unity にインポートしてください。インポート設定はそのままで問題ありません。
インポートされるとProject内にDemigiantというフォルダが追加されます。こちらがDOTweenアセットのフォルダになります。
Demigiant/DOTween
３．初期設定を行う
インポート後、DOTween Utility Panelという、DOTweenの設定用のポップアップウインドウが自動的に開きますので、Setup DOTweenボタンを押して実行しましょう。
もしも自動で開かない場合には、Unityの左上のメニューより Tools => Demigiant => DOTween Utility Panel を選択すればウインドウを開くことが出来ます。
準備用のポップアップがさらに開いて、準備が完了するとApplyボタンが押せるようになります。
これでDOTweenの準備が完了し、Unityで利用できるようになりました。先ほどのDOTween Utility Panel ウインドウは閉じてしまって問題ありません。
なおDOTweenには様々な機能がありますが、今回の製作ではその一部を利用していきます。
詳しい説明は公式リファレンス、あるいは多くの使用方法の紹介記事がありますので、自分で調べてみてください。
公式サイトのリンク（ドキュメント）
http://dotween.demigiant.com/documentation.php
３３．DefenseBase スクリプトを修正し、耐久力のゲージをアニメ演出しながら徐々に増減させる制御処理を実装する
１．設計
耐久力用のゲージのアニメ演出を実装するには、インポートした DOTween の機能を利用します。
DOTween の機能を利用する場合であっても、操作の対象となるコンポーネントの情報がスクリプトになければ操作は行えません。
今回のゲージの制御を行うためには、ゲージの管理をしている Slider コンポーネントの情報が必要になりますので、
Text コンポーネントの情報を取得した際と同じように、SerializeField属性をつけた Slider 型の変数を用意して、インスペクターから事前に登録を行います。
この Slider 型の変数に対して、DOTween の処理を命令することができます。
ゲージの制御の処理を記述する場所は、すでに TODO 機能で記述してありますので、その部分に処理を追記しましょう。
２．DefenseBase スクリプトを修正し、DOTween の機能を利用して Slider コンポーネントの Value の値を制御する処理を追加する
設計を元に処理を記述します。
今回は初めての DOTween の実装ですので、自分で調べて実装をしていただいてもよいですが、教材を見ながら進めていただいても構いません。
DefenseBase.cs
<= クリックすると開きます
スクリプトを作成したらセーブします。
DefenseBase ゲームオブジェクトのインスペクターを確認し、新しく SerializeField属性 で宣言した変数が追加されていることを確認します。
DefenseBase ゲームオブジェクト インスペクター画像
３．＜DOTweenの補間機能と実装例� �DOValue メソッドー＞
DOValue メソッドは DOTween の扱えるメソッドの１つです。
Slider コンポーネントに対して使用することが出来るもので、その名前の通り、Slider コンポーネントの持つ Value の値の補間処理を行ってくれます。
// ゲージの表示を耐久力の値に合わせて更新 slider.DOValue((float)durability / maxDurability, 0.25f);
第1引数には最終的な Value の値(変更後の値)を入れます。今回は、durability(現在値) の値を maxDurability(最大値) の値で除算することにより、
計算結果の値が、0 〜 1.0f の間の値になります。Slider の Value の値も 0 〜 1.0f の値で設定されていますので、
この計算結果の値をそのまま Value の部分に適用することによって、現在値に応じた分だけゲージが動くように設計しています。
第2引数には、第1引数の値に変化するまでにかける時間を設定します。
そのため、今回の実装では、Value の計算結果の値になるまでに 0.25 秒かけて Value の値を変更しています。
この DOValue メソッドの機能により、ゲージが徐々に減りながら動く、アニメーションしているような処理が実装出来ます。
第1引数については計算結果が 0 - 1.0f になりますが、この部分については次のキャスト処理があることによって成立していますので、続けて学習します。
４．＜キャスト処理＞
DOValue メソッドの第1引数に注目してください。
(float)durability / maxDurability
変数の前に()で型の指定があります。
この処理はキャストと呼ばれる処理で、計算した結果の値を ()内で指定した型に型変換する機能です。
今回のケースでは、 durability の値を maxDurability で割って float 型にキャスト(型変換)した値(0.0f - 1.0f)を Value の値としています。
Value の値は float 型ですので、int型である durability と maxDurability の計算結果は int 型になってしまうため、そのままでは使えません。
また、int 型を除算すると浮動小数点の値が切り捨てられてしまい、0 か 1 のいずれかの値しか取得できません。
そのため、ここではキャストを行い、int 型を除算した結果を float 型にキャストすることで、小数点の値を利用できるように処理しています。
キャストとは型変換の処理のことです。今回は int 型を変換していますが、他の型での変換も、型同士の変換処理はキャストと呼ばれます。
他にもよく使用している処理があります。それが ToString メソッドです。これは int 型などの数字を扱う型を、文字列である string に変換している処理です。
５．DefenseBaseSet ゲームオブジェクトの設定を行う
DefenseBaseSet ゲームオブジェクトのインスペクターより、DefenseBase スクリプトに追加されている変数に必要な情報をアサインします。
今回表示されている変数は slider 変数で、現在は None(Slider) と表示されています。
そのため、この変数にアサインできる情報は、Slider コンポーネントのアタッチされているゲームオブジェクトになります。
ヒエラルキーより、Slider ゲームオブジェクトを見つけて、slider 変数にドラッグアンドドロップしてアサインしてください。
これで、DefenseBase スクリプトは、Slider ゲームオブジェクトの Slider コンポーネントを操作できるようになりました。
DefenseBaseSet ゲームオブジェクト インスペクター画像
以上で設定は完了です。
６．ゲームを実行して動作を確認する
実装が終了しましたので、ゲームを実行してゲージがアニメ演出するか、確認します。
ゲームがスタートすると、空である耐久力のゲージがアニメ演出しながら徐々に満タンになります。
また、エネミーが拠点に侵入して耐久力の値が減算された場合にも、減算後の耐久力の値になるまで、アニメ演出しながら徐々にゲージが減っていきます。
＜実装動画 耐久力用のゲージをアニメ演出して制御する＞
動画ファイルへのリンク
仮に、もしも DOTween の補間機能を利用しない場合、どのようになるかを見てみましょう。
自分でも検証してみてください。
＜検証動画 DOValue メソッドを利用しない場合＞
動画ファイルへのリンク
違いは一目瞭然です。
DOValue メソッドを利用している場合、スタート時にゲージが空の状態から満タンの状態になるようにアニメ演出されて満タンになります。
ですが、Value の値を書き換えるだけですと、すぐに満タンの状態になります。この違いが補間処理(最初と最後だけではなく、中間部分がある)です。
またエネミーに侵入された場合も、DOValue メソッドの場合には、ゲージがアニメ演出しながら徐々に減少して現在の耐久力の値まで移動します。
Value の値を書き換える処理の場合だと、すぐにゲージが現在値の位置まで移動します。
演出はゲーム上、非常に重要な要素になります。
DOTween は多機能ですので、他の部分にも利用できます。今後も学習していきますので、徐々に慣れていきましょう。
以上でこの手順は終了です。
次は 手順１７ ーエネミーのHPゲージの作成とスクリプトによる制御の実装ー です。
コメントをかく