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

1

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

2

0. はじめに

3

研修の概要

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

4

使用しているソフトウェアについて

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

1.8.4

5

目次

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

6

1. PlayMaker概要

7

PlayMakerとは• 特徴

• 状態遷移ベースのフロー設計ができる• ロジックをノンコーディングで記述できる• 実行中プログラムの状態を視覚的に把握でき、デバッグ効率が高い

• 既存コードや他アセットとの連携が容易• ユーザー独自の「アクション」の開発が可能• 全てをPlayMakerだけで作成することができる。• C#スクリプトと連携させてプロジェクトの一部にだけ

PlayMakerを適用することもできる

8

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

9

PlayMakerとは•チーム開発における注意点• コードではないのでマージができない(Template

Export機能である程度カバーできる)• 厳密なカプセル化は困難• 自由度が高く、ほぼどんなロジックも書けてしまうため、統一感を図るのが難しい。

10

PlayMakerとは•前述の注意点に対する対策案• 使用範囲を特定シーンに限定する• 既存コードとの連携ルールを明文化する• コードは全てPlayMakerのアクションにして使用する

• 状態遷移制御のみに使用して、ロジックを書かない• iTween制御のみに使用する

11

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

12

FSMとは• 具体例：プレイヤ・キャラクタ

• ステート• 「待機」、「歩き」、「走り」、「ジャンプ中」など

• イベント• 「待機」から「歩き」、「歩き」から「走り」などのへのステート変化を引き起こすもの（一般的にはユーザからの入力操作をトリガとする)

• アクション• 「待機」時の具体的な挙動、「歩き」時の具体的な挙動など各ステートにおける具体的な挙動

• 変数• プレイヤの移動方向(Vector3型)と速度(float型)など

13

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

14

PlayMakerのインストール• またはWeb Browserで以下のURLを表示する

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

• PlayMakerは「エディタ拡張」のため利用者数分のライセンスが必要な点に注意してください(他のカテゴリのアセットはチームで一つだけ購入するだけで全員が利用できる)

15

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

16

PlayMakerのインストール• PlayMaker 1.8.xのインストール• この資料は「1.8. 4」を元に記述されています。

• Unityのメニューに「PlayMaker」が増えているので、[PlayMaker]-[Install PlayMaker]を実行する

17

PlayMakerのインストール•このウィンドウの「Install

PlayMaker」ボタンを押す

18

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

19

PlayMakerのインストール•「Install PlayMaker

1.8.x」ボタンを押す

20

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

21

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

22

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

23

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

24

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

25

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

26

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

27

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

28

PlayMakerの基本設定(オプション)

•表示言語の変更• [PlayMaker]-[PlayMaker

Editor]を実行• 右下の[Preferences]ボタンを押す

29


•右上でGeneralを選び、「Language」を[English]から[Japanese]に変更する

30


• PlayMaker Editorウィンドウを好みの大きさ/位置に調整してレイアウトを保存(次に使うときに楽になります)• F1キーを押すか右下の「ヒント(F1)」を押してヒントを消してください。

•例として次のスライドを参照

31


•レイアウトの例

32

2.基本操作

33

2.1. ステージの作成

34

今回のワークショップのゴール

• Unityチュートリアルの「玉転がし」をPlayMakerで作成する• https://unity3d.com/jp/learn/tutorials/projects

/roll-ball-tutorial• WebGL版• https://developer.cloud.unity3d.com/share/-

J8WDI2XUz/

35

ステージの作成• ステージは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キーでも編集可能)

36

ステージの作成

•イメージ図

37

プレイヤーの作成

• プレイヤーは球(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キーでも編集可能)

38

プレイヤーの作成

•イメージ図

39

フォルダーの作成• ボールや床などに色をつけたり、テクスチャを貼り付けるにはマテリアル(Material)を使用します。

• マテリアルはファイルとして保存するためProjectビューで作成します。

• マテリアルを格納するフォルダーを作成し、そこの保存します。

• Projectビューの[Create]ボタンを押して、[Folder]を選択しフォルダーを作成

• フォルダーの名前を「Materials」に変更

40

マテリアルの作成

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

41

マテリアルの作成

42

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

43

マテリアルの適用

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

44

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

• Y軸：太陽方位• 好みに応じて適当に調整しましょう。• ここではDirectional LightのRotationを(50, 60, 0)とします。

45

シーンの保存

• これまでの作業内容はシーンとして記録されています。シーンは適宜保存しましょう。

• [Ctrl]-[S](Win) / [Cmd]-[S](Mac)を押してシーンを保存します。

• シーン名は「MiniGame」とします。

46

シーンの保存

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

47

これまでのデータ

•もしこの時点でうまくいかなかった場合は、Roll-a-ball_Playmaker.zipに含まれているRoll-a-ball_Playmaker1 のプロジェクトファイルを開いて次に備えてください。

•ただし、PlayMakerのパッケージは含まれていませんのでプロジェクトファイルを開いたら、PlayMakerのインストールを行ってください(他のプロジェクトファイルも同様です)。

48

2.2. プレイヤーの移動

49

プレイヤーの移動

•プレイヤーをキーボードで移動できるようにします。

•プレイヤーの動きをリアルなボールのような感じにするために物理エンジン(Rigidbody)を使用します。• HierarchyまたはSceneビューのPlayerを選択• [Component]-[Physics]-[Rigidbody]を実行し、

Rigidbodyコンポーネントをアタッチ(次スライド参照)

50


•イメージ図

51


• InspectorビューでRigidbodyコンポーネントがアタッチされていることを確認

52


•移動はキーボードを使用します• 矢印キーまたはW A S Dキー

•キーボードの入力に応じてボールに徐々に力を加えて移動させます。

•通常、これらの処理をUnityではスクリプトを記述時して実現しますが、今回はPlayMakerで実現します。

53


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

54


•マウス右ボタンを押した直後の画面

55

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

56

用語の解説

• PlayMakerで使用する用語とイメージ

開始イベント(システムイベント)

ステート(状態)

遷移

57

FSMの名前• FMSの名前の初期設定は「状態遷移」です。

• PlayMaker Editorの右側の上にある「状態遷移」タブを選択し、すぐ下の欄で名前を変更できます。

• ここではPlayerControllerに変更します。

タブの選択

FSMの名前

58

スクリプト(イメージ)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);}

}

59

変数の定義

• PlayMakerにおける変数は2種類• ローカル変数(そのFSMのみで使える変数)• グローバル変数(FSM間で利用できる変数)

•変数はInspectorに表示/非表示が選択可能• Inspectorに表示させるとUnity Editorから直接値の入力や設定が可能

60



public float speed;


void Start (){






}

float型インスペクター表⽰示(public)

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

61



public float speed;


void Start (){






}

float型変数が2つ

Vector3型変数

62

PlayMakerによる変数の定義• 変数を作成するには、PlayMaker

Editorの[変数]タブを選択し、下の[新しい変数]欄に変数名を入力し、変数の型を選択して、[追加]ボタンを押します。

• すると変数が作成されて、さらに詳細設定画面が表示されます。

• 続けて変数を作成するときは、一旦空いている箇所をクリックしてから行ってください。

63

PlayMakerによる変数の定義•右図はPlayMakerで標準的に指定できる型の一覧

• Rigidbody型は一旦Object型で作成し、選択した後に表示される詳細設定画面にて、Object TypeをUnityEngine > Rigidbodyに変更します。

64

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

65

PlayMakerによる変数の定義• Speedは変数の詳細設定画面の「インスペクタ」をチェックするとInspectorビューに表示されます

• 値は好みで変えてください。ここでは10とします。

66

処理の記述(アクション)• PlayMakerにおける処理は「アクション」と記述します。

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

67



public float speed;


void Start (){






}

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

68

処理の記述(アクション)• PlayMaker Editorの「State1」を選択• [状態]タブの「State1」を「Init」に変更

69

処理の記述(アクション)•アクションの一覧は[状態]タブの下にある[アクションブラウザ]ボタンを押すと表示されます。

•慣れるまで大変ですが、上の検索欄に単語を入力すると絞り込みができるのでうまく使ってください。

70

処理の記述(アクション)• アクションブラウザの検索欄に「get com」と入力するとGet Componentアクションが絞り込まれます。

• [状態にアクションを追加]ボタンを押すとアクションが追加されます。

• なお、アクションブラウザは邪魔なら閉じるか、Inspectorの裏に移動すると良いでしょう。

71

処理の記述(アクション)• Get Componentアクションは対象となるゲームオブジェク(Game Object)から値を格納する変数(Store Component)の型に応じたコンポーネント取得して格納します。

• Every Frameは毎フレームごとに実行するかどうかを指定するチェックボックスです。

72

処理の記述(アクション)•赤丸!の記号は指定を誤っていたり、必須パラメータが不足していることを表しています。

何か問題がある

ここに問題がある

73

処理の記述(アクション)• Store Componentの

Noneをクリックしてrbを選択します。rbとは変数の定義でRigidbody型として指定した変数です。

74

処理の記述(アクション)• Every Frameチェックボックスは毎フレーム実行するかどうかを指定します。今回は初期化の一回だけなのでチェックしません。

• Init状態におけるアクションはこれで完成です。

75

実行と状態のリアルタイム確認

• Playボタンを押してプレビューしましょう• PlayMaker Editorの左側のグリーンの枠は現在の状態を表しています。

•変数のrbを選択するとValueにPlayer(Rigidbody)を表示されています。これはPlayにアタッチされているRigidbodyコンポーネントへの参照を得たことを表しています。

•次スライド参照

76


現在の状態

77


•【重要】Playボタンをもう一度押してプレビューを止めてから続きのアクションを書きます。

78

参考:毎フレームアクションの記述

• FixedUpdate()関数の部分を記述します。• Unityには3つのUpdate()関数があります。• Update()

• 一般的なキー入力やゲーム内の様々な判定処理など• FixedUpdate()

• 物理エンジンを用いた処理を記述する• LateUpdate()

• すべてのUpdate()終了後に呼び出される。主にカメラの制御に使用する

79

参考:毎フレームアクションの記述• PlayMakerでは一般的なルールに基づいてアクションが定義されていますので、スクリプトによるプログラミングのルールをそこまで意識しなくても良い構造になっています。

• 例• GetAxisアクション：Update()で実行• AddForceアクション：FixedUpdate()で実行

• 詳細はAssets/PlayMaker/Actions/にあるスクリプトを参照してください。

80

キー入力

•キーボードに限らずマウス、コントローラー、タブレットなど全ての入力処理はすべてInputが行います。

•今回はVirtual Inputによる入力を使用しています。

81

キー入力

• Virtual InputはUnityが用意している汎用的な入力システムです。

•「水平移動」、「垂直移動」、「ボタン1」などキーボード、コントローラ、マウスに関わらず同じように扱うことができるようにしたシステムです。

•初期設定はUnityの[Edit]-[Project Settings]-[Input]で確認ができます。

82

キー入力• Virtual Inputの初期設定• 今回はHorizontal(水平)と

Vertical(垂直)を使用します。• 値は -1から1までの範囲• 二箇所に同じ記述がありますが、上はキーボード(矢印キーとWASDキー)で、下はコントローラの十字キーが設定されています。

83



public float speed;


void Start (){






}

InputのGetAxis()を使⽤用してキーの⼊入⼒力状態を取得。そこで得られた値をそれぞれの変数に代⼊入している。

84

キー入力

• Play Maker Editorでどこか空いているところで右クリックし、「状態の追加」を実行します。

85

キー入力• 「State 1」の名前を「Moving」に変更• アクションブラウザを開く• アクションブラウザの検索欄に「GetAx」と入力し、「Get Axis」を選択• アクションブラウザの[状態にアクションを追加]ボタンを2回押す。

86

キー入力• Axis Nameにそれぞれ「Horizontal」、「 Vertical」と入力。

• 一字一句正確に大文字小文字を間違えずに入力しなければなりませんので、先ほど紹介したInput Settingsからコピーすることをお勧めします。

• StoreにはそれぞれmoveHorizontal、moveVerticalを指定

87

キー入力

•シーンを保存してPlayボタンを押します。

•しかし、状態はInitのままになっています。これはMoving状態に遷移するイベントがないからです。

88

InitからMoving状態への遷移• 【重要】Playボタンをもう一度押してプレビューを止めてから続きのアクションを書きます。

• Init状態を選択し、右クリックして[遷移を追加]-[FINISHED]を実行します。すると状態の下に[遷移イベント]が追加されます。

• FINISHEDイベントはこの状態に記述したアクションをすべて実行した後に発生するイベントです。

• 赤丸!マークはそのイベントが発生した後に遷移する状態の指定が無いためです。正しく指定すると消えます。

89

InitからMoving状態への遷移• InitのFINISHEDをマウスの左ボタンでクリックしながらMovingまで移動して手を離すことで遷移先を指定することできます。

90

InitからMoving状態への遷移•シーンを保存してPlayボタンを押します。

•無事にMoving状態に遷移しました。

•キーの入力状況は変数に格納していますが、まだ球を動かすアクションを記述していないので動きません。

91

移動処理

•今回採用した移動方法は自分自身(球)に「力」を加える方法です。

•力を加えるのはAddForceアクションを使用します。

•力の強さはキーボードから入力した値に外部から指定したSpeedを掛けた値を使用します。

92



public float speed;


void Start (){






}

InputのGetAxis()で得られた値をX⽅方向(左右)とZ⽅方向(前後)に設定してmovementを求める

Movementにspeedを掛けた値だけ⼒力を加える

93

移動処理

• XYZに変数や値を指定してVector3型の変数を新たに作成するアクションはSet Vector3 XYZです。• まずMoving状態を選択し[状態]タブを選択し、[アクションブラウザ]ボタンを押して起動します。• 検索欄にset vector3と入力して、 Set Vector3 XYZ を選択してから[状態にアクションを追加]ボタンを押します。

94

移動処理• アクションの挿入位置はどうなりましたか?• アクションの実行順番は上から下に向かって実行します。

• もし一番上にアクションが挿入された場合、このままではキーボードで入力した値を得る前に計算してしまい誤動作の元になります。

処理順番

95

移動処理

•アクションの順番を入れ替えるには2通りの方法があります。• アクション名(Set Avtor3 XYX、Get Axisなど)をマウスでD&Dする• 歯車メニューの中から「アクションを下に移動」「アクションを先頭に移動」などを選択する

96

移動処理

•歯車アイコンのメニューによる移動

97

移動処理

•このような順番になるように調整してください。

98

移動処理• Set Vector3 XYZを次のように設定してください。

• 各変数の右にある二重線をクリックすると、変数による指定と値による指定を切り替えることができます。

• Yは値による指定に切り替えて0を入力しています。

• 毎フレーム計算をするためにEvery Frameをチェックします。

99

移動処理

• Moving状態にAdd Forceアクションを追加。

•実行順番が後になっていることを確認して適宜調整してください。

•変更点はVectorとEvery Frameです。

100

移動処理

• シーンを保存してPlayボタンを押して動作確認

• これでボールが動くようになりました。• しかし、想定よりとても遅いです。これはSpeedを掛ける処理を行っていなためです。

• Speedパラメータを使用するためにSet Vector3 XYZとAdd Forceの間にアクションを追加します。

101



public float speed;


void Start (){






}

InputのGetAxis()で得られた値をX⽅方向(左右)とZ⽅方向(前後)の⼒力にするためにVector3を求めている

Movementにspeedを掛けた値だけ⼒力を加える

102

移動処理

• Vector3とfloatの掛け算を行うアクションはVector3 Multiplyです。•参考• 足し算：Add• 引き算：Subtract• 掛け算：Multiply• 割り算：Divide

103

移動処理• Set Vector3 XYZとAdd Forceの間にVector3 Multiplyアクションを追加します。• Vector3 Variableを

movementに、Multiply Byをspeedに設定(右の二重線をクリックして変数を使用するのを忘れずに)• Every Frameをチェックします。

104

移動処理

• シーンを保存してPlayボタンを押しましょう。

• これで先ほどの10倍の速度で移動します。

• もし移動しない場合は、Inspectorビューのspeedに10を設定してから再度実行し直してください。

105

補足

•実は変数rb(Rigidbody型)は使用していません。• PlayMaker側で用意しているAddForceアクションの内部で指定されたGameObjectにアタッチされているRigidbodyコンポーネントへの参照を取得しています。(今回は自分自身のGameObject)

106


•もしこの時点でうまくいかなかった場合は、Roll-a-ball_Playmaker.zipに含まれているRoll-a-ball_Playmaker2 のプロジェクトファイルを開いて次に備えてください(別途PlayMakerのインストールもお忘れなく)。

107

2.3. カメラの移動

108

カメラの移動

•ボールの動きに合わせてカメラを移動させます。•イメージとしては常にボールの正面を捉えながら移動します。

• Unityではすべてのキャラクターの移動が終わった後にカメラを動かすためにLateUpdate()が用いられます。

109


public class CameraController : MonoBehaviour {

public GameObject player;

private Vector3 offset;

void Start (){

offset = transform.position - player.transform.position;}

void LateUpdate (){

transform.position = player.transform.position + offset;}

}

110

カメラの移動• HierarchyのMain Cameraを選択し、[PlayMaker]-

[Components]-[Add FSM To Selected Objects]を実行• PlayMaker Editorの[状態遷移]タブの「状態遷移」を「CameraController」に変更• PlayMaker Editorの[状態]タブの「State 1」を「Init」に変更• [変数]タブでplayerとoffset変数を追加。playerは[インスペクタ]をチェックする(インスペクタで値の指定ができる)

111

カメラの移動

•登録のイメージ

112

カメラの移動• Init状態ではPlayerとカメラとの差分を計算して

offset変数に代入しています。あとでこれを使用します。

• C#では「(自GameObjectの)transformのpositionプロパティを取得し、そのまま続けてplayerゲームオブジェクとのtransformのpositionを取得し引き算する」のように複数の処理を一度に書くことができます。

void Start (){

offset = transform.position - player.transform.position;}

113

カメラの移動• PlayMakerでは基本的に一つ一つ丁寧にアクションと指定記述します。• 自GameObjectのPositionを取得して「格納する」(A)• 指定されたGameObjectのPositionを取得して「格納する」(B)• (A)-(B)の結果をoffsetに格納する

• つまり、(A)と(B)の値を格納する変数が別途必要になります。

• ここでは少しだけ処理を効率的に行う方法を紹介します。どうしてこれでうまくいくかご自身で考えてみてください。

114

カメラの移動

• 予め[変数]タブですべての変数を指定しても良いのですが、必要に応じて追加する方法も紹介します。

• Main Cameraを選択し、PlayMaker EditorのInit状態を選択し、Get Positionアクションを追加• Get PositionのVectorをクリックし、[New

Variable…]を実行• New Variableと入力欄が表示されるので[offset]と入力し、[Create Variable]ボタンを押す

115

カメラの移動

116

カメラの移動• もう一つGet Positionを追加• Game Objectを[Specify Game Object]に変更• すぐ下に入力欄が増えるので、変数を指定に切り替える• 変数playerを選択• VectorでNew Variable…]を実行• New Variableと入力欄が表示されるので

[playerPos]と入力し、[Create Variable]ボタンを押す

117

カメラの移動

118

カメラの移動

• Vector3 Subtractアクションを追加(処理順番は後)• Vector3 Variableにoffset、Subtract Vectorに

playerPosを指定

119

カメラの移動

• Trackingステートを追加• InitステートにFINISHED遷移を追加• InitステートのFINISHED遷移からTrackingステートへの遷移を追加

120

カメラの移動

• プレイヤーの現在位置を取得(Get Position)• プレイヤーの現在位置にoffsetを加える(Vector3

Add)• 計算結果を自GameObjectのtransformのPositionに代入する(Set Position)• すべてEvery Frameをチェックする• 後のSet PositionのLate Updateをチェックする

121

カメラの移動

122

カメラの移動

•カメラの高さと向きを調整します。好みで変えても構いません。

123

カメラの移動

• 後にMain CameraのInspectorの Play Maker FSMコンポーネント内のplayerにInspectorのPlayerゲームオブジェクとをD&Dする

124

カメラの移動

•シーンを保存してPlayボタンを押しましょう。• Player(球)を移動させるとカメラが追いかけてくるはずです。うまくいかない場合は何度も見直してみてください。

125


•もしこの時点でうまくいかなかった場合は、Roll-a-ball_Playmaker.zipに含まれているRoll-a-ball_Playmaker3 のプロジェクトファイルを開いて次に備えてください(別途PlayMakerのインストールもお忘れなく) 。

126

2.4.カメラとプレイエリア

127

ステージ枠の作成

•プレイヤー(球)は床のないところに移動すると落ちてしまいます。

•そこで壁を作ります。•まず、空のGameObject(Empty GameObject)を作成し、Position(0, 0, 0)にします。•名前をWallsとします。

128


• Wallsを選択し、[Create]-[3D Object]-[Cube]を作成。名前をWest Wallに変更。• Transformを以下のように変更

129


• West Wallを[Ctrl]-[D](Win) / [Cmd]-[D](Mac)で複製して同様に壁を作成

130

ステージ枠の作成名前 Position RotationWest Wall -‑10, 0, 0 0, 0, 0East Wall 10, 0, 0 0, 0, 0North Wall 0, 0, 10 0, 90, 0South Wall 0, 0, -‑10 0, 90, 0

Scaleはすべて(0.5, 2, 20.5)

131


•シーンを保存してPlayボタンを押しましょう。•これでステージから落ちなくなります。•もしこの時点でうまくいかなかった場合は、

Roll-a-ball_Playmaker.zipに含まれているRoll-a-ball_Playmaker4 のプロジェクトファイルを開いて次に備えてください(別途PlayMakerのインストールもお忘れなく) 。

132

収集アイテムの作成

•プレイヤーが移動して集め得るアイテムを作成します。

•アイテムはCubeを加工したものです。• [GameObject]-[3D Object]-[Cube]でCubeを作成• 名前を「Pick Up」に修正• Transformを以下のように修正

• Position(0, 0.5, 0)• Rotation(45, 45, 45)• Scale(0.5, 0.5, 0.5)

133


•アイテムっぽくするために自転させます•スクリプトのイメージ

using UnityEngine;using System.Collections;

public class Rotator : MonoBehaviour {

void Update () {

transform.Rotate (new Vector3 (15, 30, 45) * Time.deltaTime);}

}

回転する

X軸15度Y軸30度Z軸45度

毎フレーム

クラス名PlayMakerではFSM名

1フレームの時間

134

収集アイテムの作成• Pick Upゲームオブジェクを選択• PlayMaker Editorで右クリックし[状態遷移を追加]を実行• [状態遷移]タブを開いて「状態遷移」を「Rotator」に変更• 「State 1」ステートの名前をRotatingに変更

135

収集アイテムの作成• Rotatingステートを選択し、アクションブラウザからTransformの[Rotate]を追加• X Angle, Y Angle, Z Angleにそれぞれ15, 30, 45を代入• Pre Second(指定した角度は

1秒あたりの角度とみなす)をチェック• Every Frameをチェック(初期設定でチェック済み)

136


• このままPlayをするとプレイヤーと同じ座標なので開始と同時に衝突しておかしな動きになります。

• そのため一時的にPlayerを無効にします。

• Playerを選択して、Inspectorの左上のチェックを外します

137


•シーンを保存してPlayボタンを押しましょう。

•ゆっくりと回転すれば成功です。

138

収集アイテムの作成• 収集アイテムをプレハブにします• プレハブ(Prefab)

• シーン上で様々な設定を施したゲームオブジェクを資産(Asset)にして再利用することができる仕組み。

• PrefabをシーンにD&Dすると、同じ設定のゲームオブジェクを作成できます(インスタンス化するとも言う)。

• ProjectビューのPrefabを変更するとシーンに複製されたゲームオブジェクもまとめて変更できる

• Prefabからシーンに作成されたゲームオブジェクと変更し、Inspectorの上にある「Apply」ボタンを押すと変更した内容をProjectビューのPrefabに適用する。結果、同じPrefabから作成されたゲームオブジェクも同じように変更される

• Prefabからシーンに作成されたゲームオブジェクと変更し、Inspectorの上にある「Apply」ボタンを押すと変更を破棄します。

139

収集アイテムの作成• PlayMakerを使用しているゲームオブジェクトにおけるPrefabの注意点• PlayMakerは基本的にPrefabから作られたGameObject(インスタンス)を編集できません。ProjectビューにあるPrefabを編集してください。

• 誤って編集しようとすると下図のようなダイアログが表示されます。その場合は[Edit Prefab]を選択してPrefabを編集してください。

140


• Prefabの作成• Projectビューで「Prefabs」フォルダーを作成• HierarchyビューのPick Upゲームオブジェクとを

ProjectビューのPrefabsフォルダーにD&D

141


•収集アイテムを合計12個作成•詳細(1/2)• 収集アイテムをまとめて管理するために空のゲームオブジェクトを作成([GameObject]-[Create Empty]。名前：Pick UpsPosition: (0, 0, 0)• Pick UpをPickUpsの子にする

142


•収集アイテムを合計12個作成•詳細(2/2)• Pick Upを選択し、複製([Ctrl]-[D](Win)

/ [Cmd]-[D](Mac))を11回行う

143


•それぞれ適当に並べてください。

•時計をイメージして並べるといいでしょう。

144

収集アイテムの作成• 白いままでは寂しいので色をつけます。• ProjectビューのMaterialsフォルダーにあるBackgroundを選択し、複製([Ctrl]-[D](Win) / [Cmd]-[D](Mac))して、名前をPick Upに変更

• Pick UpマテリアルのAlbedoのカラーピッカーを開いてR:255, G:255, B:0に変更

• Pick UpマテリアルをPick UpプレハブにD&D

145

収集アイテムの作成• シーンを保存してPlayボタンを押しましょう。

• すべての収集アイテムがゆっくりと回転すれば成功です。• もしこの時点でうまくいかなかった場合は、 Roll-

a-ball_Playmaker.zipに含まれているRoll-a-ball_Playmaker5 のプロジェクトファイルを開いて次に備えてください(別途PlayMakerのインストールもお忘れなく) 。

146

3. 衝突判定

147

3.1. Unityにおける衝突判定

148

衝突とは

• Unityにおける衝突はCollider同士がぶつかった状態を表す

• 静的コライダー(各種コライダ＋Rigidbodyコンポーネントなし)• 床、壁など動かない要素

• 動的コライダー(各種コライダ＋ Rigidbodyコンポーネントあり)• プレイヤーのように動く要素

149

衝突の発生条件

•静的コライダーと静的コライダー• 衝突イベントが発生しない

•静的コライダーと動的コライダー• 衝突イベントが発生する

•動的コライダーと動的コライダー• 衝突イベントが発生する

150

衝突の発生条件(補足)• RigidbodyコンポーネントのIs Kinematicオプション• Kinematicオン

• スクリプトによる制御だけで動かす。

• 衝突判定はKinematicオフの動的コライダーのみ発生

• 主な利用用途• スライドドア、ラグドールなど

151

衝突イベント

•衝突条件が成立した時に呼び出されるイベント• OnCollisionEnter

• コライダーが触れた• OnCollisionStay

• 衝突中• OnCollisionExit

• コライダーが離れた

152

トリガーイベント• 衝突ではなく、自動ドアやトラップのような見えないスイッチに触れた時に発生するイベントをトリガーイベントと呼んでいます

• Unityでは各コライダにある「Is Trigger」プロパティをチェックすると、衝突イベントが発生せずにすり抜けてしまい、トリガーイベントが発生します

153

トリガーイベント

•トリガー条件が成立した時に呼び出されるイベント• OnTriggerEnter

• トリガーに触れた• OnTriggerStay

• トリガーに触れている中

• OnTriggerExit• トリガーから離れた

154

参考: コライダーの衝突に関する詳細情報

• Unityオンラインマニュアル• https://docs.unity3d.com/ja/current/Manual/Collid

ersOverview.html衝突アクションマトリクス

155

収集アイテムとの衝突判定

•収集アイテムと触れた時、反発しては困るので「トリガーイベント」を使用します。

•トリガーイベントを発生させるためにPick UpプレハブのBox ColliderのIs Triggerをチェックします

156

タグの設定• Pick Upプレハブを選択し、InspectorのTagをクリックして、[Add

Tag…]を実行• Tag & Layers Setting画面のTagsの下にある「+」ボタンを押して「Pick Up」と入力し、[Save]ボタンを押す

157

3.2. Playmakerにおける衝突処理

158

トリガーイベント• Playerゲームオブジェクトが非アクティブのままなので、アクティブに戻します。• Playerゲームオブジェクトを選択し、

PlayMakerEditorで右クリックして[状態を追加]を実行• 「State 1」を「Picking Up」に変更• Picking Upステートを選択し、右クリックして[グローバル遷移を追加]-[System Events]-[TRIGGER ENTER]を実行

159


160


161

参考:ステートの色を変更•ステートを右クリックして[色の設定]の中にある色を選ぶと、ステートの背景色を変更することができます。

162

トリガーイベント後の処理

void OnTriggerEnter(Collider other) {

if (other.gameObject.CompareTag ("Pick Up")){

other.gameObject.SetActive (false);}

}

トリガーイベントが発⽣生

トリガー元の情報が格納された変数

トリガー元のTagが“Pick Up”か調べる

トリガー元を⾮非アクティブにする

163

トリガーイベント後の処理• Picking UpステートにGet Trigger Infoアクションを追加• Game Object Hitに新規に作成した「other」変数を設定

164

トリガーイベント後の処理• 続けて、Game Object Compare Tagアクションを追加• Game Objectにotherを設定• TagにPick Upを設定

165


• Compera関連のアクションは何かの比較を行い、それが合っている時(True)と、合っていない時(False)でそれぞれイベントを設定することができます。

•これまで扱ってきたイベントはどれも事前にPlayMakerが用意した物でしたが、独自にイベントを作ることもできます。

166


• [イベント]タブをクリック

•このFSMで使用しているイベントの一覧が表示されます

167

トリガーイベント後の処理• [イベントを追加]に「Get Item」と入力してEnterキー(MacはReturnキー)を押すと独自イベントを追加することができます。

168


• [状態]タブに戻り、Get Object Compare TagのTrue Eventをクリックして「Get Item」を選択•すると警告が出るので赤字の部分をクリックすると状態遷移が追加されます。

ここをクリック

169


まだ遷移先のステートが設定されていないので⾚赤丸!が

付いている

170

トリガーイベント後の処理• PlayMaker Editorの空いている場所で右クリックし[状態の追加]を実行

• ステート名を「State 1」から「Getting Item」に変更

• Getting Itemステートを選択してActivate Game Objectアクションを追加

• Game Objectを「Specify Game Object」に変更し、other変数を指定する

• Activateのチェックを外す

171


• PlayerController FSMの全体図

172


• シーンを保存してPlayボタンを押しましょう。

• アイテムを取るとGetting Itemステートで止まってしまいます。

• Getting Itemのアクションが終了したらMovingに戻るようにしましょう。

173

トリガーイベント後の処理• Getting Itemを選択し、右クリックで[遷移を追加]-

[FINISHED]を実行• 追加されたFINISHED遷移をクリックしながら

MovingステートにD&D

174

トリガーイベント後の処理• シーンを保存してPlayボタンを押しましょう。

• 収集アイテムに触れるとアイテムが消えるのと、プレイヤーの操作を続けることできるようになれば成功です。• もしこの時点でうまくいかなかった場合は、 Roll-


175

4. Unity UIとの連携

176

4.1. Add-Onの使い方(ecosystem)

177

Add-Onパッケージとは• 収集アイテム数の表示用にuGUIを利用します。• uGUIは正式にはUnity UIと呼ばれ、Unity4.6から追加された機能です。

• 従来のOnGUIメソッドによるUI表示の弱点を克服し、2Dはもちろん、3Dオブジェクトしても配置ができるなど非常に汎用性の高いUIパッケージです。• PlayMakerは標準でuGUIに対応していないため

Add-Onパッケージを使用します。

178

Add-Onのダウンロード• Add-Onを使うには[PlayMaker]-[Addons]-

[Download Addons]を実行します。

179

Add-Onのダウンロード• Webブラウザが起動します。表示されたページの一番上にある「Ecosystem Browser」のリンクをクリックします。

180

Add-Onのダウンロード•次のページの

EcosystemBrowserPackageをクリックしてダウンロードします。

181

Add-Onのインポート•ダウンロードが完了したらファイルを開き、Unityにインポートします。

182

Add-Onのインポート• Add-Onのインポートが完了したら、

[PlayMaker] -[Addons]-[Ecosystem]-[Ecosystem Browser]を実行してください。

183

Add-Onのインポート• [Use the ecosystem!]ボタンを押す

184

Unity UI連携パッケージのインストール

• Ecosystem browserの検索欄にuguiと入力して[Search]ボタンを押す

•「u GUI Proxy Full」にマウスを移動させると[Get]ボタンが表示されるのでそれを押す

185

Unity UI連携パッケージのインストール

•インストールの様子

186

4.2. Add-Onで追加できる主な機能一覧

187

Add-onパッケージ• Add-onのダウンロードページには様々なアドオンが紹介されています。

• Unity Action Packs• Blend Shapes• Shuriken• Unity UI(今回はこちらを使用)• Unity Pathfinding• IOS Game Controller

188

Add-onパッケージ• Third Party Tools• 2D Toolkit• A* pathfinding• Final IK• MegaFiers• PoolManager• Third Person Controller• など

189

Add-onパッケージ• Starter Kits• 3D Infinite Runner for Playmaker• Platforming Starter Kit• Playmaker Essentials Pack• など

190

Add-onパッケージ• Extensions• ArrayMaker• Comms Tool• PlayerPrefs X• TimeLine for PlayMaker• DataMaker• など

191

4.3. UIのTextを変更

192

得点表示用のUI• uGUIをPlayMakerから使うときは[PlayMaker

uGui] -[Prefabs]-[Playmaker UGui]プレハブをシーンに追加します。

193

得点表示用のUI•体力表示のTextはHierarchy Viewから[Create]-

[UI]-[Text]で作成します。• CanvasやEventSystemは自動的に生成されるものなので削除しないようにしてください。

194

得点表示用のUI• CanvasのCanvas Scaleを以下のように修正してください。これにより端末の解像度に依存しないUIが作成できます。

195

得点表示用のUI• Game Viewの左上の「Free Aspect」を16:9などに変更します。

196

得点表示用のUI• Canvas/Textをダブルクリックすると非常に大きな白い枠が表示されています。この白い枠はUI専用の枠でGame Viewには表示されません。

197

得点表示用のUI• TextをScoreに名前を変更。• ScoreのRect Transformコンポーネントを次のように修正

注意!

198

得点表示用のUI• ScoreのTextコンポーネントを次のように修正

199

得点表示用のUI• Gameビューのイメージ

200

クリアメッセージ用のUI• HierarchyのCanvasを選択し、右クリックで

[UI]-[Text]を実行(Canvasの下にTextが作成される)• TextをWinに変更

201

クリアメッセージ用のUI• WinのRect Transformコンポーネントを次のように修正

202

クリアメッセージ用のUI• ScoreのTextコンポーネントを次のように修正

203

クリアメッセージ用のUI• Gameビューのイメージ

204

スクリプト(イメージ)using UnityEngine;using UnityEngine.UI;using System.Collections;


public float speed;public Text countText;public Text winText;

private Rigidbody rb;private int count;

void Start (){

rb = GetComponent<Rigidbody>();count = 0;SetCountText ();winText.text = "";

}

<<< 続く >>>

Unity UIのパッケージ名

スコアおよびクリアメッセージ⽤用

アイテムを取得した数

初期化処理

205

スクリプト(イメージ)<<< 続き >>>





void OnTriggerEnter(Collider other) {

if (other.gameObject.CompareTag ( "Pick Up")){

other.gameObject.SetActive (false);count = count + 1;SetCountText ();

}}

<<< 続く >>>

アイテムを取得した数を1つ増やして、得点を更新

206

スクリプト(イメージ)void SetCountText (){

countText.text = "Count: " + count.ToString ();if (count >= 12){

winText.text = "You Win!";}

}}

“Count: 取得数”という⽂文字列を⽂文字列を表⽰示取得数が12以上ならクリアメッセージを表⽰示

207

Unity UIのText用変数の追加• Playerを選択し、PlayMaker

Editorの[変数]タブを開く•変数名: score、型:GameObjectを新規作成•インスペクタをチェック

208

Unity UIのText用変数の追加•変数名: win、型: GameObjectを新規作成

•インスペクタをチェック

209

count変数の追加•変数名:count、型: intを追加

210

インスペクタによる指定• PlayerのInspectorのPlay Maker

FSMのscoreの右にある◎をクリックして表示されたダイアログのScoreを選択

• これはSceneのScoreゲームオブジェクトをD&Dしてもできます。どちらの操作でも構いません。

• 同様にwinも設定してください。

211

初期化処理(Initステート)• Initステートを選択•アクションブラウザからSet Int Valueを追加• Int Variableにcountを設定

• Int Valueは0(初期値)

212

初期化処理(Initステート)• InitステートにおいてアクションブラウザからU GUI Text Set Textを追加•図を参照して値を設定

213

初期化処理(Initステート)• InitステートにおいてアクションブラウザからU GUI Text Set Textを2つ追加•図を参照して値を設定•変数winのText欄にはスペースを一つ入力してください

214

初期化処理(Initステート)•シーンを保存して

Playボタンを押しましょう。

•左上に「Count: 0」、Winは空欄になれば成功です。

215

アイテムの取得(Getting Item)• Getting Itemステートを選択し、Int Addアクションを追加

•図を参考に設定

216

アイテムの取得(Getting Item)• Getting Itemステートを選択し、Convert Int To StringとBuild Stringアクションを追加


“:”の後ろに空⽩白を1つ追加する

217

アイテムの取得(Getting Item)• Getting Itemステートを選択し、

U GUI Text Set Textを追加•図を参考に設定

218

アイテムの取得(Getting Item)• Getting Itemステートを選択し、

Int Compareアクションを追加•図を参考に設定

219

クリア(Winステート)• Winステートを追加• Getting ItemのWinイベントからWinステートへの遷移を追加


220

基本システム完成!• シーンを保存してPlayボタンを押しましょう。

• アイテムを取得するとCountが増えていき、全て回収(12個)すると”You Win!”のメッセージを表示します。• もしこの時点でうまくいかなかった場合は、 Roll-


221

4.4. UIのボタンに対応

222

Unity UIのボタン対応• Unity UIのボタンが押されるとOnClick()呼ばれるイベントが発生します。

• PlayMakerではu GUI Proxy FullのAdd-onパッケージをインストールすると「ON CLICK」という名前のカスタムイベントが発生します。

223

処理概要

•実現したい内容• 全てのアイテムを回収後に[Restart]ボタンを表示• [Restart]ボタンが押されたらシーンを再度読み込む

224

処理概要• Unity UIボタンを追加

• Play Maker U Gui Component Proxyを追加(FSM内でUnity UIのイベントを受信する代理スクリプト)

• Restart FSMを追加• Restartステートを追加• カスタムイベント > UGUI > ON CLICKイベントを追加• RestartステートにLoad Levelアクションを追加し、Load Nameに「MiniGame」と入力

• PlayerController FSMの修正• restart変数(GameObject型)を追加、インスペクタに表示• Initステート

• [Restart]ボタンを非アクティブにする• Winステート

• [Restart]ボタンをアクティブにする• InspectorからRestartボタンへの参照を設定

• UnityのBuild SettingsにMiniGameシーンを追加

225

Restartボタン• HierarchyのCanvasを選択し、右クリックを押して[UI]-[Button]を実行し、Buttonを作成

• Buttonを「Restart」に名前を変更

• RestartボタンのRect Transformを右図のように調整

• Canvas/Restart/TextのTextコンポーネントのTextプロパティを「Button」から「Restart」に変更

226

Restartボタン• Unity UIのイベントをPlayMaker FSM内で受け取るためにPlay Maker U Gui Component Proxyコンポーネントを追加(Inspectorの[Add Component]ボタンを押して検索するのが比較的簡単)

227

Restartボタン• Canvas/Restartを選択し、[PlayMaker]-

[Components]-[Add FSM to Selected Object]を実行• PlayMaker Editorで操作

• State 1をInitに変更。特にアクションは無し• 状態を追加。名前をRestartに変更• Restartステートを選択し、右クリックで[グローバル遷移を追加]-[カスタムイベント]-[UGUI]-[ON CLICK]を実行

• RestartステートにLoad Levelアクションを追加し、Load LevelのLevel Nameに「MiniGame」と入力

228

Restartボタン• ON CLICKイベントの追加画面

229

Restartボタン• Restart FSM

230

Restartボタン• Restartステート

231

PlayerController FSMの修正• Restart(GameObject型)変数を追加し、「インスペクタ」プロパティをチェックする

• InspectorのPlay Maker FSMコンポーネントのrestartにRestartボタンをD&Dする

232

PlayerController FSMの修正•イメージ図

233

PlayerController FSMの修正• InitステートにActive Game Objectアクションを追加(今回の処理は順番に依存しないため場所は任意)•下図のように設定

234

PlayerController FSMの修正• WinステートにActive Game Objectアクションを追加(今回の処理は順番に依存しないため場所は任意)•下図のように設定

235

Build Settingsの修正•シーンをロードするにためにはあらかじめBuild Settingsに使用するシーンを登録する必要があります。この設定は名前の通り、ビルドするために使用するものです。

• [File]-[Build Settings…]を実行

236

Build Settingsの修正• ProjectビューのScenes/MiniGameシーンファイルをBuild Settingsの上の方にD&D

237

完成• シーンを保存してPlayボタンを押しましょう。

• 全てのアイテムを回収してRestartボタンを押してみましょう。シーンが再度読み込まれました。

• もし、Restartしたあとライティングがおかしい場合は、[Window]-[Lighting]-[Settings]を実行して、Lightingビューの一番下にある[Auto Generate]のチェックを外して、[Generate Lighting]ボタンを押してからBuildしてみましょう。

• あとはBuild Settingsから好きなプラットフォームに切り替えてBuildしてみましょう。

• 終バージョンはRoll-a-ball_Playmaker.zipに含まれているRoll-a-ball_Playmaker8 のプロジェクトファイルです(別途PlayMakerのインストールもお忘れなく) 。

238

5. FAQ

239

FAQ• Q1. 実行画面(Gameビューやビルドしたアプリなど)に表示されるPlayMakerのステータスを消したい

• A1. PlayMaker Editorの[環境設定]の[ゲームビューニ状態ラベルを表示]のチェックを外してください

240

FAQ• Q2.他にどんなことができるの?• A2.公式サイトを見ましょう。このワークショップが終わった後なら自力で読めると思います。• チュートリアル

• http://www.hutonggames.com/tutorials_game_design_with_playmaker.php

• リファレンスマニュアル• https://hutonggames.fogbugz.com/default.asp?W1

241

FAQ• Q3. 同じようなFSMを何度も入力したくない。• A3. テンプレート機能を使えばFSMの保存/読み込みができますので、似たようなFSMのコピーができます。

242

FAQ• Q4. Mecanim(Animator)制御はできるの?• A4. Add-onがあります(何故か一覧に無い)• https://hutonggames.fogbugz.com/?W1031

243

FAQ• Q5. C#/UnityScriptの方が分かりやすくない?• A5. 混合も出来ますので、うまく使い分けてください(例えば敵キャラのAI部分にだけPlayMakerを使ってみるとか)。

• その他、性能に関する情報やiOS/Androidなどの情報は公式FAQをご覧ください。• https://hutonggames.fogbugz.com/default.asp?W541

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

Technology