UnityのGUIで見栄えを向上――uGUIのSlider、Dropdown、Scrollviewの使い方：ゲーム開発初心者のためのUnity入門（16）（1/3 ページ）

Unityで3Dゲームを作るまでのいろいろな処理を解説する連載。今回は、uGUIのSliderと、Unity 5で新たに追加されたDropdown、Scrollviewの使い方について解説する【Windows 10、Unity 5.5に対応、C#のコードを追加】。

[薬師寺国安，PROJECT KySS]

今回の主な内容

• 「Slider」を使って、明かりの大きさを変える
• 「Dropdown」を使って、選択した画像を表示する
• 「ScrollView」内にButtonを配置し、クリックで盆栽表示
• 次回は、作ったゲームをWebGLに書き出す方法など

　Unityで3Dゲームを作るまでのいろいろな処理を解説する本連載「ゲーム開発初心者のためのUnity入門」。

　前回の「UnityのGUIの基本的な作り方――uGUIのPanel、Button、Text、Imageの使い方」では、Unity 4.6で追加された「uGUI」（Unity UI）の各種「UIオブジェクト」の中からPanel、Button、Text、Imageの使い方を解説した。

　今回は、「UIオブジェクト」の中から「Slider」と、Unity 5で追加された、「Dropdown」「ScrollView」の使い方を紹介する。なお今回は、Asset StoreからインポートするAssetは何もない。

「Slider」を使って、明かりの大きさを変える

　まずは、「Slider」を見ていこう。「Slider」は、つまみを動かすことで、設定した最小から最大までの値を代入できるオブジェクトだ。

新しいプロジェクトを作成

　今回のプロジェクト名は、「SliderSample」とした。「Create project」ボタンをクリックすると「SliderSample」のプロジェクトのScene（シーン）画面を表示することができる。この画面内でサンプルを作っていく。

舞台を作成する

　Hierarchyの「Create」→「3D Object」→「Plane」と選択する。次に同じく「Sphere」も選択して、「Plane」に少し浮かせた状態で配置する（図1）。

図1　「Sphere」を少し浮かせて配置する

PlaneとSphereにMaterialを設定する

　「Project」の「Create」→「Material」を選択して、2つの「New Material」を作成する。名前をそれぞれ「BlackColor」と「GreenColor」という名前にする。「BlackColor」の「Inspector」から「Main Maps」の「Albedo」で黒色を指定する。「GreenColor」には「緑系統色」を指定しておく。「BlackColor」を「Plane」上に、「GreenColor」を「Sphere」上にドラッグ＆ドロップする。

　またHierarchy内の「Main Camera」を選択して、「Camera」の「Clear Flags」に「Solid Color」を選択し、「Background」の「Color」に「R、G、B、A」に全て「0」を指定して「黒」にしておく（図2）。

図2　「Plane」と「Sphere」に「Material」を設定した。Main Cameraにも黒を指定した

カメラの位置を決める

　Hierarchyから「Main Camera」を選択し、図3のようにGame画面に表示するように、位置を設定する。また、Hierarchyの「Directional Light」を削除しておく。

図3　Game画面で見えるオブジェクトの配置

Spotlightを配置する

　Hierarchyの「Create」→「Light」→「Spotlight」と選択する。Plane上に配置した「Spotlight」を「Sphere」の上方に移動し、「Spotlight」のプロパティを設定する。「Inspector」の「Light」の「Spot Angle」に「60」を指定し、「Color」に黄色を指定する。「Intensity」には「8」を指定する。このIntensityの数値が小さいと光が弱くなる。「Shadow Type」は「Soft Shadows」を指定する（図4）。この「Shadow Type」は、Unity 4当時にPro版専用機能で使用できなかったが、Unity 5で無料版でも使用が可能になった。

図4　「Spotlight」のプロパティを設定

　図4のプロパティを設定すると、図5のように表示される。

図5　「Sphere」に「Spotlight」の明かりが差した

Sliderを配置する

　Hierarchyの「Create」→「UI」→「Slider」と選択する。その後にHierarchyを見ると、「Canvas」内に「Slider」が子要素として配置される（図6）。

図6　「Canvas」の子要素として「Slider」が配置された

　この「Canvas」は大きく、ゲーム画面のサイズと同じになる。この「Canvas」内に配置された「Slider」は、マウスのトラックボールで画面を縮小することで、全体像を見ることができる（図7）

図7　画面を縮小して「Canvas」内の「Slider」を表示した

　SliderのInspectorでWidthを「50」、Heightを「20」に指定して小さくした。今回は、ライトのONとOFFを切り替えるだけなので、小さくても問題はない。

スクリプトを追加

　次にスクリプトを追加する。

　Hierarchyから「Spotlight」を選択し、「Inspector」の「Add Component」から「New Script」を選択する。「Name」に「SpotlightScript」を、「Language」に「C Sharp」を選択して、「Create and Add」ボタンをクリックする。「Inspector」に「Spotlight Script Action（Script）」を追加できる。「Script」の「SpotlightScript」をダブルクリックして、Visual Studioを起動し、リスト1のコードを記述する。

public static  Light myLight;
    private GameObject lightObject;
    public static float myAngle;
 
    void Start()
    {
        myAngle = 1.0f;
        lightObject = new GameObject("Light");
        myLight = GetComponent<Light>();
        myLight.type = LightType.Spot;
        myLight.spotAngle = myAngle;
    }

リスト1　「Spotlight」を初期化するコード（SpotlightScript.cs）

　publicでstaticなLight型の静的変数myLightを宣言する（1行目）。publicでstaticな変数として宣言すると、他のスクリプトからもアクセスが可能となる。

　GameObject型のlightObject変数を宣言する（2行目）。publicでstaticなfloat型の静的変数myAngleを宣言する（3行目）。

　変数myAngleを「1.0f」で初期化しておく。「1.0f」の「f」はfloatを表す（7行目）。新しいGameObjectのインスタンスLightを作成し、lightObjectで参照する（8行目）。GetComponentでLightコンポーネントを取得して、変数myLightに格納する（9行目）。LightのLightTypeにスポットライトを表すSpotを指定する（10行目）。LightのSpotAngleを1.0f（myAngle変数）で初期化しておく（11行目）。この記述で、スクリプトを実行した際には、Sphereには光が当たっていないことになる。

　なお、JavaScriptのコードも記載しておく、コードの解説はC#と同じだ。JavaScriptで書きたい場合は、連載第5回のコラム「スクリプトエディタの切り替え」を参照されたい。

static var myLight:Light;
private var kightObject:GameObject;
static var myAngle:float;
 
function Start()
{
  myAngle=1.0f;
  lightObject=new GameObject("Light");
  myLight=GetComponent(Light);
  myLight.type＝LightType.Spot;
  myLight.spotAngle=myAngle;
}

リスト1　「Spotlight」を初期化するコード（SpotlightScriptJS.js）

　次にHierarchyから「Slider」を選択し、「Inspector」の「Add Component」から「New Script」を選択する。「Name」に「SliderActionScript」を選び、「Language」に「C Sharp」を選択して、「Create and Add」ボタンをクリックする。「Inspector」にSlider Action Script（Script）」を追加できる。「Script」の「SliderActionScript」をダブルクリックして、Visual Studioを起動し、リスト2のコードを記述する。

using UnityEngine;
using UnityEngine.UI;
public class SliderActionScript : MonoBehaviour {
    private Slider mySlider;
    void Start () {
        mySlider = GetComponent<Slider>();
        mySlider.value = 0;
}
 
public void SliderChanged()
{
    if(mySlider.value==1)
    {
        SpotlightScript.myAngle = 60.0f;
    }
 
    if (mySlider.value == 0)
    {
        SpotlightScript.myAngle = 1.0f;
    }
    SpotlightScript.myLight.spotAngle = SpotlightScript.myAngle;
}

リスト2　「Slider」のONとOFFでSpotlightを切り替えるコード（SliderActionScript.cs）

　uGUIのSliderを使用するため、usingディレクティブでUnityEngine.UI名前空間を読み込んでおく（2行目）。

　Slider型の変数mySliderを宣言する（4行目）。

　GetComponetでSliderを取得して、変数mySliderに格納しておく（6行目）。mySliderの値を0で初期化しておく（7行目）。

　12〜15行目で、Sliderの値が1だった場合は、SpotlightScriptスクリプト内で宣言していたmyAngleの値を60で初期化する。

　17〜20行目で、Sliderの値が0だった場合は、SpotlightScriptスクリプト内で宣言していたmyAngleの値を1で初期化する。

　21行目で、SpotlightScriptスクリプト内で宣言していたmyLightのspotAngleの値を、SpotlightScriptスクリプト内で宣言していたmyAngleの値で初期化する。これで、Sliderを左と右に動かした際に、SphereにSpotlightが当たったり当たらなかったりするようになる。

　なお、JavaScriptのコードも記載しておく。

import UnityEngine.UI;
private var mySlider:Slider;
 
function Start () {
  mySlider = GetComponent(Slider);
  mySlider.value = 0;
}
 
public function SliderChanged()
{
  if(mySlider.value==1)
  {
    SpotlightScriptJS.myAngle = 60.0f;
  }
  if (mySlider.value == 0)
  {
    SpotlightScriptJS.myAngle = 1.0f;
  }
  SpotlightScriptJS.myLight.spotAngle = SpotlightScriptJS.myAngle;
}

リスト2　「Slider」のONとOFFでSpotlightを切り替えるコード（SliderActionScriptJS.js）

SliderのOn Value Changedのイベントに値を指定する

　HierarchyからSliderを選択して、Inspectorを表示すると、下の方に図8の項目が表示される。

図8　On Value Changedが表示された

　これはSliderの値が変化した場合のイベント処理を設定する画面だ。右隅下の「＋」アイコンをクリックすると図9の画面に変わる。

図9　図8から画面が変わった

　図9の「None（Object）」の箇所に、HierarchyのSliderをドラッグ＆ドロップする（図10）。

図10　Sliderをドラッグ＆ドロップした

　すると、「No Function」ボタンの使用が可能になるため、右端についている小さな「▲▼」アイコンをクリックして、「SliderActionScript」→「SliderChanged」と選択する（図11）。

図11　「SliderChanged」を選択した

実行して保存

　では、これで実行してみよう。動画1のようになるはずだ。

動画1　Sliderの動きでSpotlightの「ON」と「OFF」が切り替わる

　ここでUnityメニューの「File」→「Save Scene as」から「Sliderの使い方」という名前で保存しておこう。