Unityに関連する記事です

 この手順では獲得したコインのポイント数を画面上にスコアとして表示し、コインを獲得する度に表示を更新していく処理を実装します。


<完成画面 画面左上にスコア表示を実装>



<実装動画 コインを獲得するたびにスコアの表示値も更新される>
https://gyazo.com/95a7b3ca6cbe837d7bbd4ecf82eaac76


手順18 −スコア表示の作成−
31.Canvas内にUI部品を作成する 淵好灰表示)
32.スクリプトを使って、画面のスコア表示数と獲得したコインのポイント数を連動させる



 新しく学習する内容は以下になります。

・Canvas
・アンカー設定



31.Canvas内にUI部品を作成する 淵好灰表示)

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


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

ヒエラルキー画像



 Canvas ゲームオブジェクトを作成したら、必ず CanvasScaler コンポーネントの設定を行い、ゲーム画面の解像度との整合性を取るようにしてください
この設定を正しく行っていないと、今後 UI 用のゲームオブジェクトを作成して配置していく際に、正しい設定が行えなくなります。

 詳しくはこちらの教材内で解説しています。


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


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


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



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

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


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


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



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


<アンカー設定>


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

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


アンカーのアイコン

 

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


アンカーの設定

 

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

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


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


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


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

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


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



 lblScore ゲームオブジェクトを選択し、Textコンポーネント の Text プロパティ欄に、"SCORE : " と入力してください。
ラベル役のゲームオブジェクトですので、この文字列を常に画面に表示します。フォントのサイズは適宜に調整してください。

 フォントには slkscrb フォントを選択してください。これは最初にインポートしたアセットに含まれているフォントです。
 
 RaycastTarget のチェックを外しておいてください。このスイッチの意味は自分で調べてみましょう。


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



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


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



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



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



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


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

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


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




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

 フォントのサイズは、lblScore ゲームオブジェクトの Text コンポーネント と同じ大きさがいいでしょう。
フォントも同様に、slkscrb フォントを選択してください。RaycastTarget のチェックも外してください。


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



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


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



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



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



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


Gameビュー 完成画像



32.スクリプトを使って、画面のスコア表示数と獲得したコインのポイント数を連動させる

設計


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

 スコア表示は Text コンポーネントによって制御されていますので、新しく UIManager スクリプトを作成して、この Text コンポーネントに対しての紐づけを行います。
スコア更新用のメソッドを作成して、このメソッドに現在のコインの獲得ポイントの値を渡すことで、スコアの表示を更新してもらうように設計します。

 コインを獲得する処理は PlayerController スクリプトに実装してありますので、この部分にさらに処理を追加して、
コインを獲得したら、UIManager スクリプトに用意したスコア更新用のメソッドに命令を出し、そしてスコアを更新していくロジックにします。


スコア表示までの処理の流れ
1.UIManager スクリプトを作成し、txtScore ゲームオブジェクトにアタッチされている Text コンポーネントを変数に代入して、操作できるようにしておく
2.UIManager スクリプトには、UpdateDisplayScore メソッドを用意し、引数でPlayerController の coinPoint の値を受け取れるようにしておく 
3.PlayerController スクリプトを修正し、OnTriggerEnter2D メソッドの処理の中に、UIManager スクリプトのUpdateDisplayScore メソッドを呼び出す命令を追加する
4.コインを獲得したら、OnTriggerEnter2D メソッドの処理によって、UIManager スクリプトの UpdateDisplayScore メソッドが呼び出されて、スコアが現在の coinPoint の値に更新される

 この手順を実装します。まずは、UIManager スクリプトの作成から行います。


UIManager スクリプトを作成する


 以下の流れを実装します。

1.UIManager スクリプトを作成し、txtScore ゲームオブジェクトにアタッチされている Text コンポーネントを変数に代入して、操作できるようにしておく
2.UIManager スクリプトには、UpdateDisplayScore メソッドを用意し、引数でPlayerController の coinPoint の値を受け取れるようにしておく 



 UI 表示更新を行ったりするための管理機能を持たせるクラスです。

 Text 型の変数を宣言し、Canvas 内にある Text コンポーネントの情報をアサインして登録出来るようにします。
この変数を通じてゲーム画面の表示の更新を行います。

 実際に更新を行うためには専用の UpdateDisplayScore メソッドを用意し、適切なタイミングで UpdateDisplayScore メソッドを実行することでスコアの表示更新を行います。ゲーム内の値と表示とを合わせています。

 この処理のポイントは、スコアの管理は PlayerController クラス内で行い、UpdateDisplayScore メソッドはそのスコアの情報を
PlayerController クラス側から引数を通じて受け取ることで、UIManager クラスでは直接管理していないスコアの情報を活用できるようにしている部分です。

 そのためこの UpdateDisplayScore メソッドは、UIManager クラス内に用意はしていますが、
実際に処理の実行命令を出すのは、スコアの情報を管理している PlayerController クラス側になります。
UpdateDisplayScore メソッドのアクセス修飾子が public になっているのもそのためです。


UIManager.cs



UIManager ゲームオブジェクトを作成して、UIManagerスクリプトをアタッチする


 ヒエラルキー上で右クリックをしてメニューを開き、Create Empty を選択して、作成されたゲームオブジェクトの名前を UIManager に変更します。
UIManager ゲームオブジェクトに、作成した UIManager スクリプトをドラッグアンドドロップしてアタッチします。


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



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



 UIManager ゲームオブジェクトを選択してインスペクターを確認します。
UIManager スクリプト内にアサイン情報が表示されますので設定します。

 txtScore 変数には、Textコンポーネントをアサインします。スコアの表示用のゲームオブジェクトとして、Canvas内に txtScore ゲームオブジェクトを作成したありますので
このゲームオブジェクトを選択して、ドラッグアンドドロップしてアサインします。これにより、txtScore ゲームオブジェクトにアタッチされている Text コンポーネントを扱えるようになりました。


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


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



 以上で設定は完了です。


PlayerController スクリプトを修正して、コインとの接触処理に、コインを獲得するたびにスコアを更新する処理を追加実装する


 宣言フィールドに UIManager スクリプトを扱うための変数を宣言します。
また、OnTriggerEnter2D メソッド内に、コインを獲得して coinPoint 変数の値が更新された後に
UIManager スクリプトに用意したスコア表示を更新する UpdateDisplayScore メソッドを呼び出してスコア表示を更新させます。

 UpdateDisplayScore メソッドの引数として coinPoint の値を渡すことにより、常に、最新のコインの獲得情報を UpdateDisplayScore メソッドに渡すことで
画面のスコア表示の値も coinPoint の値と連動して加算されていく処理が実装出来ます。


PlayerController.cs

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



Yuko_Player ゲームオブジェクトの PlayerController スクリプトの設定を行う


 PlayerController スクリプトの修正が終了したらセーブを行い、ヒエラルキーにある Yuko_Player ゲームオブジェクトを選択して
インスペクターから PlayerController スクリプトの確認を行います。


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


  
 新しく宣言した uiManager 変数へのアサインが表示されていますので、ヒエラルキーにある UIManager ゲームオブジェクトを選択して
ドラッグアンドドロップしてアサインしてください。これで UIManager ゲームオブジェクトにアタッチされている UIManager スクリプトの情報がアサインされます。


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


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



 以上で設定は完了です。


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

 
 ゲームを実行して、コインを獲得してみます。スコアの表示が 0 から PlayerController スクリプトの coinPoint の値に更新されれば成功です。
複数のコインを獲得したり、Coin スクリプトの point 変数を変更したりして、動作を試してみましょう。


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


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

 次は 手順19 ーゲームオーバー処理の実装ー です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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