Unityに関連する記事です

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

手順19 ースコアを実装ー
37.Canvas内にUI部品を作成するぁ淵好灰表示部分)
38.GameDataスクリプトを修正する(スコアを登録して管理できるようにする)
39.UI管理を行うUIManagerスクリプトを修正する(スコア表示の更新)
40.BattleManagerスクリプトを修正する◆淵好灰△魏短擦垢觸萢を追加する)
41.EnemyBallスクリプトを修正して、Moneyを設定する



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




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

設計


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

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

 なおスコアは Money という用語で扱います。

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


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

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


ヒエラルキー画像



 MoneyPlace ゲームオブジェクトのインスペクターを確認し、 Position Y 軸の位置を調整します。
画像設定後にも、適宜調整をして見やすい位置になるように修正してください。


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



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



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

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


ヒエラルキー画像



 Image コンポーネントを確認して、Source Image プロパティに任意の画像を設定します。素材は無料素材を探してUnityにインポートして利用してください。
Moneyというコンセプトですのでコインやお金を表すような画像を設定してください。

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


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



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



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

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


ヒエラルキー画像



 Text コンポーネント内の Raycast Target のスイッチをオフにしてください。
また Text 欄ですが、文字の大きさを調整し、数字が5桁位まで並ぶ程度の大きさを用意してください。
調整が終わったら 0 と入力しておいてください。

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

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


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



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



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



 以上でスコア表示用のUIの追加は終了です。


38.GameDataスクリプトを修正する(スコアを登録して管理できるようにする)

設計


 MoneyについてはGameDataクラスとBattleManagerクラスに登録し、それぞれが別の役割を果たすように設計にします。

 GameDataクラスには、totalMoney 変数を用意し、いままで獲得したMoneyの総数を管理させます。
 
 BattleManagerクラスには、money 変数を用意し、1回のゲームプレイで獲得したMoneyを管理させます。

 流れとしましては、ゲーム中の獲得したMoneyは一時的にBattleManagerクラスの money 変数にて管理を行います。
ゲームをクリアできるかわからないため、すぐには totalMoney 変数には加算しないようにします。

 そしてゲームをクリアしてはじめて、この money変数をプレイヤーが獲得し、totalMoney 変数に加算するようにします。


GameDataスクリプトを修正する


 Moneyの総数を管理できるように、totalMoney 変数を1つ追加します。
また、ゲームクリア時に今回のゲームプレイで獲得した Money を加算するためのメソッドを1つ用意します。


GameData.cs

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



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


 GameDataスクリプトの修正が終了したら、GameDataゲームオブジェクトを選択してインスペクターを確認します。
新しく作成した totalMoney 変数のアサイン情報が表示されます。
こちらはステージクリア時にクリア報酬として加算されますので、最初は 0 のままで問題ありません。


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



39.UI管理を行うUIManagerスクリプトを修正する(スコア表示の更新)

設計


 Moneyの表示を更新する処理をUIManagerに行わせます。
Moneyの数字表示の更新を行うためのメソッドを用意して、Moneyが加算されるたびにこのメソッド呼び出すようにし、Moeny表示の更新を行うよう設計します。


UIManagerスクリプトを修正する


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

 新しくUpdateDisplayMoneyメソッドを用意し、このメソッド内で画面のMoney表示の更新を行います。


UIManager.cs



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


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

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



40.BattleManagerスクリプトを修正する◆淵好灰△魏短擦垢觸萢を追加する)

設計


 ゲーム中のMoneyを管理(加算)する機能と、ゲームクリア時にGameDataクラスにある totalMoney に獲得した Money を加算する処理を呼び出すようにします。
前にも記述しましたが、このBattleManagerクラスが一時的な管理を、GameDataクラスがMoneyの総数を管理する設計になっています。


BattleManagerスクリプトを修正する


 Money管理用に新しく変数を1つ用意します。またStartメソッド、Initializeメソッド、CheckRemainingEnemiesメソッドを修正し、Money関連の処理を追記します。

 AddMoneyメソッドを新しく追加して、このメソッドの引数に渡ってきた値を money に加算していきます。今回は敵が破壊された時にこのメソッドを呼び出すことで
敵の持つ Money 分だけ加算するようにしています。
 またこのメソッド内で UIManagerのUpdateDisplayMoneyメソッドを呼び出すことでゲーム画面上のMoneyの表示を更新させます。


BattleManager.cs

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



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


 新しい変数は追加されましたが、private 修飾子ですのでインスペクターには追加情報はありません。


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



41.EnemyBallスクリプトを修正して、Moneyを設定する

設計


 Moneyの獲得方法として、敵が破壊された際に取得できるようにします。
そのためには、Moneyを設定するための変数を用意し、敵の持つMoneyの値を設定出来るようにします。
また破壊されたタイミングで、BattleManagerクラスにこの値を渡すことで、Moneyを獲得できるような設計にします。


EnemyBallスクリプトを修正する


 新しく Money用の money変数を public 修飾子で追加し、インスペクターから設定できるようします。
DestroyEmenyメソッドに処理を追加し、敵を破壊した際に money を BattleManagerクラスへ渡して加算する処理を行います。


EnemyBall.cs

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



EnemyBallゲームオブジェクトのプレファブを選択して、Moneyを設定する


 PrefabsフォルダにあるEnemyBallゲームオブジェクトを選択して、インスペクターの最上段にある Open Prefab を選択してください。

 編集が出来るようになりますので、EnemyBallスクリプトを確認し、新しく追加された Money 変数に値を設定します。任意の値で問題ありません。


EnemyBall 設定



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



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


 すべての手順が完了しましたので、ゲームを実行してみましょう。
敵を破壊した際にDebug.Logに加算値が表示され、画面のMoney表示も更新されれば成功です。


Debug.Log



検証動画 ‥┐鯒鵬するとMoney表示が加算されて更新
https://gyazo.com/824cb7e3fcee4ee23fafcb29e2d0e9ba


検証動画◆,垢戮討療┐鯒鵬するとクリアとなり、GameDataクラスのtotalMoneyの値にmoneyの値が加算される
https://gyazo.com/602efa4de0d20172e8e9422f423f3bf8


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

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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