Unity
uGUI

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

More than 3 years have passed since last update.

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です。

ちょっといろいろためしていて・・。