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

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

» 2017年04月17日 05時00分 公開
[薬師寺国安PROJECT KySS]

 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 図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 図2 「Plane」と「Sphere」に「Material」を設定した。Main Cameraにも黒を指定した

カメラの位置を決める

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

図3 図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 図4 「Spotlight」のプロパティを設定

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

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

Sliderを配置する

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

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

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

図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のコードを記述する。

  1. public static Light myLight;
  2. private GameObject lightObject;
  3. public static float myAngle;
  4. void Start()
  5. {
  6. myAngle = 1.0f;
  7. lightObject = new GameObject("Light");
  8. myLight = GetComponent<Light>();
  9. myLight.type = LightType.Spot;
  10. myLight.spotAngle = myAngle;
  11. }
リスト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回のコラム「スクリプトエディタの切り替え」を参照されたい。

  1. static var myLight:Light;
  2. private var kightObject:GameObject;
  3. static var myAngle:float;
  4. function Start()
  5. {
  6. myAngle=1.0f;
  7. lightObject=new GameObject("Light");
  8. myLight=GetComponent(Light);
  9. myLight.typeLightType.Spot;
  10. myLight.spotAngle=myAngle;
  11. }
リスト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のコードを記述する。

  1. using UnityEngine;
  2. using UnityEngine.UI;
  3. public class SliderActionScript : MonoBehaviour {
  4. private Slider mySlider;
  5. void Start () {
  6. mySlider = GetComponent<Slider>();
  7. mySlider.value = 0;
  8. }
  9. public void SliderChanged()
  10. {
  11. if(mySlider.value==1)
  12. {
  13. SpotlightScript.myAngle = 60.0f;
  14. }
  15. if (mySlider.value == 0)
  16. {
  17. SpotlightScript.myAngle = 1.0f;
  18. }
  19. SpotlightScript.myLight.spotAngle = SpotlightScript.myAngle;
  20. }
リスト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のコードも記載しておく。

  1. import UnityEngine.UI;
  2. private var mySlider:Slider;
  3. function Start () {
  4. mySlider = GetComponent(Slider);
  5. mySlider.value = 0;
  6. }
  7. public function SliderChanged()
  8. {
  9. if(mySlider.value==1)
  10. {
  11. SpotlightScriptJS.myAngle = 60.0f;
  12. }
  13. if (mySlider.value == 0)
  14. {
  15. SpotlightScriptJS.myAngle = 1.0f;
  16. }
  17. SpotlightScriptJS.myLight.spotAngle = SpotlightScriptJS.myAngle;
  18. }
リスト2 「Slider」のONとOFFでSpotlightを切り替えるコード(SliderActionScriptJS.js)

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

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

図8 図8 On Value Changedが表示された

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

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

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

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

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

図11 図11 「SliderChanged」を選択した

実行して保存

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

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

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

       1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

HTML5�偽X 險倅コ九Λ繝ウ繧ュ繝ウ繧ー

譛ャ譌・譛磯俣

注目のテーマ

4AI by @IT - AIを作り、動かし、守り、生かす
Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。