Unityに関連する記事です

 ボスの出現時に警告の演出を考えて実装を行います。

<実装動画 ボス出現時の警告のアニメ演出>
動画ファイルへのリンク


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

発展32 −ボス出現時の警告演出の追加−
63.Canvas内に BossAlertSet ゲームオブジェクト群を作成する
64.ボスの出現前に警告の演出を追加する



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

 ・順序立てた処理のロジックを自分で考えて実装を行う



63.Canvas内に BossAlertSet ゲームオブジェクト群を作成する

1.設計


 この手順では、Canvas ゲームオブジェクト内にボスの出現時に表示する、警告演出用のゲームオブジェクト群を製作していきます。
このゲームオブジェクトもゲーム画面に映る必要のあるゲームオブジェクトですので、 Canvas ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを作成していきます。

 ボス出現の警告演出関連のゲームオブジェクトを管理するためのフォルダ役の BossAlertSet ゲームオブジェクトを作成し、その子オブジェクトとして各画像の表示設定するゲームオブジェクト群を順番に作成します。


<完成時のヒエラルキー画像>


 これから画像の設定などを行うため、Canvas 内に他のゲームオブジェクトが表示されていると設定が難しくなります。
OpeningSet ゲームオブジェクトや、GameClearSet ゲームオブジェクトなどは一時的に非表示にしておくと作業がしやすくなります。
作業しやすい環境で製作を行うようにしましょう。


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


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

BossAlertSet ゲームオブジェクトは、警告演出の表示に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。


ヒエラルキー画像



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


インスペクター画像



Sceneビュー画像



 以上で設定は完了です。


3.BossAlertSet ゲームオブジェクトの子オブジェクトとして、imgBackground ゲームオブジェクトを作成して設定を行う


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


ヒエラルキー画像



 imgBackground ゲームオブジェクトは、ゲーム画面を一時的に薄暗くして警告表示の背景を表示する役割を担うゲームオブジェクトです。


インスペクター画像



Sceneビュー画像(画面下部中央の白い画像)



 続いて、imgBackground ゲームオブジェクトの設定を行います。3つの手順がありますので、順番に設定していきます。



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

 続いて Image コンポーネントの設定を行います。
Color プロパティを選択して、色と透明度を操作し、半透明な黒(0, 0, 0, 126)に設定してください。
SceneビューとGameビューに反映されますので確認します。こちらはゲーム画面を薄暗くしておくためのゲームオブジェクトです。
Source Image は None のままで問題ありません。

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



 3つ目に ゲームオブジェクトのサイズを変更します。横幅(Width) と縦幅(Height) について、画面の上下左右の端まで広げてください。はみ出す位で問題ありません


インスペクター画像



Sceneビュー画像



Gameビュー画像



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


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


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


ヒエラルキー画像



 imgAlert ゲームオブジェクトは警告用のメッセージの背景画像(フレーム)の設定を行うゲームオブジェクトです。


インスペクター画像



Sceneビュー画像



 続いて、imgAlert ゲームオブジェクトの設定を行います。4つの手順がありますので、順番に設定していきます。



 最初に Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックを入れてオンの状態にしてください。
 
 続いて Image コンポーネントの設定を行います。
警告メッセージの背景画像になりますので、そういったイメージの画像を用意してください。
フレームのみでもいいですし、前面の画像でも構いません。

 教材では DefenseBase ゲームオブジェクトのエネミーの侵入地点に利用した画像を ImageType を Sliced の設定にして利用しています。

 Image コンポーネントの Source Image プロパティの部分にインポートした画像をドラッグアンドドロップしてアサインしてください。
画像が登録されて、SceneビューとGameビューに反映されますので確認します。

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



 3つ目に画像の位置とサイズを変更します。これについては任意です。
自分がユーザーの立場になってみて、見やすいサイズや位置に設定してください。
下記のインスペクターやSceneビューの画像を参考してみてください。

 最後に imgAlert ゲームオブジェクトを選択してインスペクターの一番下にある Add Component ボタンを押して、Canvas Group コンポーネントを追加します。
Blocks Raycasts のチェックについてはオンでもオフでも、どちらでも構いませんが、オンのままにしておくとバレットの生成が停止します。
このコンポーネントを利用して、警告表示を点滅させる処理を実装します。

 Canvas Group コンポーネントの Alpha の値は、次の手順まで終了してから 0 に設定してください。


インスペクター画像



Sceneビュー画像



Gameビュー画像



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


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


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


ヒエラルキー画像



 txtAlert ゲームオブジェクトは警告の文字列の表示を行うゲームオブジェクトです。
手法としては、 "WARNING" や "Boss Fight" という文字列を Text コンポーネントを利用して画面に表示します。


インスペクター画像



Sceneビュー画像



 続いて、txtAlert ゲームオブジェクトの設定を行います。3つの手順がありますので、順番に設定していきます。



  Text コンポーネントの Text プロパティ欄に文字列で "WARNING!!" や "Boss Fight!!" と入力してください。(他の警告文でも構いません)

 文字のサイズやフォントは任意です。サイズは 130 - 150 前後にすると見やすくちょうどよいサイズ感になります。
文字は位置は中央寄せ・中央位置で設定してください。SceneビューとGameビューを見ながら調整をしてください。

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



 続いて、画像の位置とサイズを変更します。これについては任意です。
自分がユーザーの立場になってみて、見やすい位置とサイズに設定してください。
背景となるゲームオブジェクト内に収まればどのように配置しても問題ありません。

 最後に前のゲームオブジェクトと同じように Canvas Renderer コンポーネントの、Cull Transparent Mesh のスイッチをオンしてください。


インスペクター画像



インスペクター画像



Sceneビュー画像



Gameビュー画像



 以上で設定は完了です。
Text コンポーネントの Text プロパティに入力した文字列はそのままにしておいてください


 なお、文字装飾については自由に行ってください。
Outline コンポーネントや Shadow コンポーネントが利用できます。



 以上で BossAlertSet ゲームオブジェクトは完成です。

 非表示になっている GameClearSet ゲームオブジェクトなどはすべて表示して、以前の状態に戻しておいてください。

 また imgAlert ゲームオブジェクトの Canvas Group コンポーネントの Alpha の値を 0 にしてください。
警告用の背景の画像と警告メッセージの両方が一緒に非表示になります。


Sceneビュー画像




64.ボスの出現前に警告の演出を追加する

1.設計


 アニメ演出については、実装例の1つです。
そのため、自分で考えた演出があればそちらのロジックを考えて実装に挑戦してみてください。

 設計のアイディアとしては次のような内容になります。

<ボス出現時の警告アニメ演出と前後の処理>
 1.ゲーム開始時に、警告の表示を非表示にする
 2.ボスの生成前に警告の表示が点滅表示する
 3.点滅表示が終了して、警告の表示が消えてからボスが生成される



 こちらの実装について、どのスクリプトに、どのような処理を記述し、どのような場所で実行すればいいのか、
ロジックを最初から考えて組み立ててみてください。

 今までに学習してきた内容を振り返りながら、手順を考えてみましょう。
前回と同じように、処理の順番を考えて、その通りに制御をさせるという部分が重要になります。

 以下に実装例を載せていますが、この通りである必要はありません。
しっかりとロジックが組み立てられて、その通りに制御が出来ていることが大切です。

 ボスの警告に関しては TODO を記述していますので、こちらをヒントに活用してください。



 ← クリックすると開きます。



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


 ゲームを実行し、最初に警告の表示全体が非表示になれば、最初の制御は成功です。

 ボスの生成される前のタイミングで、警告演出として、WARNING の表示が点滅します。
その演出が終了した後にボスが出現すれば、こちらも制御成功です。


<実装動画 .押璽爛好拭璽隼に警告演出用のゲームオブジェクトが非表示になる制御>
動画ファイルへのリンク


<実装動画◆.椒構亳住の警告のアニメ演出>
動画ファイルへのリンク


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

 次は 発展33 −属性の追加− です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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