top of page

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

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

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


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

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



8,鍋の中の水の演出


8.1 背景追加


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

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

スイカゲーム風ベジタブルゲームの作り方 背景UIの配置

追加した 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の設定

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

名前BGPanel に変更 Imageコンポーネント   Source Image:取得済みの 「キッチン」の画像 を指定   Color:不透明度を 255(最大) に変更
スイカゲーム風ベジタブルゲームの作り方 背景Panelの設定

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

名前WaterImage に変更 RectTransformコンポーネント   Anchor Preset: Center Middle に指定   PosX:0、PosY:-100   Width:1300、Height:500 に指定(鍋の枠に隠れる程度の大きさ) Imageコンポーネント   Source Image:取得済みの 「Water」の画像 を指定   Color:薄い水色、不透明度を若干下げて後ろの背景が見えるように
スイカゲーム風ベジタブルゲームの作り方 背景Imageの設定

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

スイカゲーム風ベジタブルゲームの作り方 背景UIイメージ

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の個別指導のオンラインレッスンを行っています。

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

最新記事

すべて表示

Comments


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

bottom of page