Unityで簡単に作成できるボトルアニメーションの作り方

ゲーム開発しているときにさりげなくアニメーションがあったほうが画面が映えるかなと思い、ビンの水をアニメーションするアセットを作ってみましたのでその作り方をご紹介します。

環境

Unity2020.3.18f

素材の準備

ビン画像素材についてはいらすとやさんから使用しています。これが背景画像となります。

http://www.irasutoya.com/2020/01/blog-post_38.html

水の波モーションを作成するため、ボックスを作り水面の表現画像を数パターン用意します。(私の場合は8パターン画像)

また水の表現表示のためのマスク画像も瓶の形に合わせて準備します。

Unity側の設定

画像オブジェクト(Bottle)にビン画像を設定し、その中にマスク画像(Mask)、水用の画像(water)をそれぞれ親子関係で設置します。

マスクはMaskコンポーネントをアタッチし、領域外を非表示にするために利用します。

waterにはアニメーションをAddComponent()して、水面画像がアニメーションで切り替わるするようにしましょう

Scriptの準備

どうせならScriptから水量を調整したいので、Bottleに下記のScriptを追加し、パラメータに応じて表示位置が変わるようにします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

[ExecuteAlways]
public class BottleCtrl : MonoBehaviour
{
    [SerializeField, Range(0, 1)]
    public float value = 0.0f;

    [SerializeField] private Image waterImage;
    
    // Update is called once per frame
    void Update()
    {
        if (!waterImage)
        {
            return;
        }
        var size = waterImage.rectTransform.rect.size;
        var pos = waterImage.rectTransform.anchoredPosition;
        pos.y = (size.y * (-1 + value));
        waterImage.rectTransform.anchoredPosition = pos;
    }
}

サンプルダウンロード

githubにて公開しておりますので、ご自由にご利用ください。

https://github.com/ateliee/BottleAnimation