1月6日3 分

スイカゲーム風「ベジタブルゲーム」の作り方 Vol.09

最終更新: 1月13日

スイカゲーム風「ベジタブルゲーム」の作り方、今回は鍋を加熱するガスレンジの炎の動きを作ってみます。複数の炎をゆらゆら動かしますが、1つのプレハブから複数の炎のオブジェクトを作成、それぞれ指定した角度に向け、大きさを変化させて動きを作ります。

ユニティルーム　サンプルの投稿ゲーム

https://unityroom.com/games/fivebox_vegetable01

9 炎の演出

9.1 炎の素材

今度は全てのオブジェクトの前面に表示される UI を作成します。

下のように Create ⇒ UI から新たに Canvas、その配下に Panel、さらにその配下に Image を作成します。

まずは作成した Canvas を以下のように指定します。

❶ 名前： FrontCanvas に変更
❷ Canvasコンポーネント
　　Render Mode: Screen Space-Camera に変更
　　RenderCamera: Main Camera を指定
　　Sorting Layer: 先程作成した FrontCanvas を指定します
❸ CanvasScalerコンポーネント
　　UI Scale Mode: Scale With Screen Size を指定
　　Reference Rezolution: x:1920　y:1080 を指定

続いて Panel を修正します。このPanelはこの後作成する複数の炎をまとめて管理するオブジェクトになります。

❶ 名前： FirePanel に指定
❷ RectTransformコンポーネント
　　Anchor Preset: Center Middle に指定
　　PosX:0、PosY:-500
　　Width:1200、Height:150 に指定(鍋の底あたりに配置）
❸ Imageコンポーネント
　　Color: 不透明度を 0% にして透明にしておきます。
❹ Grid Layout Groupコンポーネント　追加
　　CellSize： X:75 Y100
　　ChildAlignment　Lower Center に指定　

最後は炎の画像を作成します。この炎は完成後複数個複製して、ガスレンジから立ち上がる炎のイメージを作成します。

❶ 名前：FireImage に変更
❷ Imageコンポーネント
　　Source Image: 取得済みの「炎」の素材を使用します。

9.2 炎のプログラム

複数の炎の拡大、縮小や角度を指定するプログラムを作成します。[02_Scripts]フォルダに Fire というスクリプトファイルを作成します。ここで使用する変数は1つだけです。

まずは変数の宣言と初期値の取得です。

Fire.cs

RectTransform rt; //RectTransformコンポーネント型の変数

void Start()
{
rt = GetComponent<RectTransform>(); //rtに初期値を代入
}

この炎は FirePanel の子要素として15個配置します。それぞれの炎が何番目の子要素なのかを取得し、その番号によって角度を指定したいと思います。

GetSiblingIndex()メソッドは、該当のオブジェクトが親要素に対して何番目の子要素なのかを返す関数です。

ではStart()関数に以下のコードを追記します。

Fire.cs

void Start()
{
//rt = GetComponent<RectTransform>(); //記述済み
//炎の角度を指定
rt.localRotation = Quaternion.Euler(0, 0, (7 - transform.GetSiblingIndex()) * 5);
}