Unity

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

More than 3 years have passed since last update.


はじめに

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


目標

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

スクリーンショット 2014-12-06 20.03.30.png


使うもの


  • UI Panel, Slider, Text

  • 制御用のスクリプト


Panelの設置

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

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

スクリーンショット 2014-12-06 21.08.17.png
スクリーンショット 2014-12-06 21.09.02.png


Sliderの設置

RGBA制御用のSliderを置きます。(画像1)

この時に作者都合でAlpha制御用Slider(AlphaSlider)のValueを1に、それ以外のSliderのVauleを0にしております。(画像2)

画像1

スクリーンショット 2014-12-06 21.12.21.png

画像2

Alpha
それ以外

スクリーンショット 2014-12-06 21.14.13.png
スクリーンショット 2014-12-06 21.14.03.png


スクリプトの設置

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

スクリーンショット 2014-12-06 21.28.54.png


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

スクリーンショット 2014-12-06 21.34.18.png
スクリーンショット 2014-12-06 21.04.12.png