Unityに関連する記事です

 この手順では、ゲーム画面に Exp 値の表示を作成します。
次の手順ではスクリプトを利用して、この値にゲーム内の値を反映して表示の更新制御を行う処理を実装します。


<実装画像 画面上部に Exp 表示>



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

発展5 −Exp の設定追加と Exp 表示用のゲームオブジェクトの作成−
 9.EnemyDataSO スクリプトを修正して、EnemyData クラスに Exp 用の変数を追加して、EnemyDataSO スクリプタブル・オブジェクトに設定する
10.Canvas内の TopUI ゲームオブジェクトの子オブジェクトとして、Exp の表示更新を行う ExpSet ゲームオブジェクト群を作成する



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

 ・スクリプタブル・オブジェクトに新しい情報を追加する



9.EnemyDataSO スクリプトを修正して、EnemyData クラスに Exp 用の変数を追加して、EnemyDataSO スクリプタブル・オブジェクトに設定する

1.設計


 スクリプタブル・オブジェクトに必要な情報を追加したい場合には、その元である EnemyDataSO スクリプトに修正を加えます。
そうすることよって、自動的に追加した変数の情報が EnemyDataSO スクリプタブル・オブジェクトにも反映されます。

 今回は次回以降の処理で扱うことになる Exp を値を設定できるように変数を追加します。


2.EnemyDataSO スクリプトを修正して、Exp の値を追加する


 EnemyDataSO スクリプトを修正して、exp 変数を追加します。
どのように利用するかを考えて型を設定しましょう。

また、インスペクターより設定したり、外部のスクリプトで利用することが前提ですので、
スクリプタブル・オブジェクトに設定する変数はすべて public 修飾子で宣言を行うようにしてください。


EnemyDataSO.cs

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


 スクリプトを作成したらセーブします。


3.EnemyDataSO スクリプタブル・オブジェクトの各エネミーのデータに Exp を設定する


 Datas フォルダにある EnemyDataSO スクリプタブル・オブジェクトを選択して、インスペクターを確認します。
新しく追加した exp 変数がすべての Element 内に追加されていますので、下記の画像を参考に設定を行ってください。
同じである必要なありませんが、今回はエネミーごとの差異が分かるように異なる値を設定することが大切です。


EnemyDataSO スクリプタブル・オブジェクト インスペクター画像


 
 以上で設定は完了です。
今後も変数の追加を行う際には、EnemyDataSO スクリプトに修正を加えて、その後、スクリプタブル・オブジェクトの設定を行うという流れになります。


10.Canvas内の TopUI ゲームオブジェクトの子オブジェクトとして、Exp の表示更新を行う ExpSet ゲームオブジェクト群を作成する

1.設計


 次の手順ではエネミーを破壊した際に、Exp の値を獲得できる処理を追加します。
そのため、Exp の値の表示制御を行うためのゲームオブジェクト群を作成しておきます。

 この手順では、Canvas ゲームオブジェクト内に獲得している Exp の値をユーザーに伝えるための情報として、数字の表示用のゲームオブジェクト群を製作していきます。
このゲームオブジェクトもゲーム画面に映る必要のあるゲームオブジェクトですので、 Canvas ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを作成していきます。

 今回用意するゲームオブジェクト分は UI と呼ばれるもので、常に固定した位置に表示して、ユーザーに情報を伝える役割を持ちます。
ここでは、フォルダ役の TopUI ゲームオブジェクト、Exp 関連の表示設定するゲームオブジェクト群を順番に作成します。


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


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

今後、Exp の表示だけではなく、他にも画面の上部に固定して表示する情報が増えることを想定し、このゲームオブジェクトをフォルダ役として用意します。


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



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

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


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



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



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


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


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


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



 このゲームオブジェクトの中に、Exp 用の数字を表示するゲームオブジェクトなどを作成して配置していきます。


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



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



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


4.TotalExpSet ゲームオブジェクトの子オブジェクトとして、txtTotalExp ゲームオブジェクトを作成して、設定を行う


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


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



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


 
 続いて設定を行います。サイズの変更と、文字の大きさなどを調節しましょう。



 サイズですが、横幅(Width)については、470 前後に設定します。数字が 4 桁位入るイメージです。
縦幅については 200 前後とし、ゲージのサイズよりも小さめに設定します。

 Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックを入れてオンの状態にしてください。


インスペクター画像



 次に Text コンポーネントの設定を行います。

 Text プロパティ欄に 0 と半角で入力してください。
この値はスクリプトより変更しますので、どのように表示されるのか、数字を入力して文字のサイズなどを設定します。

 フォントは自由に設定してください。Unity のフォントでもよいですし、無料のフォントをダウンロードしてインポートして利用してもいいです。
インポートする際には、Fonts フォルダを用意して、その中にドラッグアンドドロップしてインポートするようにしてください。
解凍されていないファイルはインポートできませんので、解凍してからインポートします。

 数字だけを扱うフォントもありますので、色々なフォントを探して、自分の好みで設定してください。

 文字のサイズは 160 前後に設定してください。これはフォントの種類によって前後します。

 文字の位置は右寄せ・中央位置にて設定します。

 文字の色は Color で設定できます。初期設定の黒字のままでもよいです。
今回の例では、黒の縁取りを Outline コンポーネントで装飾し、文字の色は黄色に設定しています。
この辺りの設定も自由に変更してみてください。

 設定が多く大変ですが、それだけ多くの情報を変更し、自由に設定が可能になっています。
操作を繰り返すことで覚えることが早く的確になります。


 最後に Raycast Target のチェックを外してオフの状態にしてください。


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



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



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



 以上で設定は完了です。


5.TotalExpSet ゲームオブジェクトの子オブジェクトとして、imgExp ゲームオブジェクトを作成して、設定を行う


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


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



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


 
 続いて設定を行います。画像の設定、サイズの変更と位置などを調節しましょう。



 最初に、画像を設定します。

 こちらには、以前も作成したように無料のロゴを作成して設定してください。
Exp という表示であれば、大文字でも小文字でも構いません。

 png ファイルにて作成した画像を Unity の Textures フォルダへドラッグアンドドロップしてインポートします。

 imgExp ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。
現在は None になっており、画像が何も設定されていない状態です。

 Source Image の右側にある丸いボタンを押すと Select Sprite ウインドウが開き、設定可能な画像を選択できます。
こちらにインポートした Exp というロゴ画像をドラッグアンドドロップしてアサインして登録してください。

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



 最後にサイズと位置を変更します。
ロゴのデザインにもよりますが、横幅は 120 前後、縦幅は 75 程度に設定してください。
これはどちらも、自分の画面のサイズを見ながら調整を行ってください。
Sceneビューだけではなく、Gameビューも確認しながら配置することが大切になります。


imgExp ゲームオブジェクト インスペクター画像(数字は参考程度です)



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



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



 以上で設定は完了です。



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

 次は 発展6 −GameData の作成、Exp 獲得処理と Exp 表示更新処理の実装− です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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