1月4日2 分
最終更新: 1月16日
スイカゲーム風「ベジタブルゲーム」の作り方、今回からは演出関連の動きを作っていきます。
この作品は鍋の中に野菜を落下させる、というコンセプトで作成しています。ということでまずは鍋の中の水を表現してみます。ただ水の画像を配置するだけでなく、左右の揺らぎや泡、水しぶきの演出なども作っていきます。
ユニティルーム サンプルの投稿ゲーム
まずは背景画像を指定します。
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:薄い水色、不透明度を若干下げて後ろの背景が見えるように
ここまでの指定で以下のような状態になっています。
作成した水のImageを左右に揺らし、鍋の水の動きを作ってみましょう。[02_Scripts]フォルダに UIManager というスクリプトファイルを作成します。ここで使用する変数は1つだけです。
では変数の宣言と初期値の取得を行います。
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);
}
鍋の水がゆらゆら左右に移動しているのを確認してください。
ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。