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