前回はuGUIの概要だけの説明でしたが、今回は実際に何かを作ってみようと思います。
入力系として、Button、Slider、Toggle、Input Fieldとありますが、Sliderが一番面白そうなので、これを試します。
Sliderであれば、音量の調節や、複数並べてグライコ、色の調整などができそうなので、見てわかる色の調整に使ってみました。

  1. 完成形
  2. GameObjectの設置
  3. uGUIの配置
  4. スクリプトの追加

1. 完成形

最終的な画面は以下のようになり、SliderのRGBAを調節することにより、Panelの色やSphereの色を変更できます。
141223uGUISlider11

2. GameObjectの設置

色を変更される側として、GameObjectのSphereを設置します。
このままでは暗いので、Directional Lightを追加しておきます。
更に変更したGameObjectの変化がわかりやすいように、他のGameObject(Plane, Cube, Capsule)も追加しました。
141223uGUISlider01

続いて、変更するGameObjectにMaterialを追加して、色を付けておきます。
ProjectのCreateから”Material”を選択して、追加します。
141223uGUISlider02

名前は”SphereMaterial”としておきました。
追加したSphereMaterialを選択して、InspectorのMain Colorの右の四角をクリック。
141223uGUISlider03

Colorを選択するWindowが表示されるので、適当な色を選択します。
141223uGUISlider04

変更したSphereMaterialをHierarchyのSphereに、ドラッグ&ドロップします。
141223uGUISlider05

すると、SphereのInspectorにSphereMaterialが追加され、設定した色が反映されます。
141223uGUISlider07
141223uGUISlider06

この状態では、Alphaが適用されないので、SphereMaterialのShaderをDiffuseから、Transparent>Diffuseに変更します。
141223uGUISlider025

3. uGUI Sliderの配置

続いて、UIを作っていきます。
色を変更するためには、RGBAを調整する必要があります。そのため、R,G,B,AそれぞれのSliderを準備します。
HierarchyからCreate>UI>Sliderを選択して、Sliderを追加します。
141223uGUISlider08

名前を”RedSlider”に変更します。この名前をコードから探すことになりますので、重要です。
同様に、GreenSlider、BlueSlider、AlphaSliderを追加します。
このSliderを設置するのに、台紙があった方がわかりやすいので、Panelも追加しておきます。
このままですとわかりづらいので、Red、Green、BlueのTextを追加します。
ここまでで、HierarchyとSceneは、以下の図のようになります。
141223uGUISlider09

Game画面は、以下のように表示されてます。
141223uGUISlider10

4. スクリプトの追加

色のコントロール用に、空のGameObjectを追加し、”ColorController”と名前を付けます。
続いて、このGameObjectにスクリプトを追加します。
ColorController.cs

uGUIを使用するので、2行目に以下を追加してあります。
using UnityEngine.UI;

各色のsliderを宣言し、色を変更するPanelとSphereの色を変更するための箱を準備します。

void Start()内に、GameObject.Findを利用して、各スライダーの名前を探し、宣言した各スライダーに格納します。PanelとSphereも同様です。

以下のように各色でSliderの値を取得し、格納します。
float red = this.redslider.GetComponent ().value;

格納したRGBA値を、以下のようにGameObjectに反映させます。
this.panel_object.GetComponent ().color = new Color (red, green, blue, alpha);
this.sphere_object.renderer.material.color = new Color (red, green, blue, alpha);

これで、実行します。
それぞれのスライダーを調整すると、PanelとSphereの色に反映されます。
141223uGUISlider11

最後までお読み頂きありがとうございます!

もし宜しければ、この記事をソーシャルメディアで共有してください!!