Unityに関連する記事です

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

手順18 ー残り時間を実装ー
33.Canvas内にUI部品を作成する(画面上部に残り時間表示)
34.GameDataスクリプトを修正する(残り時間を登録して管理できるようにする)
35.UIManagerスクリプトを修正する(残り時間表示の更新)
36.BattleManagerスクリプトを修正する(時間経過、敵の倒した数、出現数などを管理) 



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

・ImageコンポーネントのImageTypeの設定を Filled に変更して利用する
・DoTween DOFillAmountメソッド



33.Canvas内にUI部品を作成する(画面上部に残り時間表示)

設計


 Canvas内に作成してあるTop_UI ゲームオブジェクトの子オブジェクトとして、時間の表示を行うためのゲームオブジェクトを追加していきます。

 用意するのは、フォルダ用のゲームオブジェクトと、その子オブジェクトに時計表示用のText、Imageコンポーネントを持つゲームオブジェクトです。
このコンポーネントを UIManagerスクリプトを修正して操作出来るようにし、ゲーム内の時間と表示とを同期させて表示します。

 順番に作成していきます。


Top_UI ゲームオブジェクトの子オブジェクトとして ClockPlace ゲームオブジェクトを作成する

 ヒエラルキーの Top_UI ゲームオブジェクトの上で右クリックをしてメニューを表示し、Create Empty を選択します。
名前を ClockPlace に変更します。このゲームオブジェクトはこれから作成する時間表示用のゲームオブジェクトのフォルダとしての役割を持ちます。
作成後、ヒエラルキーを確認して、Canvas内での位置を確認してください。
下記の画像のような親子関係になっていれば大丈夫です。なっていない場合には再度作成してください。


ヒエラルキー画像



 ClockPlace ゲームオブジェクトのインスペクターを確認し、RectTransform コンポーネントにある Anchor の設定を画像のように Top - Center に変更します。
その上で Position Y 軸の位置を調整します。画像設定後も、適宜調整をして見やすい位置になるように修正してください。


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



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



ClockPlace ゲームオブジェクトの子オブジェクトとして imgTimeGauge ゲームオブジェクトを作成する

 ClockPlace ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択し、名前を imgTimeGauge に変更してください。
作成後、ヒエラルキーを確認して、Canvas内での位置を確認してください。下記の画像のような親子関係になっていれば大丈夫です。
なっていない場合には再度作成してください。


ヒエラルキー画像


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


 imgTimeGauge ゲームオブジェクトを選択してインスペクターを確認します。

 最初にImageコンポーネントのSourceImageに画像を設定します。画像については、丸い形状の画像をネットで探してUnityにインポートして利用してください。
ここでは真ん中が透明な丸いフレームの画像を使用しています。


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



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


ImageTypeの設定



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

 Fill Method はゲージの増減する方向、Fill Origin は Fill Amount が 0 の際の画像の起点の位置です。
今回は360方向に画像の操作を行い、起点位置を上から、時計周りに位置にするように設定しています。他にも色々な設定がありますので、調べてみてください。

 忘れずにRaycastTargetのスイッチを切っておきます。

Unity公式スクリプトAPI
ImageType
https://docs.unity3d.com/2019.1/Documentation/Scri...
TECH Projin様
【Unity uGUI】Imageコンポーネントを徹底解説
https://tech.pjin.jp/blog/2017/01/26/unity_ugui_im...


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


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


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

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


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



ClockPlace ゲームオブジェクトの子オブジェクトとして txtBattleTime ゲームオブジェクトを作成する

 ClockPlace ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択し、名前を txtBattleTime に変更してください。
作成後、ヒエラルキーを確認して、Canvas内での位置を確認してください。下記の画像のような親子関係になっていれば大丈夫です。
なっていない場合には再度作成してください。


ヒエラルキー画像



 Text コンポーネント内の Raycast Target のスイッチをオフにしてください。
また Text 欄ですが、文字の大きさを調整し終わったら空白にしておいてください。

 RectTransformコンポーネントも、文字の大きさと imgTimeGauge ゲームオブジェクトで設定した画像の大きさに合わせて適宜な大きさに調整してください。


Sceneビュー 完成画像



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


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



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



 以上で時間表示用のUIの追加は終了です。


34.GameDataスクリプトを修正する(残り時間を登録して管理できるようにする)

設計


 バトル時間についてはGameDataに登録し、それを他のクラスが参照して利用するという設計にします。
そのため、バトル時間を設定するための変数を1つ用意します。


GameDataスクリプトを修正する


 バトルの時間をインスペクターから設定できるように、変数を1つ追加します。


GameData.cs

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



GameDataゲームオブジェクトを設定する


 GameDataスクリプトの修正が終了したら、GameDataゲームオブジェクトを選択してインスペクターを確認します。
新しく作成した BattleTime 変数のアサイン情報が表示されてます。


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


 
 BattleTime 変数を 0 => 60 に変更してください。これが1回辺りのゲームのプレイ時間です。
ゲーム内ではこの値を秒で管理しますので、この設定ですと60秒になります。


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



35.UIManagerスクリプトを修正する(残り時間表示の更新)

設計


 UIManagerはUIの情報を扱う管理クラスです。今回の時間表示はUIですので、この時間表示を行う役割を担います。
時間の数字表示と時間ゲージの更新を一緒に行うためのメソッドを用意して、時間の経過に合わせて呼び出すようにし、逐次更新を行うよう設計します。


UIManagerスクリプトを修正する


 新しく変数を2つ用意し、先ほどCanvasに作成した、バトル時間の表示を行う Text コンポーネントを持つ txtBattleTime ゲームオブジェクトと
バトル時間をゲージにして表示する imgTimeGauge ゲームオブジェクトの情報をアサインして、これらを紐づけし、スクリプトから利用出来るようにします。

 その上で、新しくUpdateDisplayBattleTimeメソッドを用意し、バトル時間の表示の更新と、バトル時間の周囲に表示されている時間ゲージの更新を行います。
時間ゲージの更新にはDoTweenの持つDOFillAmountメソッドを利用することで、徐々にアニメさせながら減少させるように演出を行います。


UIManager.cs



<DoTween DOFillAmountメソッド>


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

 FillAmountの値を第1引数で指定した値まで、第2引数で指定した時間をかけて変更します。


  // 時間ゲージをアニメさせながら減少
  imgTimeGauge.DOFillAmount(value, 1.0f).SetEase(Ease.Linear);


UIManagerゲームオブジェクトを設定する


 UIManagerスクリプトの修正が終了したら、UIManagerゲームオブジェクトを選択してインスペクターを確認し、アサイン情報を設定します。
新しく追加した2つの変数の情報が表示されていますので、同名のゲームオブジェクトをヒエラルキーからドラッグアンドドロップしてアサインしてください。

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



アサイン手順動画
https://gyazo.com/6683e2e461fb953a4a71cc115b8d9bde


UIManagerゲームオブジェクト アサイン後のインスペクター画像



36.BattleManagerスクリプトを修正する 

設計


 ゲーム内の時間の経過管理を行う機能を追加します。時間の経過を管理する中でUIManagerへと命令を出し、ゲーム画面の時間の表示を更新してもらうように設計します。


BattleManagerスクリプトを修正する


 時間管理用に新しく変数を2つ用意します。またStartメソッドとInitializeメソッドを修正し、時間表示についての処理を追記します。

 Updateメソッドを新しく追加して、ゲーム内の時間の経過を測るとともに、1秒経過するごとにUIManagerのUpdateDisplayBattleTimeメソッドを呼び出すことで
ゲーム画面上の時間の表示を更新させます。


BattleManager.cs

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



BattleManagerゲームオブジェクトを確認する


 アサイン情報が追加されていますので確認します。
この値はゲーム実行時にStartメソッド内で代入されますので、インスペクターでは 0 のままで問題ありません。


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



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


 すべての手順が完了しましたので、ゲームを実行してみましょう。
ゲームと同時に画面上部にバトル時間が表示されて、時間の経過に合わせて減少していけば成功です。一緒に時間ゲージも減少していくか確認してください。

検証動画 .押璽犲孫圓汎瓜にバトル時間が表示されて、時間経過とともに減少する
https://gyazo.com/693e2875d1b102590ced4ba8c500027a


検証動画◆.丱肇觧間の経過に合わせて時間のゲージが減少していく
https://gyazo.com/a8daf49ea9e4da11d221c8c046e57b3f


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

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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