スイカゲーム風「ベジタブルゲーム」の作り方、今回からは演出関連の動きを作っていきます。
この作品は鍋の中に野菜を落下させる、というコンセプトで作成しています。ということでまずは鍋の中の水を表現してみます。ただ水の画像を配置するだけでなく、左右の揺らぎや泡、水しぶきの演出なども作っていきます。
ユニティルーム サンプルの投稿ゲーム
8,鍋の中の水の演出
8.1 背景追加
まずは背景画像を指定します。
UI ⇒ Canvas で新しい Canvas を追加、さらにその配下に Panel と Image を追加します。
追加した Canvas を以下のように修正します。
❶ 名前： BackCanvas に変更 ❷ Canvasコンポーネント Render Mode: Screen Space-Camera に変更 RenderCamera: Main Camera を指定 Sorting Layer: 新たに Layer0 に「BackCanvas」、Layer3 に「FrontCanvas」を作成 このCanvasには BackCanvas を指定します ❸ CanvasScalerコンポーネント UI Scale Mode: Scale With Screen Size を指定 Reference Rezolution: x:1920 y:1080 を指定更新
続いて配下の Panel を以下のように指定します。
❶ 名前： BGPanel に変更 ❷ Imageコンポーネント Source Image:取得済みの 「キッチン」の画像 を指定 Color:不透明度を 255(最大） に変更
次は Image を以下のように指定します。
❶ 名前： WaterImage に変更 ❷ RectTransformコンポーネント Anchor Preset: Center Middle に指定 PosX:0、PosY:-100 Width:1300、Height:500 に指定（鍋の枠に隠れる程度の大きさ） ❸ Imageコンポーネント Source Image:取得済みの 「Water」の画像 を指定 Color:薄い水色、不透明度を若干下げて後ろの背景が見えるように
ここまでの指定で以下のような状態になっています。
8.2 水の揺らぎプログラム
作成した水のImageを左右に揺らし、鍋の水の動きを作ってみましょう。[02_Scripts]フォルダに UIManager というスクリプトファイルを作成します。ここで使用する変数は1つだけです。
変数名 | 型 | アクセス | 説明 |
water | GameObject | private | 水のImageを管理するための変数 |
では変数の宣言と初期値の取得を行います。
UIManager.cs
GameObject water; //鍋の水のImage
void Start()
{
//WaterImageを探して代入
water = GameObject.Find("BackCanvas/WaterImage").gameObject;
}
取得した water を三角関数を使って、左右に滑らかに動かします。どのデバイスでも同じような動きをするように FixedUpdate()関数 を使用します。
UIManager.cs
void FixedUpdate()
{
//waterのローカル座標を三角関数を使って左右に移動
water.transform.position += new Vector3(Mathf.Cos(Time.time ) / 100, 0, 0);
}
鍋の水がゆらゆら左右に移動しているのを確認してください。
「VegetablGameの作り方」その他の記事はこちらから
ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。