Unityに関連する記事です

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

19.Canvas内にパズルゲーム用のUI部品を作成する(残り時間表示部分)
20.GameDataスクリプトを修正する◆〇弔蟷間を登録して管理できるようにする

21.UI管理を行うUIManagerスクリプトを修正する〇弔蟷間表示の更新)
22.GameManagerスクリプトを修正するΑ〇弔蟷間をカウントする処理を追加する



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

・ToString()メソッドの引数【21】
・TODOの使い方【22】



19.Canvas内にパズルゲーム用のUI部品を作成する(残り時間表示部分)


 ヒエラルキーにあるCanvasゲームオブジェクトの中に、新しくゲームオブジェクトを追加していきます。
これらはゲームの残り時間表示用の部品となります。この手順が終わった際には、下記の画像のような形になります。

ヒエラルキー 参考画像



TopUIゲームオブジェクトの子オブジェクトとして、Timesゲームオブジェクトを作成する


 TopUIゲームオブジェクトの上で右クリックを行い、UI => Image を選択し、ゲームオブジェクトを作成します。名前をTimesに変更します。
Timesゲームオブジェクトでは、残り時間表示部の背景画像を設定するとともに、この画像上に表示するText(残り時間の数字)を管理する役割を持たせます。

 Timeeゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。(細かい数字は適宜切り上げてください)

 つづいてImageコンポーネントのSourceImageに残り時間表示部分の背景となる画像を設定します。
ここでは無料画像を探してきてインポートして利用していますが、画像は自由に設定してください。
 合わせてImageコンポーネントにある Raycast Target のチェックを外します。

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


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



Timesゲームオブジェクトの子オブジェクトとして、TextBasePrefabを配置し、名前を txtTimer に変更する


 前回の手順で作成したTextBasePrefabをTimesゲームオブジェクトの子オブジェクトとして配置します。
TextBasePrefabをドラッグアンドドロップしてヒエラルキーのTimesゲームオブジェクトの子として配置してください。

 名前を txtTimer に変更します。これは残り時間表示の部分の数字表示の役割を持ちます。

 txtTimer ゲームオブジェクトのインスペクターを確認して、RectTransfromコンポーネント、あるいはSceneビューを利用して位置と大きさを調整します。
下記の画像を参考に、適宜な位置と大きさに調整をしてください。

 TextコンポーネントのText欄にはデバッグ用に適宜な数字を入れておきます(0,999など)。Outlineの設定なども数字を見ながら一緒に行いましょう。
これで常に画面上には残り時間の数字が表示されるようになりました。

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


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


Sceneビュー画像


  以上で残り時間表示に関連するUI部品の作成は終了です。


UIの確認


完成画像



20.GameDataスクリプトを修正する◆〇弔蟷間を登録して管理できるようにする


 GameDataスクリプトを修正して、残り時間の設定値(initTime)と現在の残り時間(gameTime)とを、それぞれ変数を用意して管理できるようにします。

 initTime変数は残り時間の設定値です。この値がゲーム内における残り時間の初期値になります。基準値は60(秒)です。任意の値にしてください。
このinitTime変数を使用するクラスはGameDataクラス内のみですのでprivate修飾子で宣言していますが、設定値をインスペクターで操作出来た方が
デバッグなどもしやすいため、SerializeField属性をつけて、インスペクターでの設定が行えるようにしています。

 gameTime変数は、ゲームが始まってからの実際の時間経過を測定する値です。初期値としてinitTime変数の値が与えられて、時間経過に合わせて減少させます。
この値を【19】で作成した txtTimer ゲームオブジェクトのTextコンポーネントに紐づけを行ってゲーム画面の残り時間を更新します。

この値はpublic 修飾子で宣言していますが、0のままにしておいてください。ゲームが開始されるとInitGameメソッドで設定されます。
ではなぜpublic修飾子なのかというと、GamanManagerクラス(GameDataではない外部のクラス)で使用するためです。

 それでは修正していきます。

GameData.cs

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




 GameDataスクリプトの修正が終了しましたら、GameDataゲームオブジェクトを選択してインスペクターを確認します。
InitTime変数には 60 、GameTime変数には 0 がはいっています。そのままで問題ありませんので、アサイン情報が表示されているかを確認しておきます。
もしもInitTime変数の値が 0 になっている場合には 60 を入力してください。

インスペクター画像



21.UI管理を行うUIManagerスクリプトを修正する〇弔蟷間表示の更新)


 UIManagerスクリプトの修正を行い、残り時間の値を画面表示できるように処理を追加します。
GamanManagerスクリプトから現在の残り時間をメソッドの引数として受け取り、それをTextコンポーネントを利用して画面の残り時間表示を更新します。

 それでは修正していきます。

UIManager.cs

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




 UIManagerスクリプトの修正が終了したら、UIManagerゲームオブジェクトを選択してインスペクターを確認します。
新しく追加したtxtTimer変数へのアサインが表示されますので、こちらにCanvas内にあるtxtTimerゲームオブジェクトをドラッグアンドドロップしてアサインします。

アサイン画像

<ToString()メソッドの引数>


 新しく追加したUpdateDisplayGameTimeメソッドでは引数としてfloat型で残り時間の値を time変数として受け取ります。
このとき画面表示には小数点を表示したくありませんので、ToStringメソッドの引数を利用して表示する値を整数のみにします。

 txtTimer.text = time.ToString("F0");

 ToString()メソッドの引数に "F0" が指定されています。このメソッドは引数に指定した文字列によって表示方法を変化させることができます。
今回の F0 では、小数点を表示しないでint型をstring型にする処理を行っています。
F の後ろの数字が小数点の位を指定しており、F0 の場合には少数点なし、F1 の場合には小数点第1位まで表示、というように表示方法の指定が可能です。

 実際にいろいろな値にして小数点表示を試してみましょう。


22.GameManagerスクリプトを修正するΑ〇弔蟷間をカウントする処理を追加する


 GameMamagerスクリプトの修正を行い、Updateメソッド内に時間経過に合わせて残り時間を減少させる処理を追加します。
また、UIManagerのUpdateDisplayTimeメソッドを呼び出して、画面の残り時間の更新を行わせます。

 処理の流れは、次のようになります。

1.GamanManagerのUpdateメソッドでGameDataに用意したgameTime変数を減少させる
   ↓
2.UIManagerのUpdateDisplayTimeメソッドの中で残り時間を表示しているTextコンポーネントに対して処理を行い、画面表示をGameDataのgameTime変数の値に更新する
   ↓
3.GameDataのgameTime変数の値が0になるまで、1と2を繰り返す。

 まずは教材を見る前に、自分で処理を考えて書いてみて動かしてみてください。



GameManager.cs

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



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


 ゲームを実行してみましょう。画面に残り時間がinitTime変数で指定した時間で表示され、時間経過によって残り時間表示が更新されて減少していけば正常に動作しています。
また残り時間の値は0以下にはならないようにしていますので、0で更新が止まるかも確認をします(デバッグの際にはinitTime変数を少ない数に減らしましょう)

 デバッグ用に残り時間が0になった際にはConsoleにゲーム終了のログが表示されるはずですので、そちらも合わせて確認をします。

 もしも処理がうまく動作しない場合には、どこに問題があるか切り分けて、順番に考えていきます。

 また時間の計測方法については、他にも色々な方法があります。
この方法だけに捕らわれずに、異なる方法の実装方法も検討してみてください。


<TODOの使い方>


 今回GamanManagerのUpdateではゲーム終了の処理がまだ未実装であるため、Debug.Logを利用して処理の流れのみを確認しています。
その上の行にはTODO機能を使用して、実装のし忘れを防止しています。

 詳しくはこちらの記事をご覧ください。

// TODO コメント



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

 次は 手順11 です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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