Unityに関連する記事です

 引き続きまして、UI(ユーザーインターフェース)について学習しながら実装を行います。
この手順ではゲーム画面にゲーム時間を表示し、時間の経過に合わせて画面の時間表示を更新する処理を実装します。


<完成画像>



<実装動画>
https://gyazo.com/a24db0fbdf674781f345ba8289805c8a


手順20 −ゲーム時間の表示制御−
35.Canvas内にUI部品を作成する(ゲーム時間表示)
36.画面に現在のゲーム時間を更新表示する



新しく学習する内容


 ・自分でスクリプトの処理を考えて実装に挑戦する


35.Canvas内にUI部品を作成する(ゲーム時間表示)


1.設計


 現在のゲーム内にはゲーム時間が備わっていない状態ですので、まずはこちらを用意します。

 新しく GameManager スクリプトを作成して、その中でゲーム時間を管理する変数を宣言して運用します。
こちらの情報をゲーム画面に表示して、時間の経過に合わせてゲーム時間を更新し、画面の時間表示も更新していく処理を実装します。

 必要な情報としてはゲーム時間の値の変数ですが、スコアのときとおなじで、ゲーム時間の値をゲーム画面に反映するためのゲームオブジェクトも必要になります。

 スコアを表示する際にも利用したUIをここでも利用しましょう。
Canvas というコンポーネントを持つゲームオブジェクトの中に(子オブジェクトとして)
ゲームオブジェクトを設置することで、ゲーム画面の一定の位置に常に情報を表示する機能を実装出来ます。

 制御の内容としては、ゲーム画面上に常時ゲーム時間の数字の表示を行い、時間の経過に合わせてこの数字を更新するようにします。
この数字を配置する位置は任意です。自分がユーザーであることを考えて、見やすい位置を考えてみてください。ここでは右上に配置しています。





 最初にゲーム時間の値の表示を行うためのゲームオブジェクトの作成を行います。
それから、GameManager スクリプトを作成して、ゲーム時間の変数の情報を、ゲーム時間の値表示用のゲームオブジェクトに対して送り出す制御を実装します。


ヒエラルキー画像 完成図



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


 ヒエラルキーの構成の画像をみていただくと分かりますが、スコアの表示を作成した場合と同じ方法で順番に作成していきます。

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

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


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




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


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



Times ゲームオブジェクト Sceneビュー画像(Sceneビューの真ん中にある)




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


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



Times ゲームオブジェクト アンカー設定後のSceneビュー画像(右上にある)



 以上でこのゲームオブジェクトの設定は完了です。


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


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


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



 imgBackground ゲームオブジェクトは、ゲーム時間の値の表示の背景画像の役割を持ちます。


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



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




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

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

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

フォルダ画像



インスペクター画像


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



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


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



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



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



 以上で設定は完了です。つづいて、この imgBackground ゲームオブジェクトに子オブジェクトを2つ追加していきます。


6.imgBackground ゲームオブジェクトの子オブジェクトとして、lblTime ゲームオブジェクトを作成する


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


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




 lblTime ゲームオブジェクトは、画面上に "残り時間" という意味の文字列を常に表示する、ラベルの役割を持ちます。
このゲームオブジェクトではゲーム時間の更新は行いません。

 ここでは文字列で表現していますが、残り時間が分かるような画像を利用しても構いません。(時計の画像、残り時間と書いてある画像、など)
UIの目的はユーザーに情報を伝えることですので、伝えるための手段(文字/画像)はどのようなものであっても問題ありません。
その場合には、Text ではなく、Image を作成して利用してください。



 lblTime ゲームオブジェクトを選択し、Textコンポーネント の Text プロパティ欄に、"残り時間"、あるいは "Time" のようにゲーム時間とわかる文字列と入力してください
ラベル役のゲームオブジェクトですので、この文字列(あるいは画像)を常に画面に表示します。フォントの種類やサイズは適宜に調整してください。
文字の位置は中央位置・左上寄せに設定しています


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



 続いて、RectTransform コンポーネントを確認します。
Sceneビューと RectTransform の Position の値を調整して、適宜な位置に設置してください。
Gameビューで実際にどのように画面に映るか確認することも必要です

 次の手順でゲーム時間の値を表示するゲームオブジェクトを作成し、このゲームオブジェクトの上下左右いずれかの位置に設置します。
それをイメージしながら配置を行ってください。ここでは、このゲームオブジェクトの下にゲーム時間の表示を設置する想定で配置しています。


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



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



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



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



 以上でこのゲームオブジェクトの設計は完了です。


7.imgBackground ゲームオブジェクトの子オブジェクトとして、txtTime ゲームオブジェクトを作成する


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

 txtTime ゲームオブジェクトは、画面上にゲーム時間の値を表示する役割を持ちます。
このゲームオブジェクトの Text コンポーネントの機能を利用して、画面上にゲーム時間の値を表示・更新していきます。


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




 txtTime ゲームオブジェクトを選択し、Textコンポーネント の Text プロパティ欄に 0 と入力してください
ここにはゲーム中にスクリプトを利用して、動的にゲーム時間の値が表示されます。

 フォントのサイズは目立つように、lblTime ゲームオブジェクトの Text コンポーネント より少し大きめがいいでしょう。
フォントも同様に、lblTime と同じく適宜なフォントを選択してください。同じである必要はありません。
ゲーム時間の表示として、数字が3桁位まで並ぶ可能性がありますので、それを想定して並ぶかどうが、大きさも調整してください。
文字の位置は中央寄せ・中央寄せに設定しています

 こちらもRaycastTarget のチェックも外してください


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




 続いて、RectTransform コンポーネントを確認します。
Sceneビューと RectTransform の Position の値を調整して、適宜な位置に設置してください。
Gameビューで実際にどのように画面に映るか確認することも必要です。下記の画像も参考してください。
lblTime ゲームオブジェクトと合わせてバランスを取って位置を調整しましょう


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



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



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



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



 以上の手順でゲーム時間の表示用のゲームオブジェクト群は完成です。


36.画面に現在のゲーム時間を更新表示する

1.設計


 設計内容としては、前回の手順と同じ流れになります。

 画面に時間表示用のゲームオブジェクトを配置したので、そちらを制御するための処理を作成し、
適切なタイミングで画面の表示を更新する処理と紐づけるようにします。

 処理を記述するスクリプトも前回の手順と同じ流れになりますので、考えて実装に挑戦してみてください。


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


 今回のゲーム時間の表示もUI関連の処理ですので、UIManager スクリプトに変数やメソッドを用意して処理を担当させます。
もしも処理のイメージとしてロジックが浮かんでいるのであれば、上記の設計を参考に、まずは自分で処理を書いてみましょう。


UIManager.cs

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


 スクリプトを修正したらセーブを行い、UIManager スクリプトがアタッチされている UIManager ゲームオブジェクトのインスペクターを確認します。
新しく SerializeField属性で宣言した txtTime 変数が表示されていれば問題ありません。


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



3.UIManager ゲームオブジェクトにアタッチされている UIManager スクリプトの設定を行う


 新しくインスペクターに追加されたアサイン情報を登録しましょう。
インスペクターの読み方を参考にして、どの情報が必要かを考えてアサインしてください。


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


 以上で設定は完了です。


4.GameManager スクリプトを作成する


 GameManager スクリプトを新しく作成し、ゲーム時間の管理を行うようにします。

 ゲーム時間の管理とは、初期値の設定の他、ゲーム内の時間経過の処理、および、それをゲーム時間に反映していく処理がそれに当たります。
ゲーム時間が更新されるたびに、UIManager スクリプトに用意した UpdateDisplayGameTime メソッドを呼び出して、ゲーム画面のゲーム時間の表示を更新させます。

 手順的にはスコアの更新と同じような流れになっています。まずは自分なりに考えたスクリプトを書いてみましょう。


GameManager.cs

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


 スクリプトを作成したらセーブしてください。


5.GameManager ゲームオブジェクトを作成し、GameManager スクリプトをアタッチして設定を行う


 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択します。
新しい空のゲームオブジェクトが作成されますので、名前を GameManager に変更します。


ヒエラルキー画像




 作成した GameManager スクリプトをドラッグアンドドロップして GameManager ゲームオブジェクトにアタッチしてください。
アタッチ後は必ず、ゲームオブジェクトを確認して、スクリプトがアタッチされているかを確認してください。


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



 SerializeField属性で宣言している変数が表示されていますので、このスクリプトから操作を行いたいゲームオブジェクトをこちらにドラッグアンドドロップしてアサインします。
どのゲームオブジェクトにアタッチされているコンポーネントを操作したいのか考えて、ドラッグアンドドロップして情報を登録してください。

 public 修飾子で宣言した変数も表示されています。こちらがゲーム時間になりますので、最初は 60 に設定し調整をしていきましょう。
これは秒数になりますので、60 秒ということになります。


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



 以上でこのゲームオブジェクトの設定は完了です。


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


 すべての設定が完了しましたので、ゲームを実行してみてください。
ゲーム開始前に 0 と表示されていたゲーム時間の表示が、GameManager スクリプトに設定した gameTime 変数の値に変更されて、1秒ずつ減少して表示が更新されていれば制御成功です。


<完成画像>



<実行動画>
https://gyazo.com/a24db0fbdf674781f345ba8289805c8a


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

 次は 手順21 −霜のエフェクトの実装− です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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