スイカゲーム風「ベジタブルゲーム」の作り方 Vol.09 - ファイブボックス

• Facebook
• X(旧:Twitter)
• LINE

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

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

「ベジタブルゲームの作り方」その他の記事はこちらから

• Vol.01 環境構築
• Vol.02 クレーンの作成
• Vol.03 野菜の素材作成
• Vol.04 野菜のプログラム
• Vol.05 Claneのアニメーション
• Vol.06 野菜の進化
• Vol.07 スコア管理
• Vol.08 鍋の中の水の演出
• Vol.09 炎の演出

炎の演出

炎の素材

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

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

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

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

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

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

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

1. 名前：FireImage に変更
2. Imageコンポーネント
   　　Source Image: 取得済みの「炎」の素材を使用

炎のプログラム

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

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

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

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

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

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

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

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

続いて Update()関数 にゲーム中に炎が大きくなったり小さくなったりする動きを作ります。

void Update()
{
    //三角関数を使って炎の大きさを更新し続ける
    rt.localScale = Vector3.one * (1 - Mathf.Sin(Time.time * 3) / 5);
}

作成した「Fire.cs」を　FireImageにアタッチします。

その後、FireImage を複製して、合計15個の素材を作成します。（元の素材を選択し他状態で、Cntrol+D で簡単に複製できます）

実際に動かしてみて、整列した炎がゆらゆら動くのを確認しておきましょう。

ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

• Facebook
• X(旧:Twitter)
• LINE