![スイカゲーム風「ベジタブルゲーム」の作り方 Vol.08](https://fivebox.pro/wp-content/uploads/2024/01/cbfc82324b028ed83ffe78f82957992b-1.png)
スイカゲーム風「ベジタブルゲーム」の作り方、今回からは演出関連の動きを作っていきます。
この作品は鍋の中に野菜を落下させる、というコンセプトで作成しています。ということでまずは鍋の中の水を表現してみます。ただ水の画像を配置するだけでなく、左右の揺らぎや泡、水しぶきの演出なども作っていきます。
![ファイブボックス作成 スイカゲーム風、ベジタブルゲームイメージ画像](https://fivebox.pro/wp-content/uploads/2024/01/image-7.png)
「ベジタブルゲームの作り方」その他の記事はこちらから
- Vol.01 環境構築
- Vol.02 クレーンの作成
- Vol.03 野菜の素材作成
- Vol.04 野菜のプログラム
- Vol.05 Claneのアニメーション
- Vol.06 野菜の進化
- Vol.07 スコア管理
- Vol.08 鍋の中の水の演出
目次
Outline
鍋の中の水の演出
背景追加
まずは背景画像を指定します。
UI ⇒ Canvas で新しい Canvas を追加、さらにその配下に Panel と Image を追加します。
![スイカゲーム風ベジタブルゲームの作り方 背景UIの配置](https://static.wixstatic.com/media/09450c_5e44695222cf4da8b6b4df6fa220f732~mv2.png/v1/fill/w_327,h_357,al_c,lg_1,q_85,enc_auto/09450c_5e44695222cf4da8b6b4df6fa220f732~mv2.png)
追加した 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 を指定更新
![スイカゲーム風ベジタブルゲームの作り方 背景Canvasの設定](https://static.wixstatic.com/media/09450c_25de4292b3364b3881e293fa032d1796~mv2.png/v1/fill/w_740,h_476,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/09450c_25de4292b3364b3881e293fa032d1796~mv2.png)
続いて配下の Panel を以下のように指定します。
- 名前: BGPanel に変更
- Imageコンポーネント
Source Image:取得済みの 「キッチン」の画像 を指定
Color:不透明度を 255(最大) に変更
![スイカゲーム風ベジタブルゲームの作り方 背景Panelの設定](https://static.wixstatic.com/media/09450c_ae83052c81a34acaadcce75ae51cfd7b~mv2.png/v1/fill/w_549,h_271,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/09450c_ae83052c81a34acaadcce75ae51cfd7b~mv2.png)
次は Image を以下のように指定します。
- 名前: WaterImage に変更
- RectTransformコンポーネント
Anchor Preset: Center Middle に指定
PosX:0、PosY:-100
Width:1300、Height:500 に指定(鍋の枠に隠れる程度の大きさ) - Imageコンポーネント
Source Image:取得済みの 「Water」の画像 を指定
Color:薄い水色、不透明度を若干下げて後ろの背景が見えるように
![スイカゲーム風ベジタブルゲームの作り方 背景Imageの設定](https://static.wixstatic.com/media/09450c_a5c8125813ef4cceb5b8295319fdb590~mv2.png/v1/fill/w_587,h_439,al_c,lg_1,q_85,enc_auto/09450c_a5c8125813ef4cceb5b8295319fdb590~mv2.png)
ここまでの指定で以下のような状態になっています。
![スイカゲーム風ベジタブルゲームの作り方 背景UIイメージ](https://static.wixstatic.com/media/09450c_7e45f561c40e4ca88b13cc80516930f2~mv2.png/v1/fill/w_628,h_369,al_c,lg_1,q_85,enc_auto/09450c_7e45f561c40e4ca88b13cc80516930f2~mv2.png)
水の揺らぎプログラム
作成した水のImageを左右に揺らし、鍋の水の動きを作ってみましょう。[02_Scripts]フォルダに UIManager というスクリプトファイルを作成します。ここで使用する変数は1つだけです。
変数名 | 型 | アクセス | 説明 |
water | GameObject | private | 水のImageを管理するための変数 |
では変数の宣言と初期値の取得を行います。
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の個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。