top of page

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

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

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


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

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

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素材、WaterImageBoxCollider 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);              //次の出現までの時間を乱数で指定
    }
}

宣言したbubblePrefab にInspectorから、先のフェーズで作成した BubbleImage のプレハブをAssignします。

スイカゲーム風ベジタブルゲームの作り方 バブルの生成プログラム

これで鍋の底から泡が発生し続ける動きができました。


「VegetablGameの作り方」その他の記事はこちらから


 

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

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

最新記事

すべて表示

Comentários


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

bottom of page