Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away