1月7日読了時間: 4分

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

第10回目の今回も演出関連の記事です。ゲームの進行には影響しませんので、スキップしていただいても結構です。

今回は鍋の底から泡が浮かび上がってくる演出を作ってみます。

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

https://unityroom.com/games/fivebox_vegetable01

10,泡の演出

10.1 泡の素材作成

複数の泡をUI素材として生成し、任意のパネルの子要素として配置します。

まずは BackCanvas の子要素として、作成済みの BGPanel と WaterPanel の間に新たな Panel を作成します。さらにその子要素として Image を作成します。

作成したPanelを以下のように修正します。

❶ 名前：BubblePanel に変更 ❷ Imageコンポーネント 　　コンポーネント名の左のチェックボックスのチェックを外し、Active：False の状態にしておきます。

続いてImageを以下のように修正します。

❶ 名前：BubleImage に変更 ❷ Rect Transformコンポーネント 　　Width:30 , Height:30 ❸ Imageコンポーネント 　　素材に「Knob」（円の画像素材）を指定します。 ❹ Circle Colliderコンポーネント　追加　　IsTrigger にチェックを入れ、侵入判定状態に　　Radius 画像の大きさ（30）の半分の 15 に指定 ❺ Rigidbodyコンポーネント　追加　　GravityScale: -0.05 程度にして、上昇する設定にする

この泡は上昇し、水の表面に付いたら削除される設定にします。そこで水の画像の上部にも当たり判定を付けておきましょう。

作成済みのUI素材、WaterImage に BoxCollider 2Dコンポーネント を追加し、以下のように修正します。

BoxCollider2D コンポーネント 　　IsTrigger：チェックを入れ侵入判定検知状態に　　Size：横幅(x)はImageの幅と同じ 1300 に指定、高さ（Y）は 10 に指定　　OffSet：X:0 , Y:295 （水の画像上部に配置）

10.2 泡のプログラム

作成したBubbleImageは生成後、左右に揺れながら上昇し、水の上で削除されるようにします。 [02_Script]フォルダに Bubble というスクリプトファイルを作成します。

作成したスクリプトファイルは　BubbleImageオブジェクトにアタッチしておきます。

Bubbleクラスでは以下の変数を使用します。

変数名	型	アクセス	説明
rt	RectTransform	private	座標や大きさを更新するための変数
s	float	private	経過時間を加算するための変数、三角関数の周期として使用

Bubble.cs を立ち上げて変数の宣言と初期値の設定を行います。

Bubble.cs

RectTransform rt;   //RectTransformコンポーネント型の変数
float s;            //経過時間を加算する変

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

続いて当たり判定後、削除される動きを作成します。

Bubble.cs

private void OnTriggerEnter2D(Collider2D collision)  //侵入判定
{
    if (collision.name == "WaterImage")   //当たった相手の名前が WaterImageなら
    {
        Destroy(gameObject);              //自分自身を削除
    }
}

FixUpdate()関数では次の2つの動きを作ります。

❶ 三角関数を使って左右に動き続ける ❷ 徐々に大きくなる

Bubble.cs

void FixedUpdate()
{
    s += Time.deltaTime;        //1フレーム間の時間を加算
    //左右の揺らぎを三角関数で実現
    rt.transform.localPosition += new Vector3(Mathf.Sin(s * 3),0, 0);
    transform.localScale *= 1.0005f;    //徐々に大きくなる
}

これで泡の動きは完成したので、作成した BubbleImageオブジェクトを[03_Prefabs]フォルダにドラッグ＆ドロップしてプレハブ化しておきます。

続いて、泡を発生させ続ける動きを UIManagerクラス に追記します。新たに使用する変数は以下の通りです。

変数名	型	アクセス	説明
bubblePrefab	GameObject	[SerializeField]	バブルのプレハブ
bubblePanel	GameObject	private	バブルを子要素として管理する親オブジェクト、BubblePanelを指定
currentTime	float	private	泡が生成されるまでの時間を加算する変数
bubbleTime	float	private	泡が生成されるまでの制限時間（毎回乱数で決定）

UIManager.cs を立ち上げて、変数の宣言と初期値の取得を行います。

UIManager.cs

[SerializeField] GameObject bubblePrefab;  //BubbleImageのプレハブ
float currentTime, bubbleTime;             //生成までの時間を管理する変数
GameObject bubblePanel;                    //Bubbleを管理するオブジェクト

void Start()
{
    //記述済みコード省略
    //BackCanvasからBubblePanelを探して、bubblePanelに代入
    bubblePanel = GameObject.Find("BackCanvas/BubblePanel").gameObject;
}

FixedUpdate()関数では以下の内容を実現します。

❶ 時間を計測 ❷ 計測した時間が指定した時間を越えたら、泡のオブジェクトを生成　生成したオブジェクトに対し　① BubblePanel の子要素に指定　② 親要素に対し大きさをリセット　③ Localのx座標を-520 から 520 までの乱数、y座標を-370（鍋の底）に指定　さらに　 ❸ 計測時間（currentTime）をリセット ❹ 次の発生までの時間(bubbleTime)に0.1～2秒までの乱数値を指定

UIManager.cs

void FixedUpdate()
{
    //記述済みコード省略
    currentTime += Time.deltaTime;    //経過時間を計測
    if (currentTime > bubbleTime)     //もし経過時間が指定時間を越えたら
    {
        GameObject bubble = Instantiate(bubblePrefab);      //bubbleという名で泡を生成
        bubble.transform.SetParent(bubblePanel.transform);  //bubbleをPanelの子要素に
        bubble.transform.localScale = Vector3.one;          //bubbleの大きさをリセット
        //bubbleの出現位置を鍋の底のランダムな場所に指定
        bubble.transform.localPosition = new Vector3(Random.Range(-520, 520), -370, 0);
        currentTime = 0;                                    //経過時間をリセット
        bubbleTime = Random.Range(0.1f, 2.0f);              //次の出現までの時間を乱数で指定
    }
}