Unity:GUIのスライダーでオブジェクトの位置や回転を制御する

今回は、GUIのスライダーやボタンでオブジェクトの位置や回転を制御する方法を試してみました。

シーンの作成

オブジェクトの配置

シーンにフリーアセットのキャラクター、Space Robot Kyle を画面中央に配置。画面左右と下側にスライダーを配置しました。リセットボタンを画面上部に配置しました。

オブジェクトの階層設定

オブジェクトの回転制御をするために、Empty オブジェクトで親子階層を作成。X、Y、Z軸回転を別々に制御する構造にしました。

スクリプトの作成

GUIスライダーでオブジェクトを制御するためのスクリプトを作成します。
回転制御のオブジェクト、スライダーオブジェクト、リセットボタンを格納する変数をすべて public 変数にして[Inspector]ウィンドウから割り当てる方法にしました。
コードは次の通りです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// GUIコンポーネントの関数を使用する宣言
using UnityEngine.UI;

public class SliderControl : MonoBehaviour
{
    // 位置を制御するオブジェクト（Transform）を格納する変数
    public Transform obj;
    // X軸回転を制御するオブジェクト（Transform）を格納する変数
    public Transform objRotX;
    // Y軸回転を制御するオブジェクト（Transform）を格納する変数
    public Transform objRotY;
    // Z軸回転を制御するオブジェクト（Transform）を格納する変数
    public Transform objRotZ;
    // X軸座標を制御する Slider オブジェクトを格納する変数
    public Slider sliderPosX;
    // Y軸座標を制御する Slider オブジェクトを格納する変数
    public Slider sliderPosY;
    // Z軸座標を制御する Slider オブジェクトを格納する変数
    public Slider sliderPosZ;
    // X軸回転を制御する Slider オブジェクトを格納する変数
    public Slider sliderRotX;
    // Y軸回転を制御する Slider オブジェクトを格納する変数
    public Slider sliderRotY;
    // Z軸回転を制御する Slider オブジェクトを格納する変数
    public Slider sliderRotZ;

    // X軸座標を制御する処理
    public void ValuePosX()
    {
        // オブジェクトの座標を変数 objPos に格納
        Vector3 objPos = obj.position;
        // スライダーの値を変数 objPos に格納
        objPos.x = sliderPosX.value;
        // 変数 objPos の値をオブジェクトの座標に格納
        obj.position = objPos;
    }

    // Y軸座標を制御する処理
    public void ValuePosY()
    {
        // オブジェクトの座標を変数 objPos に格納
        Vector3 objPos = obj.position;
        // スライダーの値を変数 objPos に格納
        objPos.y = sliderPosY.value;
        // 変数 objPos の値をオブジェクトの座標に格納
        obj.position = objPos;
    }

    // Z軸座標を制御する処理
    public void ValuePosZ()
    {
        // オブジェクトの座標を変数 objPos に格納
        Vector3 objPos = obj.position;
        // スライダーの値を変数 objPos に格納
        objPos.z = sliderPosZ.value;
        // 変数 objPos の値をオブジェクトの座標に格納
        obj.position = objPos;
    }

    // X軸回転を制御する処理
    public void ValueRotX()
    {
        // スライダーの値をオブジェクトのX軸回転値に格納
        objRotX.eulerAngles = new Vector3(sliderRotX.value, 0, 0);
    }

    // Y軸回転を制御する処理
    public void ValueRotY()
    {
        // スライダーの値をオブジェクトのY軸回転値に格納
        //（親オブジェクトから見た相対的なオイラー角の回転値）
        objRotY.localEulerAngles = new Vector3(0, sliderRotY.value, 0);
    }

    // Z軸回転を制御する処理
    public void ValueRotZ()
    {
        // スライダーの値をオブジェクトのZ軸回転値に格納
        //（親オブジェクトから見た相対的なオイラー角の回転値）
        objRotZ.localEulerAngles = new Vector3(0, 0, sliderRotZ.value);
    }

    // リセット処理(座標値)
    public void ValueResetPos()
    {
        // スライダーの値に 0 を格納
        sliderPosX.value = 0f;
        sliderPosY.value = 0f;
        sliderPosZ.value = 0f;
    }

    // リセット処理(回転値)
    public void ValueResetRot()
    {
        // スライダーの値に 0 を格納
        sliderRotX.value = 0f;
        sliderRotY.value = 0f;
        sliderRotZ.value = 0f;
    }
}

Y軸とZ軸の回転制御オブジェクトは子オブジェクトなので、回転値の受渡しに localEulerAngles を使用しました。下記のとおり、公式スクリプトリファレンスを参考にしました。
Transform.localEulerAngles – Unity スクリプトリファレンス

親の Transform オブジェクトから見た相対的なオイラー角としての回転値
x、y、z の値により、Z軸で z 度、X軸で x 度、Y軸で y 度回転します。またこの順番で回転します。
Unity は自動的に Transform.localRotation に格納されている回転から角度を変換します。

座標値の制御についてはこちらの記事で紹介した、Vector3 のローカル変数を使用して特定の座標値だけ更新する書き方を使いました。

スクリプトの設定

作成したスクリプト SliderControl はCanvasにアタッチ。
[Inspector]ウィンドウで表示されている変数フィールドにそれぞれGUIスライダー、リセットボタンをドラッグ&ドロップで割り当てました。

WebGLでビルドしたシーン

今回作成したシーンをWebGLでビルドしました。