スイカゲーム風「ベジタブルゲーム」の作り方、今回は鍋を加熱するガスレンジの炎の動きを作ってみます。複数の炎をゆらゆら動かしますが、1つのプレハブから複数の炎のオブジェクトを作成、それぞれ指定した角度に向け、大きさを変化させて動きを作ります。
ユニティルーム サンプルの投稿ゲーム
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つだけです。
変数名 | 型 | アクセス | 説明 |
rt | RectTransform | private | 水のImageを管理するための変数 |
まずは変数の宣言と初期値の取得です。
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);
}
続いてゲーム中に炎が大きくなったり小さくなったりする動きを作ります。
Fire.cs
void Update()
{
//三角関数を使って炎の大きさを更新し続ける
rt.localScale = Vector3.one * (1 - Mathf.Sin(Time.time * 3) / 5);
}
作成した「Fire.cs」を FireImageにアタッチします。
その後、FireImage を複製して、合計15個の素材を作成します。（元の素材を選択し他状態で、Cntrol+D で簡単に複製できます）
実際に動かしてみて、整列した炎がゆらゆら動くのを確認しておきましょう。
「VegetablGameの作り方」その他の記事はこちらから
ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。