見出し画像

toioではじめるロボットプログラミング (8) - UIの作成

toio SDK for Unity」のUIの作成方法をまとめました。

・Unity 2019.4.5f1
・UniTask 2.0
・toio SDK for Unity v1.1.0
・Xcode 12.1

前回

1. プロジェクトの準備

toioではじめるロボット・プログラミング (2) - toioアプリのサンプルの実行」と同様です。

2. シーンの準備

(1) Hierarchyウィンドウの「Main Camera」と「Directional Light」を削除。
(2) Projectウィンドウの「/Assets/toio-sdk/Scripts/Simulator/Resources」の「Cubeプレハブ」と「Stageプレハブ」を、Hierarchyウィンドウにドラッグ&ドロップ。

画像1

(3) Hierarchyウィンドウで、「+ → Create → Empty Object」で空のオブジェクトを生成し、「ControlCube」という名前を指定。
(4) 「ControlCube」に「Add Component」で新規スクリプト「ControlCube」を生成し、以下のように編集。

using System.Collections.Generic;
using UnityEngine;
using toio;

// キューブの操作
public class ControlCube : MonoBehaviour
{
    CubeManager cubeManager; // キューブマネージャ
    Cube cube; // キューブ

    // 初期化
    async void Start()
    {
        // キューブの接続
        cubeManager = new CubeManager();
        cube = await cubeManager.SingleConnect();
    }

    // 前進
    public void Forward() 
    {
        cube.Move(60, 60, durationMs:0, order:Cube.ORDER_TYPE.Strong); 
    }

    // 後進
    public void Backward() 
    { 
        cube.Move(-40, -40, durationMs:0, order:Cube.ORDER_TYPE.Strong); 
    }

    // 右回転
    public void TurnRight() 
    { 
        cube.Move(60, 30, durationMs:0, order:Cube.ORDER_TYPE.Strong); 
    }

    // 左回転
    public void TurnLeft() 
    { 
        cube.Move(30, 60, durationMs:0, order:Cube.ORDER_TYPE.Strong); 
    }

    // 停止
    public void Stop() 
    { 
        cube.Move(0, 0, durationMs:0, order:Cube.ORDER_TYPE.Strong); 
    }
}

3. UIの作成

(1) Hierarchyウィンドウの「+ → UI → Canvas」で「Canvas」を追加。
(2) 「Canvas」を選択し、Inspectorウィンドウの「Canvas Scaler」で以下のように設定。

・UI Scale Mode : Scale With Screen Size
・X : 720
・Y : 1440
・Match : 1

画像2

(3) Canvas下に「Panel」を追加し、「Rect Transform」の「center/middle」で以下のように設定。

Width : 720
Height : 1440

画像3

(3) ボタンを5つ配置し、クリックイベントを「ControlCube」の各メソッドに関連付け。

画像4

4. iOSでの実行

iOSで実行すると、次のようなUIが表示されます。

画像5

5. 参考



この記事が気に入ったらサポートをしてみませんか?