05 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.» 07

ハルシオンシステムの気ままBlog

株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

 

【Unity】テラシュールさんのuGUI対応トランジションがうまく動かず、某めるくまさんが解決方法考えてくれたので、自分の手柄としてブログにかいときますね! 

おはようございます。坂内っす。
残寒の候、皆様風邪など召されずにお過ごしでしょうか。

現在Unity5.5をメインで使用してまして、画面遷移時のトランジションをいれようと悪戦苦闘しておりました。
使用しようと思っていたのはこちら。

【テラシュールブログ】Unityでトランジションを使用した綺麗な場面転換(uGUI対応版)
http://tsubakit1.hateblo.jp/entry/2015/11/04/015355

これこれ。
以前も触ってみようとしてあきらめたやつね。

トランジションといえば、【Easy Masking Transition】 というアセットもあるんですが、こちらは持っているものの、画面全体のトランジションしかできないため、一部UIのトランジションはできないんですよね。
https://www.assetstore.unity3d.com/jp/#!/content/8734


しかし、テラシュールさんのブログから落とせるFade Cameraを落としてみても動かない・・・・・
”普通のトランジション設定”という方は動くのですが、uGUIをトランジションしようとしても動かない・・・

ってことで、某めるくまさんとこんなやり取りをし、めるくまさんが動く方法を教えてくれたので、ここに書いときます!


ってことで、結局どうしたの?ってのは↓を参考に。

FadeUI.cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI;

[RequireComponent (typeof(RawImage))]
[RequireComponent (typeof(Mask))]
public class FadeUI : UnityEngine.UI.Graphic, IFade
{
[SerializeField]
private Texture maskTexture = null;

[SerializeField, Range (0,1)]
private float cutoutRange;

protected override void Start() {
base.Start();
UpdateMaskTexture(maskTexture);
}

public void UpdateMaskTexture(Texture texture) {
material.SetTexture("_MaskTex",texture);
material.SetColor("_Color",color);
}

public float Range {
get {
return cutoutRange;
}
set {
cutoutRange = value;
UpdateMaskCutout (cutoutRange);
}
}

[SerializeField] Material mat = null;
[SerializeField] RenderTexture rt = null;

[SerializeField] Texture texture = null;

private void UpdateMaskCutout (float range)
{
mat.SetFloat ("_Range", range);

UnityEngine.Graphics.Blit (texture, rt, mat);

var mask = GetComponent ();
mask.enabled = false;
mask.enabled = true;
}

#if UNITY_EDITOR
protected override void OnValidate() {
base.OnValidate();
UpdateMaskCutout(Range);
UpdateMaskTexture(maskTexture);
}
#endif

}


こうなりました。

使い方はテラシュールさんのページを見てもらえばわかりますが、FadeMaskオブジェクトをCanvasの下に置き、その下にトランジションしたいオブジェクトを置きます。
例として、白い四角Imageを置いてみます。



次にFadeUIのMat、Textureにルール画像と呼ばれるテクスチャを付けます。
こちらも詳しい話はテラシュールさんのブログみてね!



これでオッケー!

これでFadeUIのCutout Rangeの値をいじるだけで、FadeMask下のオブジェクトにトランジションがかかります。
※クリックして動きみれるよ!



こんな感じでいい感じのトランジションが使えます!
是非お使いください!

では、あでゅ~ノシ
スポンサーサイト

Category: 開発日記(Unity)

tb 0 : cm 0   

コメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://halcyonsystemblog.blog.fc2.com/tb.php/377-14e8d3d0
この記事にトラックバックする(FC2ブログユーザー)