LoginSignup
37

More than 5 years have passed since last update.

uGUIのマスクでウィンドウとかテキストとかアニメーションさせてみた

Posted at

uGUIを勉強するはずが気づいたらマスクでアニメーションをしている。
NGUIよりマスクが簡単だから楽しいな〜

マスクを重ねていろんな色で演出

マスクをたくさん重ねてfillAmountでアニメーションさせています。
1になったときに0にしてSetAsLastSibling();とかで優先順位を変更してあげるのを忘れずに

一番下のアニメーションのヒエラルキー
マスク画像は四角でテキストは同じ文字を全て設定しています

一番下のがソースだとこんな感じ


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

public class TextMaskAnim2 : MonoBehaviour {

    public RectTransform[] maskTranList;
    private float maskWidth = 500;
    private float[] nowWidthList;

    void Awake()
    {
        nowWidthList = new float[maskTranList.Length];
        for(int i = 0; i < maskTranList.Length; i++)
        {
            nowWidthList[i] = maskWidth / (maskTranList.Length + 1) * i;
        }
    }

    void Start () {

    }

    void Update () {
        for(int i = 0; i < maskTranList.Length; i++)
        {
            nowWidthList[i] += maskWidth * Time.deltaTime;
            if(nowWidthList[i] >= maskWidth)
                nowWidthList[i] = maskWidth;

            if(nowWidthList[i] == maskWidth)
            {
                nowWidthList[i] = 0;
                maskTranList[i].SetAsLastSibling();
            }

            maskTranList[i].GetComponent<Image>().fillAmount = nowWidthList[i] / maskWidth;
        }
    }
}

マスクとアンカーを使用したアニメーション

マスクは一つ。左右の括弧はアンカー。

ヒエラルキーはこんな感じ。
マスクのwidthをアニメーションで増やしているだけ。
Left と Rightの括弧は位置を左よせ、右よせしてあとはいい感じにalphaとかアニメーションをかけているだけです。

マスクとアンカーとかを使用したウィンドウ


左は中心から開くウィンドウ。
仕組み的には中心からのマスクができなかったので2つのマスクを使用し、(ウィンドウのスライス画像がきれてしまうので)
上と下で0.5~1のfillAmountでアニメーションしつつウィンドウの9パッチのスライス画像のサイズも変更しています。

右は一度横幅に広がってからたてに広がるウインドウ
こちらはマスクは1つ。横にimageのサイズをのばしてからマスクのfillAmountと画像のサイズ自体を大きくしています。

アイテム画像のきらっていうやつもマスク。
これはシンプルにy画像のy座標を移動しているだけ。

一点困ったのはRect Transformのwidthとheightの変更はsizeDeltaで変更するところ・・・
rectがgetのみでsetできなくてちょっと探すのに時間がかかってしまった・・・。

あ、あと後ろのわちゃわちゃしたパーティクルとかはBlend ModesのAssetです。
ちょっといろいろためしていて・・。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37