![見出し画像](https://assets.st-note.com/production/uploads/images/45608245/rectangle_large_type_2_1b687e11090165d7641e517120e75747.png?width=1200)
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](https://assets.st-note.com/production/uploads/images/45123940/picture_pc_db081c8d18caa1584d36b213cddd3418.png?width=1200)
(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](https://assets.st-note.com/production/uploads/images/45124838/picture_pc_bf150a47e1c5f3d338cf4a775af97d1b.png?width=1200)
(3) Canvas下に「Panel」を追加し、「Rect Transform」の「center/middle」で以下のように設定。
Width : 720
Height : 1440
![画像3](https://assets.st-note.com/production/uploads/images/45134630/picture_pc_752b404049e48271550f04d8aac4f214.png?width=1200)
(3) ボタンを5つ配置し、クリックイベントを「ControlCube」の各メソッドに関連付け。
![画像4](https://assets.st-note.com/production/uploads/images/45134880/picture_pc_288184ee780b8053bd9a83f14845a382.png?width=1200)
4. iOSでの実行
iOSで実行すると、次のようなUIが表示されます。
![画像5](https://assets.st-note.com/production/uploads/images/45135558/picture_pc_eb14c80888d9ad6874b034d3d8dbf6ac.png?width=1200)
5. 参考
この記事が気に入ったらサポートをしてみませんか?