Unityに関連する記事です

 ここからはUI(ユーザーインターフェース)について学習しながら実装を行います。
ゲーム画面に獲得した得点をスコアとして表示する制御処理を実装します。


<完成画像>



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


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

手順12 −スコアの表示制御−
19.Canvas内にUI部品を作成する(スコア表示)
20.画面に現在の得点をスコアとして更新表示する



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

 ・アンカー設定



19.Canvas内にUI部品を作成する(スコア表示)

1.設計


 ゲーム画面のUI(ユーザーインターフェース)については別の記事に詳しくまとめてありますので、そちらをご確認ください。

 => 画面UI

 この手順からは順番に、ゲーム内に実装されている処理をゲーム画面上に表示・更新する処理を実装していきます。

 前回の手順で PlayerController スクリプトには score 変数が追加されました。
こちらの情報をゲーム画面に表示して、花輪をくぐるたびに得点がアップしていく表示を実装します

 必要な情報としては score 変数ですが、こちらをゲーム画面に反映するためのゲームオブジェクトも必要になります

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

 今回はゲーム画面の左上に常時スコアの数字の表示を行い、花輪をくぐって得点を獲得したときに、スコアの数字を更新するようにします。

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


ヒエラルキー画像 完成図



Gameビュー画像 完成図



2.Canvas ゲームオブジェクトを作成する


 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択します
ヒエラルキーに Canvas ゲームオブジェクトが作成されます。
一緒に EventSystem ゲームオブジェクトも追加されます。これは1セットで扱いますのでそのままで問題ありません。


ヒエラルキー画像



 Canvas ゲームオブジェクトをダブルクリックしてください。
いままで作業を行っていた Scene ビューの上の方に Canvas 用の場所が追加されています。
これはゲーム画面に Canvas が表示されてしまうと、双方の編集作業が大変になるための措置です。

 Canvas では設定した情報は、ゲーム画面に一緒に表示されるようになります
そのため、作業のスペースを分けているだけであって、同じゲームの画面として表示されますので問題ありません


<検証動画 作業スペースとして分けているだけ>
https://gyazo.com/628ac8732a55aa22a8be4878c3f0017f



 Canvas ゲームオブジェクトのインスペクターを確認し、Canvas Scaler の UIScaleMode の設定を Scale With Screen Size に変更します。
変更すると Reference Resolusion という設定が追加されますので、こちらに、Game ビューで使用している解像度と同じ大きさを指定します。
今回の教材では 2880 * 1440 の解像度で設定していますので、こちらも同じ数字に指定します。これは、ご自分の設定した解像度と同じにしてください。

 また ScreenMathcModeExpand に変更しておきます。
この設定にしておくことで Canvas の設定を水平・垂直に拡大してくれますので、スマホの解像度とCanvasのサイズに合わせてくれます。


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



Gameビューの解像度



Sceneビュー画像



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


参考サイト
Metal Brage 様
画面解像度とスケーリング
http://www.metalbrage.com/UnityTutorials/uGUI/Scal...


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


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


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



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


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



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




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


<手順動画 アンカーの設定(Altキーを押しながらクリックすることで、アンカーの設定とゲームオブジェクトの移動が一緒に行われる)>
https://gyazo.com/ff88a572f71577445906e09ecbbd7511


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



Sceneビュー画像



 以上で設定は完了です。


4.<アンカー設定>


 Canvas用のゲームオブジェクトの位置情報は RectTransform コンポーネントによって管理されています。
RectTransform コンポーネントを持つゲームオブジェクトは、ワールド座標による座標の計算ではなく、
親となるゲームオブジェクトからみてどの位置にいるかというローカル座標(相対座標)による座標の計算を行っています

 この RectTransform コンポーネントには通常の Transform コンポーネントにはない情報がいくつかあります。
その1つがアンカーです。


アンカーのアイコン

 

 アンカーとは、親のゲームオブジェクトからみて、このゲームオブジェクトの基準地点をどの位置に設定するか、という情報です。
ローカル座標によって座標を計算していますので、親のゲームオブジェクトからみて、どこから計算を始めるかというのは重要な設定情報です。
基本的には Center Middle という設定になっており、親のゲームオブジェクトからみて中心の位置をアンカーに設定しています。


アンカーの設定

 

 今回、Scores ゲームオブジェクトに設定したアンカーは、Top Left の位置です。(これはプリセット情報なので、もっと詳細に自分でも設定できます。)
親オブジェクトである Canvas ゲームオブジェクトからみて、画面の中心を基準値としてではなく、画面の左上を基準として座標の計算を行うようにしています。
 
 理由としては、ゲーム画面の比率が変化した際に、RectTransform コンポーネントを持つゲームオブジェクトは、アンカーの位置を基準に配置されるため
画面の比率が変化しても、その状態に対応して、自分の位置を設定してくれるようになるためです

 例えば今回のように左上にアンカーを設定しておくと、どのゲーム画面でゲームを実行しても、常に画面の左上からみて座標の計算をして、ゲームオブジェクトを配置してくれます
そうすることによって、ゲーム画面を変えたらスコア表示が見えなくなってしまった、という事態を回避出来るようにしています。


参考サイト
Unity公式ユーザーマニュアル
基本的なレイアウト
https://docs.unity3d.com/ja/2018.4/Manual/UIBasicL...
徒然エンジニアブログ様
【Unity】UIの基本(Canvas,描画順,アンカー,ピボット)を徹底解説してみる
https://turedureengineer.hatenablog.com/entry/2019...


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


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


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



 imgBackground ゲームオブジェクトは、スコアの数字表示の背景画像表示の役割を持ちます。


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


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




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

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

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

フォルダ画像


 画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください。このスイッチの意味は自分で調べてみましょう。



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


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



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



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


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


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

 lblScore ゲームオブジェクトは、画面上に pts という文字列を常に表示する、ラベルの役割を持ちます。
このゲームオブジェクトではスコアの更新は行いません


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



 lblScore ゲームオブジェクトを選択し、Textコンポーネント の Text プロパティ欄に、"pts" と入力してください。
ラベル役のゲームオブジェクトですので、この文字列を常に画面に表示します。フォントの種類やサイズは適宜に調整してください。
位置は中央・中央寄せに設定しています。
 また、Raycast Target のチェックを外してオフの状態にしておいてください。


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



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


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



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



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



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


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


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

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


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



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

 フォントのサイズは点数が目立つように、lblScore ゲームオブジェクトの Text コンポーネント より少し大きめがいいでしょう。
フォントも同様に、lblScore と同じフォントを選択してください。文字の位置は中央・右寄せに設定しています
こちらもRaycastTarget のチェックも外してください


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



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


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



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



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



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



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


ヒエラルキー画像



Gameビュー 完成画像




20.画面に現在の得点をスコアとして更新表示する

1.設計


 Canvas ゲームオブジェクト内にスコア表示用のゲームオブジェクトを設置しましたので、次は、このスコアの表示を更新していく処理を実装していきます。

 スコアの点数表示は txtScore ゲームオブジェクトにアタッチされているText コンポーネントによって制御されています。
この Text コンポーネントに対しての紐づけを行い、命令を出すことでスコアの表示制御を行います。

 得点を獲得する処理は PlayerController スクリプトに実装してありますので、この部分にさらに処理を追加して、
花輪を通過して得点を獲得したら、txtScore ゲームオブジェクトの持つ Text コンポーネントの Text プロパティに命令を出して値を書き換えます。
それがゲーム画面に表示されるようになるため、ゲーム上は、花輪を通過するたびにスコアを更新していくように見えます。


<スコア表示までの処理の流れ>

1.PlayerController スクリプトを修正し、txtScore ゲームオブジェクトにアタッチされている Text コンポーネントを変数に代入して、操作できるようにしておく
2.同じくPlayerController スクリプトを修正し、OnTriggerEnter メソッドの処理の中に、txtScore ゲームオブジェクトにアタッチされている Text コンポーネントのプロパティを更新する命令を追加する
3.花輪を通過して得点を獲得したら、OnTriggerEnter メソッドの処理によってスコアが現在の score の値に更新される

 この手順でロジックを実装します。処理は順序だてて、順番に1つずつ追加していくことを考えましょう。


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


 宣言フィールドに、score 変数の値を表示させるためのコンポーネントの変数を追加します。
こちらは Text コンポーネントになりますので、宣言も Text 型になります。
Canvas 内に表示させるコンポーネントをスクリプトで扱う場合、using UnityEngine.UI の追加が必要になります。

 OnTriggerEnter メソッド内に、得点の加算処理のあとに、score 変数を画面に表示する処理を追加します。
得点の加算前に入れてしまうと、加算前の値が表示されてしまいますので、プログラムを記述する際には、処理の順番に気を付けてください。

 txtScore 変数は Text 型を扱うことができますので、Text コンポーネントの持っている Text プロパティ(文字列を入力する場所)に対しても命令を出すことが出来ます。
この機能を利用して、現在の得点である score 変数の値を表示するように制御をします。


PlayerController.cs

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

 

 スクリプトの修正が終了したら、インスペクターを確認して、新しく宣言した txtScore 変数が追加されているか確認しましょう。

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



3.Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報にアサインを行う


 スクリプトの修正が完了しましたら、Penguin ゲームオブジェクトのインスペクターを確認してください。
PlayerController スクリプトに新しく宣言した txtScore 変数が表示されています。

 ここに、まずは手順を見ずに自分で考えて、アサインするゲームオブジェクトを特定してアサインをしてみてください。


<手順動画 アサイン>
https://gyazo.com/c7599ed9dfee7a3c6fb1e80d3a71c435


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



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


 すべての処理の実装が収容しましたので、ゲームを実行して花輪をくぐってみましょう。
無事にスコアの表示が更新されれば、スクリプトによって制御が正常に行われています。


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


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

 => 次は 手順13 −キャラと水面までの距離を計測する処理の実装− です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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