UnityでSliderを使ってCubeを回したい



![SS 192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a41cd967-f549-8677-1efa-2e99bf69518d.png) Sliderの値の受け渡しのところがよくわからない


#やること
タイトル通り、UnityのSliderを使ってCubeを回します。
オブジェクト間の値わたしについて、Sliderを例に理解していきます。
自分が全忘却した時の備えとして、工程を全メモします。
たぶんUnityをインストールしただけでほとんど使い方がわからないという人でもできます。

# 素材の準備

キャンバス、スライダー、キューブ、キューブ用スクリプトの４つを準備します。すべてデフォルト機能のものです。
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/885f55be-a8f9-5983-e89b-94594cd8ad0a.png">

### ① Canvasを準備
スライダーを設置するためのCanvasを準備します。Canvasはカメラの前に置くレイヤーのような画面で、ゲームのスコアなどを表示する面です。

Hierarchyウィンドウの何もないところで「右クリック」→「UI」→「Canvas」

Canvasを設定すると、EventSystemというオブジェクトも同時に生成されます。


### ② Sliderを準備
Sliderはドラックで数値を入力できる長いスイッチです。
これをCanvasの上に設置します。

Hierarchyウィンドウの「Canvas」の上で「右クリック」→「UI」→「Slider」

設置が終わったらシーンビュー（メインウィンドウ）の上のタブを「Scene」ビューから「Game」ビューに切り替えると、画面にスライダーが設置されていることがわかります。
（GameビューはUnityの再生時に見えるカメラ目線で、Sceneビューは作業用の目線になります。）

### ③ Cubeを準備
スライダーを使って回転させるCubeを置きます。

Hierarchyウィンドウの何もないところで「右クリック」→「3D Object」→「Cube」

### ④ Scriptを準備

ProjectウィンドウのAssetsの中の何もないところで「右クリック」→「Create」→「C# Script」を選択し、ファイル名を「SliderDemo」とします。

これで今回使う素材の準備が整いました。


# UnityのPublicを理解する

Unityは各オブジェクトに紐づく変数や関数を他のオブジェクトとやりとりしたり、右のInspectorウィンドウに項目としてその値を表示し、書き換えもできるようになっています。
そこがUnityの便利なところなのですが、変数にその機能を持たせるにはPublicというアクセス権を設定する必要があります。という話。大事なのはそこだけです。

# 仕込み
### ① CubeにアタッチするC#スクリプトを書く

SliderDemoのファイルを開くと、スクリプトをUnityで使えるようにするための雛形がすでに記述されています。
MonoBehaviourというUnityでしか見ない単語があり気になりますが、Unityで扱えるようにするための標準セットを継承するためのもの、ぐらいに考えておけばよさそうです。
また、Unityのスクリプトには「ファイル名とスクリプト内のclass名を必ず同じにする」という大事なルールがあるので注意が必要です。

内容を追記し、下記のように改めます。

```cpp:SliderDemo
using UnityEngine;

public class SliderDemo : MonoBehaviour //Unity標準クラスを継承
{
    //スライダーの値を「取得する」ためのパブリック変数を定義する関数
    //取得した値のCubeの回転への反映もここで行います。
    public void SliderDemo_CubeRot(float newValue)
    {
        // キューブを回転させるための変数を宣言
        // Vector3変数は3つの値を格納できる型
        // その変数に現在のオイラー角xyzを代入
        // thisはこのスクリプトをアタッチしたGameObjectを表す
        Vector3 rot = this.transform.localEulerAngles;

        // 縦軸のy成分を代入
        rot.y = newValue;

        // 新しい数値をキューブの角度に代入
        this.transform.localEulerAngles = rot;
    }

    // Start is called before the first frame update
    void Start()
    {
    }

    // Update is called once per frame
    void Update()
    {
    }
}

```
Cubeを回転させるためのTransformのところは今回はあまり気にしないでください。
void Start()やvoid Update()はカラのままで大丈夫です。

### ② スライダーの設定をする

HierarchyウィンドウのSliderを選択すると、右のInspectorに設定画面が出ます。
一番下の方にMin Value、Max Valueという項目があるので、ここにスライダで操作したい回転度数の範囲として-180と180を入力しておきます。
ちなみにその下にあるWholo Numbersというチェックボックスですが、これをチェックするとValueの値を整数に制限できるそうです。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a2ba27d6-c4ab-1588-fb85-be674f8dfeac.png">

#仕上げ
###オブジェクトやコンポーネントをアタッチして関連づける

オブジェクト（GameObject)というのはUnityの要素の単位で、キャラクターはもちろん、マシンガンの球、光源、ビュー用のカメラまでゲームを構成するあらゆる物体の基本となるものです。またコンポーネントというのはオブジェクトに内包される構成要素で、形、色、衝突判定やスクリプトなどが定義されます。
衝突判定はUnityの物理世界の中で最初から相互に関連するようになっていますが、独自に設定した変数や関数についてはオブジェクト同士で紐付けないと作用がしません。
ということで、




### ① スクリプトをCubeにアタッチする
Assets内のSliderDemoのスクリプトファイルを、HierarchyウィンドウのCubeにドラッグ&
ドロップでアタッチします。しっかり重ねるとブルーにハイライトするので、その時にドラッグします。（ちゃんと重ねないとグレーのハイライトとなり、その状態ではアタッチされません）
Cubeのインスペクターウィンドウに「SliderDemo(Script)」という項目が追加されていれば成功です。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/47312444-81c0-d490-28fa-e19422f07ecc.png">

### ② スライダーにCubeをアタッチする
ここがミソです。Sliderの値（Value）をどう取り出すかという話。
SliderのInspectorの下にある「On Value Changed(Single)」という項目を使います。ここでプラスを押すと、Valueの渡し先を設定できるようになります。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/05a032ce-d989-0ae2-dc91-db7b8816367b.png">

項目の説明です。
まず左上のプルダウンメニューの「OFF/Editor and Runtime/Runtime Only」の選択ですが、Runtime Onlyを選んでおけば大丈夫です。（Editor and Runtimeを選べば、再生中以外でもスライダーの値が反映されるようになるようです。）

次に、その下のボックスにオブジェクトをアタッチします。
今回はCube（Hierarchyウィンドウ内）をこのボックスにドラック＆ドロップします。

すると右側のプルダウンメニューからSliderDemoの項目を選べるようになります。いま関連づけたCubeにはSliderDemoのスクリプトがアタッチされており、その内容である関数が選べるようになっているというわけです。
さっそく「SliderDemo」→「SliderDemo_CubeRot」を選択します。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/cbe8ea87-9543-6770-c6dd-0ff1e6993a0c.png">

この設定をすることでスライダーで設定したValueの値（-180~180)が独自に設定した関数「SliderDemo_CubeRot」に渡されるようになりました。

これで準備は完了です。

# 完成・実行

画面上部の三角ボタンからプログラムを実行します。
スライダーの操作に連携して、キューブが横に回転してくれます。

![CubeRot1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/17138b1b-51da-34c7-f6fd-09e22576077e.gif)

# 次回記事

次は、数値入力と値の表示もできるようにしてきます。

https://qiita.com/Ninagawa_Izumi/items/64421ad8fb59fe93ead2