top of page

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


スイカゲーム風「ベジタブルゲーム」の作り方、今回は鍋を加熱するガスレンジの炎の動きを作ってみます。複数の炎をゆらゆら動かしますが、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: 取得済みの「炎」の素材を使用します。
スイカゲーム風ベジタブルゲームの作り方 炎のオブジェクトの設定2

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

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

最新記事

すべて表示

Comments


ファイブボックス 上田教室

bottom of page