ファイブボックスベジタブルゲームの作り方サムネイル画像

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

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

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

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

ファイブボックス作成 スイカゲーム風、ベジタブルゲームイメージ画像

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

炎の演出

炎の素材

今度は全てのオブジェクトの前面に表示される 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: 取得済みの「炎」の素材を使用
スイカゲーム風ベジタブルゲームの作り方 炎のオブジェクトの設定2

炎のプログラム

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

変数名アクセス説明
rtRectTransformprivate水のImageを管理するための変数

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

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の個別指導のオンラインレッスンを行っています。

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

TOP