【Unity】UIの点滅(Text、Image、TextMeshPro)

2021/10/2
UI要素のカラー値を指定したカラー間でループ

カラー値を持つUI要素*を、指定したカラー間でループさせるコード。
(*Text、Image、TextMeshProUGUIコンポーネント)

アルファ値のみを変更する事で、点滅表現になる。
色は0～255で指定。ループ速度を秒数で指定可能。

  • 2021/10/10：コード修正(elapsedTime -> Time.time)。
  • 2021/12/06：コード修正(インスペクターからの指定をメインに変更)。

サンプル動画

真ん中のTextはOutlineコンポーネントを付けたので、若干、変な挙動になっております。

使い方

  • 対象のコンポーネントを持ったオブジェクトへ、各種コードを記述したスクリプトをアタッチ。
  • 画面上にUIを残しつつ一時停止させる場合は、スクリプトのenabledを無効化する。
  • インスペクターからコンポーネントを紐付ける場合は、コード内のGetComponentの部分を削除しても大丈夫です。

補足は主にImageFlickerのコード内に記述。

【コード】ImageFlicker

  1. ヒエラルキー -> 対象のImageコンポーネントを持ったオブジェクトを選択。
  2. インスペクター -> Add Component -> New scriptを選択、「ImageFlicker」と命名。
  3. 以下のコードをコピーして貼り付け。


using UnityEngine;
using UnityEngine.UI;

public class ImageFlicker : MonoBehaviour
{

//インスペクターから設定するか、初期化時にGetComponentして、Imageへの参照を取得しておく。
	[SerializeField]
	Image img;

	[Header("1ループの長さ(秒単位)")]
	[SerializeField]
	[Range(0.1f, 10.0f)]
	float duration = 1.0f;

//スクリプトで指定したい場合は[SerializeField]をコメントアウトする。
//ループ開始時の色を0～255までの整数で指定。
//元画像が白の場合は、指定した色になる。ドット絵等の場合は、白色を指定すると元画像への影響なし。アルファ値ゼロで完全に透明。
	[Header("ループ開始時の色")]
	[SerializeField]
	Color32 startColor = new Color32(255, 255, 255, 255);
//ループ終了(折り返し)時の色を0～255までの整数で指定。
	[Header("ループ終了時の色")]
	[SerializeField]
	Color32 endColor = new Color32(255, 255, 255, 64);


//インスペクターから設定した場合は、GetComponentする必要がなくなる為、Awakeを削除しても良い。
	void Awake()
	{
		if (img == null)
			img = GetComponent<Image>();
	}

	void Update()
	{
//Color.Lerpに開始の色、終了の色、0～1までのfloatを渡すと中間の色が返される。
//Mathf.PingPongに経過時間を渡すと、0～1までの値が返される。
		img.color = Color.Lerp(startColor, endColor, Mathf.PingPong(Time.time / duration, 1.0f));
	}
}

【コード】TextFlicker

  1. ヒエラルキー -> 対象のTextコンポーネントを持ったオブジェクトを選択。
  2. インスペクター -> Add Component -> New scriptを選択、「TextFlicker」と命名。
  3. 以下のコードをコピーして貼り付け。


using UnityEngine;
using UnityEngine.UI;

public class TextFlicker : MonoBehaviour
{

//インスペクターから設定するか、初期化時にGetComponentして、Textへの参照を取得しておく。
	[SerializeField]
	Text txt;

//一ループの長さ(秒数)。
	[Header("1ループの長さ(秒単位)")]
	[SerializeField]
	[Range(0.1f, 10.0f)]
	float duration = 1.0f;

	[Header("ループ開始時の色")]
	[SerializeField]  
	Color32 startColor = new Color32(255, 255, 255, 255);

	[Header("ループ終了時の色")]
	[SerializeField]  
	Color32 endColor = new Color32(255, 255, 255, 64);



//インスペクターから設定した場合は、GetComponentする必要がなくなる為、Awakeを削除しても良い。
	void Awake()
	{
		if (txt == null)
			txt = GetComponent<Text>(); 
	}

	void Update()
	{
		txt.color = Color.Lerp(startColor, endColor, Mathf.PingPong(Time.time / duration, 1.0f));
	}
}

【コード】TextMeshProFlicker

  1. ヒエラルキー -> 対象のTextMeshProUGUIコンポーネントを持ったオブジェクトを選択。
  2. インスペクター -> Add Component -> New scriptを選択、「TextMeshProFlicker」と命名。
  3. 以下のコードをコピーして貼り付け。


using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class TextMeshProFlicker : MonoBehaviour
{

//インスペクターから設定するか、初期化時にGetComponentして、TextMeshProUGUIへの参照を取得しておく。
	[SerializeField]
	TextMeshProUGUI tmp;

	[Header("1ループの長さ(秒単位)")]
	[SerializeField]
	[Range(0.1f, 10.0f)]
	float duration = 1.0f;

//開始時の色。
	[Header("ループ開始時の色")]
	[SerializeField]
	Color32 startColor = new Color32(255, 255, 255, 255);
	
//終了(折り返し)時の色。
	[Header("ループ終了時の色")]
	[SerializeField]
	Color32 endColor = new Color32(255, 255, 255, 64);



//インスペクターから設定した場合は、GetComponentする必要がなくなる為、Awakeを削除しても良い。
	void Awake()
	{
		if (tmp == null)
			tmp = GetComponent<TextMeshProUGUI>(); 
	}

	void Update()
	{
		tmp.color = Color.Lerp(startColor, endColor, Mathf.PingPong(Time.time / duration, 1.0f));
	}
}

タイトルとURLをコピーしました