uGUI Panelの色を変えてみます。

はじめに

uGUIのPanelとSliderを使って、PanelのColor制御を行いました。

目標

画面の黒部分をRGBA制御を行い変化させます。

使うもの

• UI Panel, Slider, Text
• 制御用のスクリプト

Panelの設置

”制御するPanel”と”RGBA制御用Sliderの背景になるPanel”を、それぞれ設置します。

制御するPanel	RGBA制御用Sliderの背景になるPanel

Sliderの設置

RGBA制御用のSliderを置きます。（画像１）
この時に作者都合でAlpha制御用Slider（AlphaSlider）のValueを１に、それ以外のSliderのVauleを０にしております。（画像２）

画像１

画像２

Alpha	それ以外

スクリプトの設置

設置したUIを制御するスクリプトを作ります。

ColorController.cs

using UnityEngine;
using UnityEngine.UI;   // UIを使います。
using System.Collections;
public class ColorController : MonoBehaviour { 
    private GameObject redslider, greenslider, blueslider, alphaslider;
    private GameObject panel_object;
    // Use this for initialization
    void Start () {
        // GameObjectを取得します。
        this.redslider = GameObject.Find ("RedSlider");
        this.greenslider = GameObject.Find ("GreenSlider");
        this.blueslider = GameObject.Find ("BlueSlider");
        this.alphaslider = GameObject.Find ("AlphaSlider");
        this.panel_object = GameObject.Find ("ColorBackground");
    }
    // Update is called once per frame
    void Update () {
        // 変動する値を取得します。
        float red = this.redslider.GetComponent<Slider> ().value;
        float green = this.greenslider.GetComponent<Slider> ().value;
        float blue = this.blueslider.GetComponent<Slider> ().value;
        float alpha = this.alphaslider.GetComponent<Slider> ().value;
        // 取得した値をカラー値にセットします。
        this.panel_object.GetComponent<Image>().color = new Color(red, green, blue, alpha);
    }
}

完成画面

Game	Hierarchy