【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング

PlayMakerによる 初めてのUnityプログラミング ユニティ・テクノロジーズ・ジャパン合同会社 1

0. はじめに 2

研修の概要 • 本研修は外部アセット「PlayMaker」による Unityをアプリケーションの作成について紹介 します。 3

使用しているソフトウェアについて ソフトウェア名 バージョン Unity 5.6.0f3(5.6.2f1でも動作確認済み) PlayMaker https://www.assetstore.unity3d.com/jp/#!/content/368 1.8.4 4

• https://www.assetstore.unity3d.com/jp/#!/content/368

目次 1. 2. 3. 4. PlayMaker概要 基本操作 衝突判定 Unity UIとの連携 5

1. PlayMaker概要 6

PlayMakerとは • 特徴 • 状態遷移ベースのフロー設計ができる • ロジックをノンコーディングで記述できる • 実行中プログラムの状態を視覚的に把握でき、デバッグ 効率が高い • 既存コードや他アセットとの連携が容易 • ユーザー独自の「アクション」の開発が可能 • 全てをPlayMakerだけで作成することができる。 • C#スクリプトと連携させてプロジェクトの一部にだけ PlayMakerを適用することもできる 7

PlayMakerとは • 導入における効果 • • • • • モック製作/ラピッドプロトタイピング UI/状態遷移の管理システム Tweenアニメーションの制御 AIの思考ルーチン Unity Engine APIの学習 8

PlayMakerとは • チーム開発における注意点 • コードではないのでマージができない(Template Export機能である程度カバーできる) • 厳密なカプセル化は困難 • 自由度が高く、ほぼどんなロジックも書けてしまう ため、統一感を図るのが難しい。 9

PlayMakerとは • 前述の注意点に対する対策案 • 使用範囲を特定シーンに限定する • 既存コードとの連携ルールを明文化する • コードは全てPlayMakerのアクションにして使用す る • 状態遷移制御のみに使用して、ロジックを書かない • iTween制御のみに使用する 10

FSMとは • FSM（Finite State Machine:有限状態機械)と呼 ばれるUMLの状態遷移図に似た形式で記述 • 主な構成要素 • ステート：オブジェクトの状態 • イベント：状態遷移を起こすトリガーとなるもの • アクション：ある状態におけるオブジェクトの振る 舞い • 変数：FSMが扱うオブジェクトや数値などの値を格 納する ※有限状態機械（英:  finite  state  machine,  FSM）は別の呼び⽅方で有限オートマトン（英:  finite   automaton,  FA)もある 11

FSMとは • 具体例：プレイヤ・キャラクタ • ステート • 「待機」、「歩き」、「走り」、「ジャンプ中」など • イベント • 「待機」から「歩き」、「歩き」から「走り」などのへのス テート変化を引き起こすもの（一般的にはユーザからの入力 操作をトリガとする) • アクション • 「待機」時の具体的な挙動、「歩き」時の具体的な挙動など 各ステートにおける具体的な挙動 • 変数 • プレイヤの移動方向(Vector3型)と速度(float型)など 12

PlayMakerのインストール • Asset Storeにアクセスし、検索欄に 「PlayMaker」と入力して検索するか、「エデ ィタ拡張」-「ビジュアルスクリプティング」 と辿り以下のアイコンを探す 13

PlayMakerのインストール • またはWeb Browserで以下のURLを表示する • https://www.assetstore.unity3d.com/jp/#!/content/368 • PlayMakerは「エディタ拡張」のため利用者数分のラ イセンスが必要な点に注意してください(他のカテゴリ のアセットはチームで一つだけ購入するだけで全員が 利用できる) 14

• https://www.assetstore.unity3d.com/jp/#!/content/368

PlayMakerのインストール • パッケージインポート直後の画面 15

PlayMakerのインストール • PlayMaker 1.8.xのインストール • この資料は「1.8. 4」を元に記述されています。 • Unityのメニューに「PlayMaker」が増えている ので、[PlayMaker]-[Install PlayMaker]を実行す る 16

PlayMakerのインストール • このウィンドウの「Install PlayMaker」ボタンを押す 17

PlayMakerのインストール • 自動的に互換性のチェック が行われます。今回は新規 なので特に問題は出ません。 18

PlayMakerのインストール • 「Install PlayMaker 1.8.x」ボタンを押す 19

PlayMakerのインストール • 「I Made a Backup. Go Ahead!」ボタンを押す 20

PlayMakerのインストール • 「Import」ボタンを押す 21

PlayMakerのインストール • 「OK」ボタンを押す 22

PlayMakerのインストール • 似たようなダイアログが出ます。この画面が出 たら「I Made a Backup. Go Ahead!」ボタンを 押す 23

PlayMakerのインストール • インストール作業直後の状態 24

PlayMakerのインストール • アップデートチェックダイ アログは不要なので閉じて ください。 25

PlayMakerのインストール • このウィンドウは不要なの で右下の「Show At Startup」のチェックを外し てから閉じてください。 26

PlayMakerのインストール • PlayMakerのインス トールが完了した 直後のProjectビュ ー 27

PlayMakerの基本設定(オプション) • 表示言語の変更 • [PlayMaker]-[PlayMaker Editor]を実行 • 右下の[Preferences]ボタ ンを押す 28

PlayMakerの基本設定(オプション) • 右上でGeneralを選び、「Language」を [English]から[Japanese]に変更する 29

PlayMakerの基本設定(オプション) • PlayMaker Editorウィンドウを好みの大きさ/位 置に調整してレイアウトを保存(次に使うとき に楽になります) • F1キーを押すか右下の「ヒント(F1)」を押して ヒントを消してください。 • 例として次のスライドを参照 30

PlayMakerの基本設定(オプション) • レイアウトの例 31

2.基本操作 32

2.1. ステージの作成 33

今回のワークショップのゴール • Unityチュートリアルの「玉転がし」を PlayMakerで作成する • https://unity3d.com/jp/learn/tutorials/projects /roll-ball-tutorial • WebGL版 • https://developer.cloud.unity3d.com/share/J8WDI2XUz/ 34

• https://unity3d.com/jp/learn/tutorials/projects
• https://developer.cloud.unity3d.com/share/-

ステージの作成 • ステージはPlaneをベースにします。 • Planeを作成してPosition (0, 0, 0)、Scale(2,1,2)とし て名前を「Ground」に変更 • 詳細 • • • • [GameObject]-[3D Object]-[Plane]でPlaneを作成 InspectorのTransformのPositionを(0, 0, 0)に設定 InspectorのTransformのScaleを(2, 1, 2)に設定 HierarchyのPlaneをクリックして少し待つと編集可能に なるので、「Ground」に変更(MacユーザはRETURNキー で、WindowsユーザはF2キーでも編集可能) 35

ステージの作成 • イメージ図 36

プレイヤーの作成 • プレイヤーは球(Sphere)です。 • Sphereを作成してPosition (0, 0.5, 0) として名前を 「Player」に変更 • 詳細 • [GameObject]-[3D Object]-[Sphere]でSphereを作成 • InspectorのTransformのPositionを(0, 0.5, 0)に設定 • HierarchyのSphereをクリックして少し待つと編集可能 になるので、「Player」に変更(MacユーザはRETURNキ ーで、WindowsユーザはF2キーでも編集可能) 37

プレイヤーの作成 • イメージ図 38

フォルダーの作成 • ボールや床などに色をつけたり、テクス チャを貼り付けるにはマテリアル (Material)を使用します。 • マテリアルはファイルとして保存するた めProjectビューで作成します。 • マテリアルを格納するフォルダーを作成 し、そこの保存します。 • Projectビューの[Create]ボタンを押して、 [Folder]を選択しフォルダーを作成 • フォルダーの名前を「Materials」に変更 39

マテリアルの作成 • ProjectビューのMaterialsフォルダーを選択状 態にする(そうするとそのフォルダー内にファ イルが作成できる) • [Create]ボタンでも良いのですが、もう一つの 方法も紹介します。Materialsフォルダーで右 マウスボタンをクリックし、[Create]-[Material] でMaterialファイルを作成します(次ページ参 照) 40

マテリアルの作成 41

マテリアルの作成 • 作成したマテリアルの名 前を「New Material」か らを「Background」に変 更 • InspectorのAlbedoの右側 にある白四角部分をクリ ックしてカラーピッカー を開く • R:0, G:32, B:64 (濃い青色) に設定して閉じる 42

マテリアルの適用 • 作成したBackgroundマテリ アルをProjectビューから SceneビューにあるGround、 またはHierarchyにある Groundのいずれかにドラッ グ&ドロップ(以下、D&D) 43

ライトの調整(オプション) • シーン全体はDirectional Lightで一様に照らされて います。太陽光をイメージすると良い。 • Directional Lightは距離は無関係でX軸、Y軸で太陽 高度と向きを調整します。 • X軸：太陽高度(0度、180度=水平線、90度=真上、190 度以上、あるいは負の値=日没) • Y軸：太陽方位 • 好みに応じて適当に調整しましょう。 • ここではDirectional LightのRotationを(50, 60, 0)と します。 44

シーンの保存 • これまでの作業内容はシー ンとして記録されています。 シーンは適宜保存しましょ う。 • [Ctrl]-[S](Win) / [Cmd][S](Mac)を押してシーンを 保存します。 • シーン名は「MiniGame」と します。 45

シーンの保存 • 今回はシーンファイルは一つしかあ りませんが、複数作成することも考 慮してフォルダーを作成して整理し ます。 • Projectビューで[Create]-[Folder]でフ ォルダーを作成 • 名前を「Scenes」に変更 • MiniGameシーンファイルをScenesフ ォルダーにD&Dして移動 46

これまでのデータ • もしこの時点でうまくいかなかった場合は、 Roll-a-ball_Playmaker.zipに含まれているRoll-aball_Playmaker1 のプロジェクトファイルを開 いて次に備えてください。 • ただし、PlayMakerのパッケージは含まれてい ませんのでプロジェクトファイルを開いたら、 PlayMakerのインストールを行ってください (他のプロジェクトファイルも同様です)。 47

2.2. プレイヤーの移動 48

プレイヤーの移動 • プレイヤーをキーボードで移動できるようにし ます。 • プレイヤーの動きをリアルなボールのような感 じにするために物理エンジン(Rigidbody)を使 用します。 • HierarchyまたはSceneビューのPlayerを選択 • [Component]-[Physics]-[Rigidbody]を実行し、 Rigidbody コンポーネントをアタッチ (次スライド参照) 49

プレイヤーの移動 • イメージ図 50

プレイヤーの移動 • InspectorビューでRigidbody コンポーネントがアタッチ されていることを確認 51

プレイヤーの移動 • 移動はキーボードを使用します • 矢印キーまたはW A S Dキー • キーボードの入力に応じてボールに徐々に力を 加えて移動させます。 • 通常、これらの処理をUnityではスクリプトを 記述時して実現しますが、今回はPlayMakerで 実現します。 52

プレイヤーの移動 • PlayMakerは必ず対象となるGameObjectを指 定する必要があります • Playerゲームオブジェクを選択状態にする • PlayMaker Editorの左側のエリアでマウス右ボタン を押し、[状態遷移を追加]を実行(次スライド参照) 53

プレイヤーの移動 • マウス右ボタンを押した直後の画面 54

PlayMakerの操作の基本 • 「状態遷移を追加」直後の様子 55

用語の解説 • PlayMakerで使用する用語とイメージ 開始イベント (システムイベント) 遷移 ステート (状態) 56

タブの選択 FSMの名前 • FMSの名前の初期設定は 「状態遷移」です。 • PlayMaker Editorの右側 の上にある「状態遷移」 タブを選択し、すぐ下の 欄で名前を変更できます。 • ここではPlayerController に変更します。 FSMの名前 57

スクリプト(イメージ)
using UnityEngine;
using System.Collections;
public class PlayerController : MonoBehaviour {
public float speed;
private Rigidbody rb;
void Start ()
{
rb = GetComponent<Rigidbody>();
}
void FixedUpdate ()
{
float moveHorizontal = Input.GetAxis ("Horizontal");
float moveVertical = Input.GetAxis ("Vertical");
Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical);
rb.AddForce (movement * speed);
}
}

58

変数の定義 • PlayMakerにおける変数は2種類 • ローカル変数(そのFSMのみで使える変数) • グローバル変数(FSM間で利用できる変数) • 変数はInspectorに表示/非表示が選択可能 • Inspectorに表示させるとUnity Editorから直接 値の入力や設定が可能 59

スクリプト(イメージ)
using UnityEngine;
using System.Collections;
public class PlayerController : MonoBehaviour {
public float speed;
private Rigidbody rb;
void Start ()
{
rb = GetComponent<Rigidbody>();
}

float型
インスペクター表⽰示(public)
Rigidbody型
インスペクター⾮非表⽰示(private)

void FixedUpdate ()
{
float moveHorizontal = Input.GetAxis ("Horizontal");
float moveVertical = Input.GetAxis ("Vertical");
Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical);
rb.AddForce (movement * speed);
}
}

60

スクリプト(イメージ)
using UnityEngine;
using System.Collections;
public class PlayerController : MonoBehaviour {
public float speed;
private Rigidbody rb;
void Start ()
{
rb = GetComponent<Rigidbody>();
}

float型変数が2つ

void FixedUpdate ()
{
float moveHorizontal = Input.GetAxis ("Horizontal");
float moveVertical = Input.GetAxis ("Vertical");

Vector3型変数

Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical);
rb.AddForce (movement * speed);
}
}

61

PlayMakerによる変数の定義 • 変数を作成するには、PlayMaker Editorの[変数]タブを選択し、下の[新 しい変数]欄に変数名を入力し、変数 の型を選択して、[追加]ボタンを押し ます。 • すると変数が作成されて、さらに詳 細設定画面が表示されます。 • 続けて変数を作成するときは、一旦 空いている箇所をクリックしてから 行ってください。 62

PlayMakerによる変数の定義 • 右図はPlayMakerで標準的に指定でき る型の一覧 • Rigidbody型は一旦Object型で作成し、 選択した後に表示される詳細設定画面 にて、Object TypeをUnityEngine > Rigidbodyに変更します。 63

PlayMakerによる変数の定義 • 変数を追加した後のイメージ 64

PlayMakerによる変数の定義 • Speedは変数の詳細 設定画面の「イン スペクタ」をチェ ックすると Inspectorビューに 表示されます • 値は好みで変えて ください。ここで は10とします。 65

処理の記述(アクション) • PlayMakerにおける処理は「アクション」と記 述します。 • アクションは「状態(ステート)」に記述します。 • つまり、特定の状態になった時の処理をアクシ ョンとして記述します。 66

スクリプト(イメージ)
using UnityEngine;
using System.Collections;
public class PlayerController : MonoBehaviour {
public float speed;
private Rigidbody rb;
void Start ()
{
rb = GetComponent<Rigidbody>();
}

アクションとして記述する

void FixedUpdate ()
{
float moveHorizontal = Input.GetAxis ("Horizontal");
float moveVertical = Input.GetAxis ("Vertical");
Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical);
rb.AddForce (movement * speed);
}
}

67