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

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket

スイカゲーム風「ベジタブルゲーム」の作り方、今回からは演出関連の動きを作っていきます。

この作品は鍋の中に野菜を落下させる、というコンセプトで作成しています。ということでまずは鍋の中の水を表現してみます。ただ水の画像を配置するだけでなく、左右の揺らぎや泡、水しぶきの演出なども作っていきます。

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

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

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

鍋の中の水の演出

背景追加

まずは背景画像を指定します。

UI ⇒ Canvas で新しい Canvas を追加、さらにその配下に Panel と Image を追加します。

追加した Canvas を以下のように修正します。

1. 名前： BackCanvas に変更
2. Canvasコンポーネント
   　　Render Mode: Screen Space-Camera に変更
   　　RenderCamera: Main Camera を指定
   　　Sorting Layer: 新たに Layer0 に「BackCanvas」、Layer3 に「FrontCanvas」を作成
   　　このCanvasには BackCanvas を指定
3. CanvasScalerコンポーネント
   　　UI Scale Mode: Scale With Screen Size を指定
   　　Reference Rezolution: x:1920　y:1080 を指定更新

続いて配下の Panel を以下のように指定します。

1. 名前： BGPanel に変更
2. Imageコンポーネント
   　　Source Image:取得済みの 「キッチン」の画像 を指定
   　　Color:不透明度を 255(最大） に変更

次は Image を以下のように指定します。

1. 名前： WaterImage に変更
2. RectTransformコンポーネント
   　　Anchor Preset: Center Middle に指定
   　　PosX:0、PosY:-100
   　　Width:1300、Height:500 に指定（鍋の枠に隠れる程度の大きさ）
3. Imageコンポーネント
   　　Source Image:取得済みの 「Water」の画像 を指定
   　　Color:薄い水色、不透明度を若干下げて後ろの背景が見えるように

ここまでの指定で以下のような状態になっています。

水の揺らぎプログラム

作成した水のImageを左右に揺らし、鍋の水の動きを作ってみましょう。[02_Scripts]フォルダに UIManager というスクリプトファイルを作成します。ここで使用する変数は1つだけです。

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

GameObject water;       //鍋の水のImage

void Start()
{
    //WaterImageを探して代入
    water = GameObject.Find("BackCanvas/WaterImage").gameObject;    
}

取得した water を三角関数を使って、左右に滑らかに動かします。どのデバイスでも同じような動きをするように FixedUpdate()関数 を使用します。

void FixedUpdate()
{
    //waterのローカル座標を三角関数を使って左右に移動
    water.transform.position += new Vector3(Mathf.Cos(Time.time ) / 100, 0, 0);
}

鍋の水がゆらゆら左右に移動しているのを確認してください。

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

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

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket