Unityに関連する記事です

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


<完成画像>



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


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

手順17 −姿勢変更ゲージの作成−
27.Canvas内にUI部品を作成するぁ併兩変更用のゲージ)
28.スクリプトを使って、姿勢変更用のゲージと現在のゲージの値を同期させる



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

 ・ImageコンポーネントのImageTypeの設定を Filled に変更して利用する
 ・DOTweenの補間機能と実装例 ーDOFillAmountメソッドー



27.Canvas内にUI部品を作成するぁ併兩変更用のゲージ)

1.設計


 1回の手順ではすべての実装ができませんので、順番に実装を行います。

 現在はボタンを押すたびに姿勢の変更が可能ですが、伏せ状態時には落下速度が低下するというメリットがあるため、
いつでも自由に行えるようにしてしまうと、ルールとして面白くありません。

 そこで、姿勢変更用の待機時間(チャージ時間)を設定し、その値が満タンになることによってはじめて、姿勢変更が可能になるように制御を行います。
この値は数字で管理しますが、ゲーム画面上ではゲージとして表示し、ユーザーはそのゲージを確認することによって、姿勢の変更が可能かどうかを視覚的に判断出来るようにします

 まずは最初に姿勢変更用の数字をゲージとして表示するために必要な、ゲージ用のゲームオブジェクトを作成します。
そのあと、PlayerController スクリプトを修正して、ゲージとチャージ時間の値をリンクさせて、ゲージが徐々に上昇したり、下降したりする制御を行います。

 それが完成したら、次の手順でボタンとゲージとの連動制御を行うようにします。


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


 UIとしてゲージを作成していきます。
 すでに Canvas ゲームオブジェクトがありますので、こちらをそのまま利用しましょう。

 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクトが作成されますので、名前を AttitudeGauges に変更します。
AttitudeGauges ゲームオブジェクトは、姿勢変更ゲージの表示に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。


AttitudeGauges ゲームオブジェクト ヒエラルキー画像



 AttitudeGauges ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています。
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。


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



AttitudeGauges ゲームオブジェクト Sceneビュー画像




 AttitudeGauges ゲームオブジェクトの位置とアンカーを変更します。
RectTransform コンポーネント内にある Anchor(アンカー)をクリックして、Alt キーを押しながら、Bottom Left の位置をクリックしてください
AttitudeGauges ゲームオブジェクトが画面の左上の位置に移動するとともに、アンカーの位置も画面左上に設定されます。

 手順の動画は割愛します。以前の手順で何回か学習したアンカーの設定の方法を元に設定を行ってみてください。


AttitudeGauges ゲームオブジェクト アンカー設定後のインスペクター画像



AttitudeGauges ゲームオブジェクト アンカー設定後のSceneビュー画像



 以上で設定は完了です。


3.AttitudeGauges ゲームオブジェクトの子オブジェクトとして、imgChara ゲームオブジェクトを作成する


 AttitudeGauges ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Image コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を imgChara に変更します。


imgChara ゲームオブジェクト ヒエラルキー画像



 imgChara ゲームオブジェクトはキャラのアイコン画像の表示を行うゲームオブジェクトです。
このゲージがキャラに関連しているゲージであることをユーザーに伝える役割を持っています。


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



imgChara ゲームオブジェクト SceneビューとGameビュー画像




 画像を設定します。
imgChara ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

 今回はこちらのパスにある画像を利用しています。ボタンに設定しているキャラのアイコンと同じ画像になります。
Assets/JKT_Art/UI/Character/peng_icon.png

フォルダ画像



 画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください



 画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


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



imgChara ゲームオブジェクト Sceneビュー画像



imgChara ゲームオブジェクト Sceneビュー画像



imgChara ゲームオブジェクト Gameビュー画像



 以上で設定は完了です。続いてゲージ用のゲームオブジェクトを2つ作成します。


4.AttitudeGauges ゲームオブジェクトの子オブジェクトとして、imgFrame ゲームオブジェクトを作成する


 AttitudeGauges ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Image コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を imgFrame に変更します。


imgFrame ゲームオブジェクト ヒエラルキー画像



 imgFrame ゲームオブジェクトはゲージの外枠のフレーム画像の表示を行うゲームオブジェクトです。
この中に増減するゲージの画像が入って動きますが、これはフレームなので動的な動作はありません。


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



imgFrame ゲームオブジェクト SceneビューとGameビュー画像




 画像を設定します。
imgFrame ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

 背景用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

 今回はこちらのパスにある画像を利用しています。
Assets/JKT_Art/UI/Arrow/box_3.png

フォルダ画像



 画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください



 画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


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



imgFrame ゲームオブジェクト Sceneビュー画像



imgFrame ゲームオブジェクト Sceneビュー画像



imgFrame ゲームオブジェクト Gameビュー画像



 以上で設定は完了です。続いてゲージの中身(増減して動く部分)を作成します。


5.imgFrame ゲームオブジェクトの子オブジェクトとして、imgGauge ゲームオブジェクトを作成する


 imgFrameゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Image コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を imgGauge に変更します。


imgGauge ゲームオブジェクト ヒエラルキー画像



 imgGauge ゲームオブジェクトは、PlayerController スクリプトに追加する値に合わせて動的に増減する、ゲージの部分です


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



imgGauge ゲームオブジェクト SceneビューとGameビュー画像




 ゲージ用の画像を設定します。
imgGauge ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

 背景用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

 今回はこちらのパスにある画像を利用しています。
Assets/Standard Assets/CrossPlatformInput/Sprites/SliderHandleSprite.png

フォルダ画像



 画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください



 画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


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



imgGauge ゲームオブジェクト Sceneビュー画像



imgGauge ゲームオブジェクト Sceneビュー画像



imgGauge ゲームオブジェクト Gameビュー画像



6.<ImageコンポーネントのImageTypeの設定を Filled に変更して利用する>


 画像を設定後、ImageType を Filled に変更します。すぐ下に追加の設定項目が表示されますので、
Fill Method は Horizontal、Fill Origin は Left、Fill Amount は 0 に設定してください


ImageTypeの設定



 この設定を行うと、Fill Amountの値を操作することによって設定した画像の表示する割合を変更できます。
この機能によって、画像の一部を表示したり、全部表示したり、全部非表示にすることできるため、さながら画像をゲージの増減のように扱うことが出来ます。

 Fill Method はゲージの増減する方向、Fill Origin は Fill Amount が 0 の際の画像の起点の位置です。
今回は水平方向に画像の Fill 操作を行い、起点位置を左、数値の初期値は 0 に位置にするように設定しています
他にも色々な設定がありますので、調べてみてください。


参考サイト
Unity公式スクリプトリファレンス
ImageType
https://docs.unity3d.com/ja/2018.4/ScriptReference...
TECH Projin様
【Unity uGUI】Imageコンポーネントを徹底解説
https://tech.pjin.jp/blog/2017/01/26/unity_ugui_im...


 以上の設定は、チャージ時間の経過をゲージとして表示する役割を持ちます。以下の画像のように使います。
まずは自分で、FillAmoutの値を操作してみて確認をしておいてください。これをスクリプトから操作します。


FillAmoutの検証動画
https://gyazo.com/5cbf13964b00c5d574267114143859cd


 画像を設定したら、大きさを調整します。RectTransformコンポーネントを画像を参考にしながら調整してください。
設定している画像に応じて適宜な大きさにしてください。

 また Canvas Rendererコンポーネントの Cull Transparent Mesh のチェックをオンにしてください


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



 以上で姿勢変更用のゲージオブジェクト群の完成です。


28.スクリプトを使って、姿勢変更用のゲージと現在のゲージの値を同期させる

1.設計


 姿勢変更用のゲージが完成しましたので、こちらの FillAmount の値をスクリプトから操作するとともに、
チャージ時間と FillAmount の値を連動するように制御を行います

 FillAmount の値は 0- 1.0f の範囲でしか取れません。となるとチャージするための時間には 1 秒しか取れないのか、となってしまいます。
例えば、チャージ時間の目標値が 1 を超えて 2 で設定している場合には、チャージ時間の値をそのまま FillAmount に当てはめて利用することが出来ません。

 そのため一度、現在のチャージ時間とチャージ時間の目標値とを除算して、現在の値が最大値に対してどの位の割合であるのかを計算します。
そして FillAmount の値を 0 - 1.0f で収まるように変換してから適用するようにします。

 例えば、 チャージ時間の現在値 が 1.0f 、目標値 が 2.0f である場合、除算の計算結果は 0.5f になります。
この値を FillAmount の値として利用しています。(除算をして%の割合に置き換えて、FillAmountに適用していると考えてください)

 PlayerController スクリプトには、このチャージ時間の現在値と目標値とを管理するための変数をそれぞれ用意します。
Time.deltaTime を利用して時間の計測を行いますので、どちらも float 型にして宣言します。FillAmount の値も float 型なのでちょうどいいですね。

 また、FillAmount は Image コンポーネントが管理している値ですので、Image コンポーネントを代入して操作するための変数を用意します。

 Update メソッド内の設計は次の通りです。キャラの姿勢に応じて、処理を切り替えて制御します。

 ・キャラが直滑降状態の場合、Time.deltaTime を利用してチャージ時間を加算する。合わせて、FillAmount の値も加算する。チャージ時間が目標値 =上限値になったら、どちらも上限値で止める
 ・キャラが伏せ状態の場合、Time.deltaTime を利用してチャージ時間を減算する。合わせて、FillAmount の値も減算する。チャージ時間が 0 以下になったら、どちらも 0 で止める


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


 姿勢変更が可能になるまでの時間の計測用のタイマーの役割を持つ変数と、その値の目標値となる変数を、それぞれ float 型で宣言します。

 Image コンポーネントの持つ FillAmount プロパティの操作を行いたいので、Image 型の変数を用意して Image コンポーネントの情報を紐づけ出来るようにします。
SerializeField属性をつけて変数を宣言しておくことで、インスペクターより Imege コンポーネントのアタッチされているゲームオブジェクトをアサインして登録します。


 メソッドの追加はありませんが、Update メソッドに姿勢変更ゲージのチャージ処理を追加します。
キャラの現在の姿勢の状態に応じて、チャージ用のタイマーの数値を制御します。

 キャラが直滑降の状態ならば、チャージ時間を加算し、ゲージもそれに合わせて上昇していくようにします。

 キャラが伏せの状態ならば、チャージ時間を減算し、ゲージもそれに合わせて下降していくようにします。

 ボタンの制御はまだありませんので、ここでは、ボタンを押すたびにキャラの姿勢の変化に合わせてゲージが増減するかを確認します。

 ゲージの増減はそのまま値を操作するのでなく、DOTween の機能を利用して、アニメさせながら増減するように演出しています。


PlayerController.cs

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



 スクリプトの修正が終了したら、Penguin ゲームオブジェクトのインスペクターから PlayerController スクリプトを確認します。
新しく追加した imgGauge 変数の表示が追加されていれば問題ありません。


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



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


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

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

 例えば、 attitudeTimer が 1.0f 、chargeTime が 2.0f である場合、計算結果は 0.5f になります。
この値を FillAmount の値として利用しています。

 どちらも変数で計算を行っているのは、双方の値が動的に変化しても対応できるようにするためです。

  // ゲージ表示を更新
  imgGauge.DOFillAmount(attitudeTimer / chargeTime, 0.1f);


4.Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報に Image コンポーネントがアタッチされているゲームオブジェクトをアサインして登録する


 FillAmount の値を操作したいので、Image コンポーネントがアタッチされているゲームオブジェクトをヒエラルキーからドラッグアンドドロップしてアサインします。
手順については割愛しますので、対象となるゲームオブジェクトをアサインして登録してください。


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


 以上で完成です。


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


 ゲームを実行し、まずは姿勢変更用のゲージが上昇するかを確認します。
上昇するための条件をしっかりと確認しておいてください。

 ボタンを押して姿勢を変更すると、今度はゲージが減少するか確認します。


<実行動画 ゲージが満タンになり、ボタンを押すとゲージが減少する>
https://gyazo.com/fc357b851296be2c4847d66065590ebd


 今はまだゲージとボタンとを連動して制御していないので、どのタイミングでもボタンが押せます。
何回か押してみて、その都度ゲージが反応するかを確認します。


<実行動画 ボタンを押して姿勢が変更になるたびに増減が切り替わる>
https://gyazo.com/0feaa3eb8ab61a0089a4e8dfe20b967e


 どちらも上限値と下限値を制御していますので、それ以上の値になっていないか確認します。
確認方法としては、まずはゲージを最大値まで溜めた状態でしばらく経ってからボタンで姿勢を変更します。
このとき、上限値が制限されていればすぐにゲージが減少します。しかし、制限されていない場合には
しばらく経ってからゲームの減少が始まります。どうしてそのようになるのか、理由について考えてみてください。

 下限値も同じです。ゲージがない状態でしばらく経ってからボタンを押して姿勢を変更してください。
すぐにゲージの上昇が始まれば下限値は制御されていますが、しばらく経たないと上昇が始まらない場合には制御出来ていません。


<検証動画 上限値>
https://gyazo.com/9c705928b54cc194f36c5db99c21a105


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

 => 次は 手順18 ー姿勢変更ボタンと姿勢変更ゲージを同期ー です。 

 ゲージとボタンとを制御し、ゲージが満タンにならないとボタンを押せない処理を実装します。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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