Unityに関連する記事です

 2回にわたって、ゲームの演出を追加していきます。

 ゲームオブジェクト上に数字の表示を重ねて表示する演出方法があります。これを今回は「フロート表示」と定義します。
このフロート表示をするためのゲームオブジェクトを作成し、制御させて、適宜なタイミングで指定したゲームオブジェクト上に表示する処理を実装します。

 具体的には、次の状態になったときにフロート表示を行います。

<フロート表示を行うタイミングと種類>
 1.プレイヤーのバレットがエネミーにぶつかったとき、エネミーのゲームオブジェクト上に「バレットの攻撃力値」の数字を表示
 2.エネミーや、エネミーのバレットが拠点に侵入したとき、拠点のゲームオブジェクト上に「エネミー、あるいはエネミーのバレットの攻撃力値」の数字を表示
 3.エネミーを倒したとき、UI の TotalExp 表示用のゲームオブジェクト上に「獲得した Exp 値」の数字を表示

 他にも考えられますが、今回はこの3つを適宜なタイミングで表示することを設計の目標とします。

 この手順では、このフロート表示用のゲームオブジェクトの作成と、このゲームオブジェクトの挙動を制御するためのスクリプトを作成します。


<フロート表示 1.プレイヤーのバレットがエネミーにぶつかったとき、エネミーのゲームオブジェクト上に「バレットの攻撃力値」の数字を表示>



<Game 画面 1.プレイヤーのバレットがエネミーにぶつかったとき、エネミーのゲームオブジェクト上に「バレットの攻撃力値」の数字を表示>



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

発展15 ーフロート表示の作成ー
30.フロート表示用のゲームオブジェクトを作成する
31.FloatingMessage スクリプトを作成する。処理に応じて色を変える



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

 ・引数と戻り値を利用して処理の内容を自動分岐する処理の実装例



30.フロート表示用のゲームオブジェクトを作成する

1.設計


 エネミーを基準に、フロート表示用のゲームオブジェクトの作成を行っていきます。
フロート表示用のゲームオブジェクトは作成後プレファブにしておき、適宜なタイミングでインスンタンスしてフロート表示を表示させます。

 フロート表示は、ゲームオブジェクトの上に重ねて表示することが前提になりますので、
そのままエネミーのゲームオブジェクトの子オブジェクトとして生成してもよいのですが、
そうなると生成する位置の調整が出来ません。

 こういったケースの場合、フロート表示を行う対象のゲームオブジェクト内に、フロート表示の生成位置となるゲームオブジェクトを用意しておき、
その子オブジェクトとしてフロート表示を生成を行うようにします。今回の場合は、EnemySet ゲームオブジェクト内になります。

 こうすることで、エネミーのゲームオブジェクトに重なりつつ、フロート表示を行う位置を調整することが可能になります。
また、フロート表示を行う位置は、このフロート表示の生成位置となるゲームオブジェクトの位置情報から参照することができるため、フロート表示の生成処理も容易になります。


<フロート表示時のエネミーのゲームオブジェクトのヒエラルキーの状態>


 それではエネミーのゲームオブジェクトの設定と合わせて、フロート表示用のゲームオブジェクトを一緒に作成していきましょう。


2.EnemySet ゲームオブジェクトを編集する方法を決定する


 プレファブ状態のゲームオブジェクトの編集方法は2つあります。
1つは、プレファブ である EnemySet ゲームオブジェクトをプレファブ編集モードにして編集する方法、
もう1つは、ヒエラルキーの EnemyGenerator ゲームオブジェクトの子オブジェクトとして EnemySet ゲームオブジェクトを設置し、Sceneビューで編集する方法です。
どちらの方法を利用しても構いません。

 Prefabs フォルダにある EnemySet ゲームオブジェクトを利用して作業をしていきます。
今回は2つ目のヒエラルキーの EnemyGenerator ゲームオブジェクトの子オブジェクトとして EnemySet ゲームオブジェクトを設置し、Sceneビューで編集する方法で進めていきます。


3.EnemyGenerator ゲームオブジェクトの子オブジェクトとして EnemySet ゲームオブジェクトを配置する


 ヒエラルキーにある EnemyGenerator ゲームオブジェクトの子オブジェクトとして Prefabs フォルダにある EnemySet ゲームオブジェクトをドラッグアンドドロップして配置します。

ヒエラルキー画像



 プレファブ状態のまま作業を行います。


4.EnemySet ゲームオブジェクトの子オブジェクトとして FloatingDamageTran ゲームオブジェクトを作成する


 EnemySet ゲームオブジェクトを選択して右クリックをしてメニューを開き、Create Empty を選択します。
新しい空のゲームオブジェクトが作成されますので、名前を FloatingDamageTran に変更します。


ヒエラルキー画像(プレファブ編集モード時)



ヒエラルキー画像(Sceneビューで編集時)


FloatingDamageTran ゲームオブジェクトは、フロート表示を行うゲームオブジェクトを生成する地点として利用します。


インスペクター画像



 以上でこのゲームオブジェクトは完成です。
この位置にフロート表示用のゲームオブジェクトを作成し、ゲーム内においては生成を行います。


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


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


ヒエラルキー画像(プレファブ編集モード時)



ヒエラルキー画像(Sceneビューで編集時)


FloatingMessageObj ゲームオブジェクトは Textコンポーネントを利用して画面上に数字の値を表示する役割を持ちます。

  続けて、FloatingMessageObj ゲームオブジェクトの設定を行います。大きく3つの手順があります。



 RectTransform コンポーネントの Width と Height を操作して、数字の値が表示できる大きさを設定します。
Width 200、Height 100 前後で設定してください。このサイズはその後の文字の大きさに合わせて適宜調整してください。

 続いて、CanvasRenderer の Cull Transparent Mesh のスイッチにチェックを入れてオンの状態にしてください。


インスペクター画像




 最後の Text コンポーネントの設定です。
文字のフォント・サイズは画面を見ながら自由に設定してください
Text プロパティ欄に半角数字を 3 桁ほど入力し、それを元にして決めてください。

 文字のサイズは 80 〜 100 前後にするといいでしょう。
フォントは数字用のフォントがおすすめです。
無料のフォントサイトで数字のみのフォントを探すと色々なタイプがあります。

 文字の位置中央位置・中央寄せにしてください。

 文字の色は、フロート表示する内容によってスクリプトから制御を行いますので、ここでは初期色のままにしてください。
変更して確認すること自体は問題ありませんので、もしも変更した場合には最後に初期色に戻しておいてください。


Sceneビュー画像





 設定が完了したら、仮入力した文字を削除して、Text プロパティ欄は空白の状態にします。
ここにはスクリプトを利用して、その時の数字の値をゲーム内で用意して表示させます。

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


インスペクター画像



 以上で設定は完了です。

 Outline などの文字装飾は自由に設定してください。


6.FloatingDamageObj ゲームオブジェクトをプレファブにする


 完成したフロート表示用の FloatingMessageObj ゲームオブジェクトを繰り返しインスタンスして利用できるようにプレファブにします。
Prefabs フォルダ内にドラッグアンドドロップしてプレファブ化してください。


ヒエラルキー画像(プレファブ編集モード時)



ヒエラルキー画像(Sceneビューで編集時)



 プレファブにしたら、EnemySet ゲームオブジェクトから FloatingMessageObj ゲームオブジェクトを削除してください
このゲームオブジェクトを適宜なタイミングで FloatingMessageTran ゲームオブジェクトの位置にインスンタンスして利用することになります。


7.EnemySet ゲームオブジェクトを Override する


 プレファブ編集モードで製作していた場合にはこの作業は不要です。
編集モードを終了してください。作業した最新の状態で上書き保存されます。



 ヒエラルキーの EnemyGenerator ゲームオブジェクトの子オブジェクトとして EnemySet ゲームオブジェクトを設置して作業している場合、
プレファブの EnemySet ゲームオブジェクトと、ヒエラルキーにある EnemySet ゲームオブジェクトで差分のゲームオブジェクトが生まれています。

 今回の場合、ヒエラルキーにある EnemySet ゲームオブジェクトの状態を今後も利用することになりますので、
EnemySet ゲームオブジェクトのインスペクターの上部にある Overrides ボタンを押してください。差分のファイルがポップアップ表示されますので、「Apply All」を選択します
Override することで、プレファブの方の EnemySet ゲームオブジェクトの情報が、ヒエラルキーの EnemySet ゲームオブジェクトの情報の状態に上書きされます。

 Override に成功すると、FloatingMessageObj ゲームオブジェクトのアイコンの色と形状が変わり、プレファブの一部になります。


インスペクター画像



 Prefabs フォルダにある EnemySet ゲームオブジェクトも確認しておきましょう。
Override 処理されて Prefabs フォルダにある EnemySet ゲームオブジェクトに FloatingMessageTran ゲームオブジェクトの情報が追加されていれば問題ありません。


Prefabs フォルダにある EnemySet ゲームオブジェクト インスペクター画像



 以上で完成です。
最後にヒエラルキーにある EnemySet ゲームオブジェクトを削除してください


31.FloatingMessage スクリプトを作成する。処理に応じて色を変える

1.設計


 作成した FloatingMessageObj ゲームオブジェクトの各コンポーネントの制御を行うための FloatingMessage スクリプトを作成します。

 制御を行う情報は Text コンポーネントになりますので、スクリプト内で利用できるように Text 型の変数を用意しておきます。
SerializeField 属性つきで宣言しておくことでインスペクターよりアサイン出来るようになります。

 フロート表示用のゲームオブジェクトは1つだけですが、フロート表示する内容には種類があります。

<フロート表示を行うタイミングと種類>
 1.プレイヤーのバレットがエネミーにぶつかったとき、エネミーのゲームオブジェクト上に「バレットの攻撃力値」の数字を表示
 2.エネミーや、エネミーのバレットが拠点に侵入したとき、拠点のゲームオブジェクト上に「エネミー、あるいはエネミーのバレットの攻撃力値」の数字を表示
 3.エネミーを倒したとき、UI の TotalExp 表示用のゲームオブジェクト上に「獲得した Exp 値」の数字を表示

 この種類に応じて、1つのフロート表示用のゲームオブジェクトを使い分けていく設計にします。
表示する種類は確定していますので、事前に FloatingMessageType 型の enum を作成して種類の情報を登録しておきます。
このように種類を設定しておくことで種類の指定が可能になり、後々にフロート表示を行う種類が増えてもこの情報を増やすことで対応可能です。



 スクリプトに用意する処理としては、フロート表示する数字を Text コンポーネントに代入する処理
文字の位置を毎回少しずつランダムにずらして、完全に同じ位置に重なって見えなくなることを防ぐために位置調整する処理
フロート表示された文字の位置を上方向へアニメ移動させる処理フロート表示を行う種類に応じて、数字の色を変更する処理
一定時間後に破壊する処理、などが考えられます。

 これをメソッド化しておいて、数字として表示する情報と種類を引数で受け取ってメソッド内で利用するロジックを考えましょう。
このメソッドは外部のスクリプトから呼び出すことを前提に作成してください。つまり、表示する数字の情報などは、別のスクリプトが用意することになります。

 数字の色の変更については FloatingMessageType 型を利用して、フロート表示を行う種類に合わせて表示する数字の色を自動的に変更するようにします。
そのためには FloatingMessageType 型を引数で受け取り、その情報で分岐を作成して色を決定し、色の情報を戻り値で戻すような設計ロジックを考えてみてください。
例えば、FloatingMessageType がエネミーにダメージを与えた、という種類の情報であれば文字色を赤くする、という形式の分岐です。


2.FloatingMessage スクリプトを作成する


 設計を参考にして、処理を記述してみてください。
メソッドを呼び出すタイミングは、先ほど提示した【フロート表示を行うタイミング 1〜3】になります。
このタイミングで FloatingMessageObj ゲームオブジェクトが生成されて、その後、数字をフロート表示するメソッドが実行される流れになります。


FloatingMessage.cs

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


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


3.FloatingMessageObj ゲームオブジェクトに FloatingMessage スクリプトをアタッチし設定を行う


 Prefabs フォルダ内にある FloatingMessageObj ゲームオブジェクトを選択し、インスペクターの一番上にある Open Prefab ボタンを押してプレファブ編集モードに切り替えます。
作成した FloatingMessage スクリプトを FloatingMessageObj ゲームオブジェクトにドラッグアンドドロップしてアタッチしてください。


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



 SerializeField 属性で宣言している Text コンポーネントをアサインする変数が表示されますので、
FloatingMessageObj ゲームオブジェクト自身をドラッグアンドドロップしてアサインし、Text コンポーネントを登録してください。


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



 以上で設定は完了です。



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

 次は 発展16 ーフロート表示の実装ー です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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