10
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Unityでテキストを少しずつ透明にする

Last updated at Posted at 2016-07-08

#はじめに
Unityでテキストを少しずつ透明にしていく方法を紹介します。

#手順
1,表示したいテキストを用意する
2,透明にするスクリプトを作成する
3,テキストにスクリプトを関連付ける

#1,表示したいテキストを用意する
 今回は以下のようにテキストを配置します。また、テキストが見やすいように後ろにCubeを配置しました。透明にしたいテキストがゲーム画面で見える状態になっていればOKです

2016-07-08.png

#2,透明にするスクリプトを作成する
新しくスクリプトを作成します。
今回はクリックするとテキストが透明になるようなスクリプトを作成します。

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

public class DeleteScript : MonoBehaviour {

	public Text Qtext;
	bool a_flag;
	float a_color;
	// Use this for initialization
	void Start () {
		a_flag = false;
		a_color = 0;
	}
	
	// Update is called once per frame
	void Update () {
		//左クリックでa_flagをTrueにする
		if (Input.GetMouseButtonDown (0)) {
			a_flag = true;
			a_color = 1;
		}
      //a_flagがtrueの間実行する
		if (a_flag) {
			//テキストの透明度を変更する
			Qtext.color = new Color (0, 0, 0, a_color);
			a_color -=  Time.deltaTime;
			//透明度が0になったら終了する。
			if (a_color < 0) {
				a_color = 0;
				a_flag = false;
			}
		}
	}
}

new Color = (R, G, B, α); と対応しています。今回はテキストが黒なのでRGBは0とし透明度を操作するα値を変数とおきます。

#3,テキストにスクリプトを関連付ける
テキストにスクリプトを関連づけます。まず今回はスクリプトをCanvasに紐づけます。DeleteScriptをCanvasにドラック&ドロップします。

2016-07-081.png

するとCanvasのInspecterにDeleteScriptが表示されるようになります。DeleteScriptにあるQtextの部分へ透明にしたいテキストをドラック&ドロップします。

2016-07-08 (1).png

これで完成です。再生するとクリックでテキストが透明になっていきます。

bandicam 2016-07-08 13-45-14-679.gif

#おまけ
透明にするだけでなく、透明から出現させることも可能なので以下のようにスクリプトを変更するとゆるやかな点滅をさせることもできます。

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

public class DeleteScript : MonoBehaviour {
	public Text Qtext;
	float a_color;
	bool flag_G;
	// Use this for initialization
	void Start () {
		a_color = 0;
	}
	// Update is called once per frame
	void Update () {
			//テキストの透明度を変更する
			Qtext.color = new Color (0, 0, 0, a_color);
			if (flag_G)
				a_color -= Time.deltaTime;
			else
				a_color += Time.deltaTime;
			if (a_color < 0) {
				a_color = 0;
				flag_G = false;
			}else if(a_color > 1){
				a_color = 1;
				flag_G = true;
			}
	}
}

#参考サイト
http://d.hatena.ne.jp/uny_33/20150105/1420407788

10
8
0

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
10
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?