【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング
•
47 likes•58,751 views
7月29日開催のUnity道場資料です。 講師：石井勇一（ユニティ・テクノロジーズ・ジャパン合同会社）
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to 【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング
Similar to 【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング (20)
More from Unity Technologies Japan K.K.
More from Unity Technologies Japan K.K. (20)
【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング
- 2. 2 0. はじめに
- 4. 4 使用しているソフトウェアについて ソフトウェア名 バージョン Unity 5.6.0f3(5.6.2f1でも動作確認済み) PlayMaker https://www.assetstore.unity3d.com/jp/#!/content/368 1.8.4
- 5. 5 目次 1. PlayMaker概要 2. 基本操作 3. 衝突判定 4. Unity UIとの連携
- 7. 7 PlayMakerとは • 特徴 • 状態遷移ベースのフロー設計ができる • ロジックをノンコーディングで記述できる • 実行中プログラムの状態を視覚的に把握でき、デバッグ 効率が高い • 既存コードや他アセットとの連携が容易 • ユーザー独自の「アクション」の開発が可能 • 全てをPlayMakerだけで作成することができる。 • C#スクリプトと連携させてプロジェクトの一部にだけ PlayMakerを適用することもできる
- 8. 8 PlayMakerとは • 導入における効果 • モック製作/ラピッドプロトタイピング • UI/状態遷移の管理システム • Tweenアニメーションの制御 • AIの思考ルーチン • Unity Engine APIの学習
- 9. 9 PlayMakerとは • チーム開発における注意点 • コードではないのでマージができない(Template Export機能である程度カバーできる) • 厳密なカプセル化は困難 • 自由度が高く、ほぼどんなロジックも書けてしまう ため、統一感を図るのが難しい。
- 10. 10 PlayMakerとは • 前述の注意点に対する対策案 • 使用範囲を特定シーンに限定する • 既存コードとの連携ルールを明文化する • コードは全てPlayMakerのアクションにして使用す る • 状態遷移制御のみに使用して、ロジックを書かない • iTween制御のみに使用する
- 11. 11 FSMとは • FSM（Finite State Machine:有限状態機械)と呼 ばれるUMLの状態遷移図に似た形式で記述 • 主な構成要素 • ステート：オブジェクトの状態 • イベント：状態遷移を起こすトリガーとなるもの • アクション：ある状態におけるオブジェクトの振る 舞い • 変数：FSMが扱うオブジェクトや数値などの値を 格納する ※有限状態機械（英: finite state machine, FSM）は別の呼び方で有限オートマトン（英: finite automaton, FA)もある
- 12. 12 FSMとは • 具体例：プレイヤ・キャラクタ • ステート • 「待機」、「歩き」、「走り」、「ジャンプ中」など • イベント • 「待機」から「歩き」、「歩き」から「走り」などのへのス テート変化を引き起こすもの（一般的にはユーザからの入力 操作をトリガとする) • アクション • 「待機」時の具体的な挙動、「歩き」時の具体的な挙動など 各ステートにおける具体的な挙動 • 変数 • プレイヤの移動方向(Vector3型)と速度(float型)など
- 14. 14 PlayMakerのインストール • またはWeb Browserで以下のURLを表示する • https://www.assetstore.unity3d.com/jp/#!/content/368 • PlayMakerは「エディタ拡張」のため利用者数分のラ イセンスが必要な点に注意してください(他のカテゴリ のアセットはチームで一つだけ購入するだけで全員が 利用できる)
- 16. 16 PlayMakerのインストール • PlayMaker 1.8.xのインストール • この資料は「1.8. 4」を元に記述されています。 • Unityのメニューに「PlayMaker」が増えている ので、[PlayMaker]-[Install PlayMaker]を実行す る
- 20. 20 PlayMakerのインストール • 「I Made a Backup. Go Ahead!」ボタンを押す
- 23. 23 PlayMakerのインストール • 似たようなダイアログが出ます。この画面が出 たら「I Made a Backup. Go Ahead!」ボタンを 押す
- 28. 28 PlayMakerの基本設定(オプション) • 表示言語の変更 • [PlayMaker]-[PlayMaker Editor]を実行 • 右下の[Preferences]ボタ ンを押す
- 30. 30 PlayMakerの基本設定(オプション) • PlayMaker Editorウィンドウを好みの大きさ/位 置に調整してレイアウトを保存(次に使うとき に楽になります) • F1キーを押すか右下の「ヒント(F1)」を押して ヒントを消してください。 • 例として次のスライドを参照
- 32. 32 2.基本操作
- 33. 33 2.1. ステージの作成
- 34. 34 今回のワークショップのゴール • Unityチュートリアルの「玉転がし」を PlayMakerで作成する • https://unity3d.com/jp/learn/tutorials/projects/rol l-ball-tutorial • WebGL版 • https://developer.cloud.unity3d.com/share/- J8WDI2XUz/
- 35. 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キーでも編集可能)
- 37. 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キーでも編集可能)
- 39. 39 フォルダーの作成 • ボールや床などに色をつけたり、テクス チャを貼り付けるにはマテリアル (Material)を使用します。 • マテリアルはファイルとして保存するた めProjectビューで作成します。 • マテリアルを格納するフォルダーを作成 し、そこの保存します。 • Projectビューの[Create]ボタンを押して、 [Folder]を選択しフォルダーを作成 • フォルダーの名前を「Materials」に変更
- 41. 41 マテリアルの作成
- 42. 42 マテリアルの作成 • 作成したマテリアルの名 前を「New Material」か らを「Background」に変 更 • InspectorのAlbedoの右側 にある白四角部分をクリ ックしてカラーピッカー を開く • R:0, G:32, B:64 (濃い青 色)に設定して閉じる
- 44. 44 ライトの調整(オプション) • シーン全体はDirectional Lightで一様に照らされて います。太陽光をイメージすると良い。 • Directional Lightは距離は無関係でX軸、Y軸で太陽 高度と向きを調整します。 • X軸：太陽高度(0度、180度=水平線、90度=真上、190 度以上、あるいは負の値=日没) • Y軸：太陽方位 • 好みに応じて適当に調整しましょう。 • ここではDirectional LightのRotationを(50, 60, 0)と します。
- 45. 45 シーンの保存 • これまでの作業内容はシー ンとして記録されています。 シーンは適宜保存しましょ う。 • [Ctrl]-[S](Win) / [Cmd]- [S](Mac)を押してシーンを 保存します。 • シーン名は「MiniGame」と します。
- 46. 46 シーンの保存 • 今回はシーンファイルは一つしかあ りませんが、複数作成することも考 慮してフォルダーを作成して整理し ます。 • Projectビューで[Create]-[Folder]でフ ォルダーを作成 • 名前を「Scenes」に変更 • MiniGameシーンファイルをScenesフ ォルダーにD&Dして移動
- 47. 47 これまでのデータ • もしこの時点でうまくいかなかった場合は、 Roll-a-ball_Playmaker.zipに含まれているRoll- a-ball_Playmaker1 のプロジェクトファイルを 開いて次に備えてください。 • ただし、PlayMakerのパッケージは含まれてい ませんのでプロジェクトファイルを開いたら、 PlayMakerのインストールを行ってください (他のプロジェクトファイルも同様です)。
- 48. 48 2.2. プレイヤーの移動
- 49. 49 プレイヤーの移動 • プレイヤーをキーボードで移動できるようにし ます。 • プレイヤーの動きをリアルなボールのような感 じにするために物理エンジン(Rigidbody)を使 用します。 • HierarchyまたはSceneビューのPlayerを選択 • [Component]-[Physics]-[Rigidbody]を実行し、 Rigidbody コンポーネントをアタッチ (次スライド参照)
- 52. 52 プレイヤーの移動 • 移動はキーボードを使用します • 矢印キーまたはW A S Dキー • キーボードの入力に応じてボールに徐々に力を 加えて移動させます。 • 通常、これらの処理をUnityではスクリプトを 記述時して実現しますが、今回はPlayMakerで 実現します。
- 53. 53 プレイヤーの移動 • PlayMakerは必ず対象となるGameObjectを指 定する必要があります • Playerゲームオブジェクを選択状態にする • PlayMaker Editorの左側のエリアでマウス右ボタン を押し、[状態遷移を追加]を実行(次スライド参照)
- 57. 57 FSMの名前 • FMSの名前の初期設定は 「状態遷移」です。 • PlayMaker Editorの右側 の上にある「状態遷移」 タブを選択し、すぐ下の 欄で名前を変更できます。 • ここではPlayerController に変更します。 タブの選択 FSMの名前
- 58. 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. 59 変数の定義 • PlayMakerにおける変数は2種類 • ローカル変数(そのFSMのみで使える変数) • グローバル変数(FSM間で利用できる変数) • 変数はInspectorに表示/非表示が選択可能 • Inspectorに表示させるとUnity Editorから直接 値の入力や設定が可能
- 60. 60 スクリプト(イメージ) 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); } } float型 インスペクター表示(public) Rigidbody型 インスペクター非表示(private)
- 61. 61 スクリプト(イメージ) 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); } } float型変数が2つ Vector3型変数
- 62. 62 PlayMakerによる変数の定義 • 変数を作成するには、PlayMaker Editorの[変数]タブを選択し、下の[新 しい変数]欄に変数名を入力し、変数 の型を選択して、[追加]ボタンを押し ます。 • すると変数が作成されて、さらに詳 細設定画面が表示されます。 • 続けて変数を作成するときは、一旦 空いている箇所をクリックしてから 行ってください。
- 63. 63 PlayMakerによる変数の定義 • 右図はPlayMakerで標準的に指定でき る型の一覧 • Rigidbody型は一旦Object型で作成し、 選択した後に表示される詳細設定画面 にて、Object TypeをUnityEngine > Rigidbodyに変更します。
- 66. 66 処理の記述(アクション) • PlayMakerにおける処理は「アクション」と記 述します。 • アクションは「状態(ステート)」に記述します。 • つまり、特定の状態になった時の処理をアクシ ョンとして記述します。
- 67. 67 スクリプト(イメージ) 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); } } アクションとして記述する
- 68. 68 処理の記述(アクション) • PlayMaker Editorの 「State1」を選択 • [状態]タブの「State1」 を「Init」に変更
- 70. 70 処理の記述(アクション) • アクションブラウザの検索欄に 「get com」と入力するとGet Componentアクションが絞り込 まれます。 • [状態にアクションを追加]ボタ ンを押すとアクションが追加さ れます。 • なお、アクションブラウザは邪 魔なら閉じるか、Inspectorの裏 に移動すると良いでしょう。
- 71. 71 処理の記述(アクション) • Get Componentアクショ ンは対象となるゲームオ ブジェク(Game Object) から値を格納する変数 (Store Component)の型 に応じたコンポーネント 取得して格納します。 • Every Frameは毎フレー ムごとに実行するかどう かを指定するチェックボ ックスです。
- 74. 74 処理の記述(アクション) • Every Frameチェックボ ックスは毎フレーム実 行するかどうかを指定 します。今回は初期化 の一回だけなのでチェ ックしません。 • Init状態におけるアクシ ョンはこれで完成です。
- 75. 75 実行と状態のリアルタイム確認 • Playボタンを押してプレビューしましょう • PlayMaker Editorの左側のグリーンの枠は現在 の状態を表しています。 • 変数のrbを選択するとValueに Player(Rigidbody)を表示されています。これは PlayにアタッチされているRigidbodyコンポー ネントへの参照を得たことを表しています。 • 次スライド参照
- 78. 78 参考:毎フレームアクションの記述 • FixedUpdate()関数の部分を記述します。 • Unityには3つのUpdate()関数があります。 • Update() • 一般的なキー入力やゲーム内の様々な判定処理など • FixedUpdate() • 物理エンジンを用いた処理を記述する • LateUpdate() • すべてのUpdate()終了後に呼び出される。主にカメラの 制御に使用する
- 79. 79 参考:毎フレームアクションの記述 • PlayMakerでは一般的なルールに基づいてアクシ ョンが定義されていますので、スクリプトによる プログラミングのルールをそこまで意識しなくて も良い構造になっています。 • 例 • GetAxisアクション：Update()で実行 • AddForecアクション：FixedUpdate()で実行 • 詳細はAssets/PlayMaker/Actions/にあるスクリプ トを参照してください。
- 80. 80 キー入力 • キーボードに限らずマウ ス、コントローラー、タ ブレットなど全ての入力 処理はすべてInputが行い ます。 • 今回はVirtual Inputによる 入力を使用しています。
- 81. 81 キー入力 • Virtual InputはUnityが用意している汎用的な入 力システムです。 • 「水平移動」、「垂直移動」、「ボタン1」な どキーボード、コントローラ、マウスに関わら ず同じように扱うことができるようにしたシス テムです。 • 初期設定はUnityの[Edit]-[Project Settings]- [Input]で確認ができます。
- 82. 82 キー入力 • Virtual Inputの初期設定 • 今回はHorizontal(水平)と Vertical(垂直)を使用します。 • 値は -1から1までの範囲 • 二箇所に同じ記述がありますが、 上はキーボード(矢印キーと WASDキー)で、下はコントロ ーラの十字キーが設定されてい ます。
- 83. 83 スクリプト(イメージ) 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); } } InputのGetAxis()を使用してキーの入力状態を取得。 そこで得られた値をそれぞれの変数に代入している。
- 84. 84 キー入力 • Play Maker Editorでどこか空いているところで 右クリックし、「状態の追加」を実行します。
- 85. 85 キー入力 • 「State 1」の名前を 「Moving」に変更 • アクションブラウザを開く • アクションブラウザの検索 欄に「GetAx」と入力し、 「Get Axis」を選択 • アクションブラウザの[状 態にアクションを追加]ボ タンを2回押す。
- 86. 86 キー入力 • Axis Nameにそれぞれ 「Horizontal」、 「 Vertical」と 入力。 • 一字一句正確に大文字小文字を 間違えずに入力しなければなり ませんので、先ほど紹介した Input Settingsからコピーするこ とをお勧めします。 • Storeにはそれぞれ moveHorizontal、moveVertical を指定
- 88. 88 InitからMoving状態への遷移 • 【重要】Playボタンをもう一度押して プレビューを止めてから続きのアクシ ョンを書きます。 • Init状態を選択し、右クリックして[遷 移を追加]-[FINISHED]を実行します。 すると状態の下に[遷移イベント]が追 加されます。 • FINISHEDイベントはこの状態に記述 したアクションをすべて実行した後に 発生するイベントです。 • 赤丸!マークはそのイベントが発生した 後に遷移する状態の指定が無いためで す。正しく指定すると消えます。
- 90. 90 InitからMoving状態への遷移 • シーンを保存してPlayボタ ンを押します。 • 無事にMoving状態に遷移 しました。 • キーの入力状況は変数に格 納していますが、まだ球を 動かすアクションを記述し ていないので動きません。
- 91. 91 移動処理 • 今回採用した移動方法は自分自身(球)に「力」 を加える方法です。 • 力を加えるのはAddForceアクションを使用し ます。 • 力の強さはキーボードから入力した値に外部か ら指定したSpeedを掛けた値を使用します。
- 92. 92 スクリプト(イメージ) 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); } } InputのGetAxis()で得られた値をX方向(左右)とZ方向 (前後)に設定してmovementを求める Movementにspeedを掛けた値だけ力を加える
- 93. 93 移動処理 • XYZに変数や値を指定してVector3型の変数を新た に作成するアクションはSet Vector3 XYZです。 • まずMoving状態を選択し[状態]タブを選択し、[ア クションブラウザ]ボタンを押して起動します。 • 検索欄にset vector3と入力して、 Set Vector3 XYZ を選択してから[状態にアクションを追加]ボタンを 押します。
- 94. 94 移動処理 • アクションの挿入位置は どうなりましたか? • アクションの実行順番は 上から下に向かって実行 します。 • もし一番上にアクション が挿入された場合、この ままではキーボードで入 力した値を得る前に計算 してしまい誤動作の元に なります。 処 理 順 番
- 95. 95 移動処理 • アクションの順番を入れ替えるには2通りの方 法があります。 • アクション名(Set Avtor3 XYX、Get Axisなど)をマ ウスでD&Dする • 歯車メニューの中から「アクションを下に移動」 「アクションを先頭に移動」などを選択する
- 98. 98 移動処理 • Set Vector3 XYZを次のように 設定してください。 • 各変数の右にある二重線をク リックすると、変数による指 定と値による指定を切り替え ることができます。 • Yは値による指定に切り替え て0を入力しています。 • 毎フレーム計算をするために Every Frameをチェックしま す。
- 99. 99 移動処理 • Moving状態にAdd Forceアクションを追 加。 • 実行順番が最後になっ ていることを確認して 適宜調整してください。 • 変更点はVectorと Every Frameです。
- 100. 100 移動処理 • シーンを保存してPlayボタンを押して動作確認 • これでボールが動くようになりました。 • しかし、想定よりとても遅いです。これはSpeed を掛ける処理を行っていなためです。 • Speedパラメータを使用するためにSet Vector3 XYZとAdd Forceの間にアクションを追加します。
- 101. 101 スクリプト(イメージ) 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); } } InputのGetAxis()で得られた値をX方向(左右)とZ方向 (前後)の力にするためにVector3を求めている Movementにspeedを掛けた値だけ力を加える
- 102. 102 移動処理 • Vector3とfloatの掛け算を行うアクションは Vector3 Multiplyです。 • 参考 • 足し算：Add • 引き算：Subtract • 掛け算：Multiply • 割り算：Divide
- 103. 103 移動処理 • Set Vector3 XYZとAdd Force の間にVector3 Multiplyアクシ ョンを追加します。 • Vector3 Variableをmovement に、Multiply Byをspeedに設 定(右の二重線をクリックし て変数を使用するのを忘れず に) • Every Frameをチェックしま す。
- 104. 104 移動処理 • シーンを保存してPlayボ タンを押しましょう。 • これで先ほどの10倍の速 度で移動します。 • もし移動しない場合は、 Inspectorビューのspeed に10を設定してから再度 実行し直してください。
- 107. 107 2.3. カメラの移動
- 108. 108 カメラの移動 • ボールの動きに合わせてカメラを移動させます。 • イメージとしては常にボールの正面を捉えなが ら移動します。 • Unityではすべてのキャラクターの移動が終わ った後にカメラを動かすためにLateUpdate()が 用いられます。
- 109. 109 スクリプト(イメージ) using UnityEngine; using System.Collections; 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. 110 カメラの移動 • HierarchyのMain Cameraを選択し、[PlayMaker]- [Components]-[Add FSM To Selected Objects]を実行 • PlayMaker Editorの[状態遷移]タブの「状態遷移」を 「CameraController」に変更 • PlayMaker Editorの[状態]タブの「State 1」を「Init」 に変更 • [変数]タブでplayerとoffset変数を追加。playerは[イン スペクタ]をチェックする(インスペクタで値の指定が できる)
- 111. 111 カメラの移動 • 登録のイメージ
- 112. 112 カメラの移動 • Init状態ではPlayerとカメラとの差分を計算して offset変数に代入しています。あとでこれを使用し ます。 • C#では「(自GameObjectの)transformのpositionプ ロパティを取得し、そのまま続けてplayerゲーム オブジェクとのtransformのpositionを取得し引き 算する」のように複数の処理を一度に書くことが できます。 void Start () { offset = transform.position - player.transform.position; }
- 113. 113 カメラの移動 • PlayMakerでは基本的に一つ一つ丁寧にアクションと 指定記述します。 • 自GameObjectのPositionを取得して「格納する」(A) • 指定されたGameObjectのPositionを取得して「格納する」(B) • (A)-(B)の結果をoffsetに格納する • つまり、(A)と(B)の値を格納する変数が別途必要にな ります。 • ここでは少しだけ処理を効率的に行う方法を紹介しま す。どうしてこれでうまくいくかご自身で考えてみて ください。
- 114. 114 カメラの移動 • 予め[変数]タブですべての変数を指定しても良いの ですが、必要に応じて追加する方法も紹介します。 • Main Cameraを選択し、PlayMaker EditorのInit状 態を選択し、Get Positionアクションを追加 • Get PositionのVectorをクリックし、[New Variable…]を実行 • New Variableと入力欄が表示されるので[offset]と 入力し、[Create Variable]ボタンを押す
- 115. 115 カメラの移動
- 116. 116 カメラの移動 • もう一つGet Positionを追加 • Game Objectを[Specify Game Object]に変更 • すぐ下に入力欄が増えるので、変数を指定に切り 替える • 変数playerを選択 • VectorでNew Variable…]を実行 • New Variableと入力欄が表示されるので [playerPos]と入力し、[Create Variable]ボタンを押 す
- 117. 117 カメラの移動
- 118. 118 カメラの移動 • Vector3 Subtractアクションを追加(処理順番は最 後) • Vector3 Variableにoffset、Subtract Vectorに playerPosを指定
- 119. 119 カメラの移動 • Trackingステートを追加 • InitステートにFINISHED遷移を追加 • InitステートのFINISHED遷移からTrackingステ ートへの遷移を追加
- 120. 120 カメラの移動 • プレイヤーの現在位置を取得(Get Position) • プレイヤーの現在位置にoffsetを加える(Vector3 Add) • 計算結果を自GameObjectのtransformのPositionに 代入する(Set Position) • すべてEvery Frameをチェックする • 最後のSet PositionのLate Updateをチェックする
- 121. 121 カメラの移動
- 123. 123 カメラの移動 • 最後にMain Cameraの Inspectorの Play Maker FSMコンポーネント内 のplayerにInspectorの Playerゲームオブジェ クとをD&Dする
- 124. 124 カメラの移動 • シーンを保存してPlayボタンを押しましょう。 • Player(球)を移動させるとカメラが追いかけて くるはずです。うまくいかない場合は何度も見 直してみてください。
- 126. 126 2.4.カメラとプレイエリア
- 127. 127 ステージ枠の作成 • プレイヤー(球)は床のないところに移動すると 落ちてしまいます。 • そこで壁を作ります。 • まず、空のGameObject(Empty GameObject) を作成し、Position(0, 0, 0)にします。 • 名前をWallsとします。
- 128. 128 ステージ枠の作成 • Wallsを選択し、[Create]-[3D Object]-[Cube]を 作成。名前をWest Wallに変更。 • Transformを以下のように変更
- 129. 129 ステージ枠の作成 • West Wallを[Ctrl]-[D](Win) / [Cmd]-[D](Mac)で 複製して同様に壁を作成
- 130. 130 ステージ枠の作成 名前 Position Rotation West Wall -10, 0, 0 0, 0, 0 East Wall 10, 0, 0 0, 0, 0 North Wall 0, 0, 10 0, 90, 0 South Wall 0, 0, -10 0, 90, 0 Scaleはすべて(0.5, 2, 20.5)
- 131. 131 ステージ枠の作成 • シーンを保存してPlayボタンを押しましょう。 • これでステージから落ちなくなります。 • もしこの時点でうまくいかなかった場合は、 Roll-a-ball_Playmaker.zipに含まれているRoll- a-ball_Playmaker4 のプロジェクトファイルを 開いて次に備えてください(別途PlayMakerの インストールもお忘れなく) 。
- 132. 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. 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. 134 収集アイテムの作成 • Pick Upゲームオブジェク を選択 • PlayMaker Editorで右ク リックし[状態遷移を追加] を実行 • [状態遷移]タブを開いて 「状態遷移」を 「Rotator」に変更 • 「State 1」ステートの名 前をRotatingに変更
- 135. 135 収集アイテムの作成 • Rotatingステートを選択し、 アクションブラウザから Transformの[Rotate]を追加 • X Angle, Y Angle, Z Angleに それぞれ15, 30, 45を代入 • Pre Second(指定した角度は 1秒あたりの角度とみなす) をチェック • Every Frameをチェック(初 期設定でチェック済み)
- 136. 136 収集アイテムの作成 • このままPlayをするとプレイ ヤーと同じ座標なので開始と 同時に衝突しておかしな動き になります。 • そのため一時的にPlayerを無 効にします。 • Playerを選択して、Inspector の左上のチェックを外します
- 138. 138 収集アイテムの作成 • 収集アイテムをプレハブにします • プレハブ(Prefab) • シーン上で様々な設定を施したゲームオブジェクを資産(Asset)にして再 利用することができる仕組み。 • PrefabをシーンにD&Dすると、同じ設定のゲームオブジェクを作成でき ます(インスタンス化するとも言う)。 • ProjectビューのPrefabを変更するとシーンに複製されたゲームオブジェ クもまとめて変更できる • Prefabからシーンに作成されたゲームオブジェクと変更し、Inspectorの 上にある「Apply」ボタンを押すと変更した内容をProjectビューの Prefabに適用する。結果、同じPrefabから作成されたゲームオブジェク も同じように変更される • Prefabからシーンに作成されたゲームオブジェクと変更し、Inspectorの 上にある「Apply」ボタンを押すと変更を破棄します。
- 139. 139 収集アイテムの作成 • PlayMakerを使用しているゲームオブジェクトにおけるPrefab の注意点 • PlayMakerは基本的にPrefabから作られたGameObject(インスタン ス)を編集できません。ProjectビューにあるPrefabを編集してくださ い。 • 誤って編集しようとすると下図のようなダイアログが表示されます。 その場合は[Edit Prefab]を選択してPrefabを編集してください。
- 140. 140 収集アイテムの作成 • Prefabの作成 • Projectビューで「Prefabs」フォルダーを作成 • HierarchyビューのPick Upゲームオブジェクとを ProjectビューのPrefabsフォルダーにD&D
- 141. 141 収集アイテムの作成 • 収集アイテムを合計12個作成 • 詳細(1/2) • 収集アイテムをまとめて管理す るために空のゲームオブジェク トを作成([GameObject]-[Create Empty]。 名前：Pick Ups Position: (0, 0, 0) • Pick UpをPickUpsの子にする
- 142. 142 収集アイテムの作成 • 収集アイテムを合計12個作成 • 詳細(2/2) • Pick Upを選択し、複製([Ctrl]-[D](Win) / [Cmd]-[D](Mac))を11回行う
- 144. 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. 145 収集アイテムの作成 • シーンを保存してPlayボタンを押しましょう。 • すべての収集アイテムがゆっくりと回転すれば成 功です。 • もしこの時点でうまくいかなかった場合は、 Roll- a-ball_Playmaker.zipに含まれているRoll-a- ball_Playmaker5 のプロジェクトファイルを開い て次に備えてください(別途PlayMakerのインスト ールもお忘れなく) 。
- 146. 146 3. 衝突判定
- 148. 148 衝突とは • Unityにおける衝突はCollider同士がぶつかった状 態を表す • 静的コライダー (各種コライダ＋Rigidbodyコンポーネントなし) • 床、壁など動かない要素 • 動的コライダー (各種コライダ＋ Rigidbodyコンポーネントあり) • プレイヤーのように動く要素
- 149. 149 衝突の発生条件 • 静的コライダー と 静的コライダー • 衝突イベントが発生しない • 静的コライダー と動的コライダー • 衝突イベントが発生する • 動的コライダー と動的コライダー • 衝突イベントが発生する
- 150. 150 衝突の発生条件(補足) • Rigidbodyコンポーネント のIs Kinematicオプション • Kinematicオン • スクリプトによる制御だけ で動かす。 • 衝突判定はKinematicオフの 動的コライダーのみ発生 • 主な利用用途 • スライドドア、ラグドール など
- 151. 151 衝突イベント • 衝突条件が成立した時に呼び出されるイベント • OnCollisionEnter • コライダーが触れた • OnCollisionStay • 衝突中 • OnCollisionExit • コライダーが離れた
- 152. 152 トリガーイベント • 衝突ではなく、自動ドアやト ラップのような見えないスイ ッチに触れた時に発生するイ ベントをトリガーイベントと 呼んでいます • Unityでは各コライダにある 「Is Trigger」プロパティをチ ェックすると、衝突イベント が発生せずにすり抜けてしま い、トリガーイベントが発生 します
- 153. 153 トリガーイベント • トリガー条件が成立した時に呼び出されるイベ ント • OnTriggerEnter • トリガーに触れた • OnTriggerStay • トリガーに触れている最中 • OnTriggerExit • トリガーから離れた
- 154. 154 参考: コライダーの衝突に関する詳細情報 • Unityオンラインマニュアル • https://docs.unity3d.com/ja/current/Manual/Colliders Overview.html 衝突アクションマトリクス
- 155. 155 収集アイテムとの衝突判定 • 収集アイテムと触れた時、 反発しては困るので「ト リガーイベント」を使用 します。 • トリガーイベントを発生 させるためにPick Upプレ ハブのBox ColliderのIs Triggerをチェックします
- 156. 156 タグの設定 • Pick Upプレハブを選択し、InspectorのTagをクリックして、[Add Tag…]を実行 • Tag & Layers Setting画面のTagsの下にある「+」ボタンを押して 「Pick Up」と入力し、[Save]ボタンを押す
- 158. 158 トリガーイベント • Playerゲームオブジェクトが非アクティブのまま なので、アクティブに戻します。 • Playerゲームオブジェクトを選択し、 PlayMakerEditorで右クリックして[状態を追加]を 実行 • 「State 1」を「Picking Up」に変更 • Picking Upステートを選択し、右クリックして[グ ローバル遷移を追加]-[System Events]-[TRIGGER ENTER]を実行
- 159. 159 トリガーイベント
- 160. 160 トリガーイベント
- 162. 162 トリガーイベント後の処理 void OnTriggerEnter(Collider other) { if (other.gameObject.CompareTag ("Pick Up")) { other.gameObject.SetActive (false); } } トリガーイベントが 発生 トリガー元の情報が格納 された変数 トリガー元のTagが “Pick Up”か調べる トリガー元を非アクティブにする
- 163. 163 トリガーイベント後の処理 • Picking UpステートにGet Trigger Infoアクションを追加 • Game Object Hitに新規に作成した「other」変数を設定
- 164. 164 トリガーイベント後の処理 • 続けて、Game Object Compare Tagアクションを追 加 • Game Objectにotherを設定 • TagにPick Upを設定
- 168. 168 トリガーイベント後の処理 • [状態]タブに戻り、Get Object Compare Tagの True Eventをクリックして 「Get Item」を選択 • すると警告が出るので赤字 の部分をクリックすると状 態遷移が追加されます。 ここをクリック
- 170. 170 トリガーイベント後の処理 • PlayMaker Editorの空いている 場所で右クリックし[状態の追 加]を実行 • ステート名を「State 1」から 「Getting Item」に変更 • Getting Itemステートを選択し てActivate Game Objectアクシ ョンを追加 • Game Objectを「Specify Game Object」に変更し、 other変数を指定する • Activateのチェックを外す
- 172. 172 トリガーイベント後の処理 • シーンを保存してPlayボ タンを押しましょう。 • アイテムを取ると Getting Itemステートで 止まってしまいます。 • Getting Itemのアクショ ンが終了したらMoving に戻るようにしましょ う。
- 173. 173 トリガーイベント後の処理 • Getting Itemを選択し、右クリックで[遷移を追加]- [FINISHED]を実行 • 追加されたFINISHED遷移をクリックしながら MovingステートにD&D
- 174. 174 トリガーイベント後の処理 • シーンを保存してPlayボタンを押しましょう。 • 収集アイテムに触れるとアイテムが消えるのと、 プレイヤーの操作を続けることできるようになれ ば成功です。 • もしこの時点でうまくいかなかった場合は、 Roll- a-ball_Playmaker.zipに含まれているRoll-a- ball_Playmaker6 のプロジェクトファイルを開い て次に備えてください(別途PlayMakerのインスト ールもお忘れなく) 。
- 175. 175 4. Unity UIとの連携
- 177. 177 Add-Onパッケージとは • 収集アイテム数の表示用にuGUIを利用します。 • uGUIは正式にはUnity UIと呼ばれ、Unity4.6から追 加された機能です。 • 従来のOnGUIメソッドによるUI表示の弱点を克服 し、2Dはもちろん、3Dオブジェクトしても配置が できるなど非常に汎用性の高いUIパッケージです。 • PlayMakerは標準でuGUIに対応していないため Add-Onパッケージを使用します。
- 183. 183 Add-Onのインポート • [Use the ecosystem!]ボタンを押す
- 184. 184 Unity UI連携パッケージのインストール • Ecosystem browserの 検索欄にuguiと入力し て[Search]ボタンを押 す • 「u GUI Proxy Full」に マウスを移動させると [Get]ボタンが表示され るのでそれを押す
- 187. 187 Add-onパッケージ • Add-onのダウンロードページには様々なアド オンが紹介されています。 • Unity Action Packs • Blend Shapes • Shuriken • Unity UI(今回はこちらを使用) • Unity Pathfinding • IOS Game Controller
- 188. 188 Add-onパッケージ • Third Party Tools • 2D Toolkit • A* pathfinding • Final IK • MegaFiers • PoolManager • Third Person Controller • など
- 189. 189 Add-onパッケージ • Starter Kits • 3D Infinite Runner for Playmaker • Platforming Starter Kit • Playmaker Essentials Pack • など
- 190. 190 Add-onパッケージ • Extensions • ArrayMaker • Comms Tool • PlayerPrefs X • TimeLine for PlayMaker • DataMaker • など
- 191. 191 4.3. UIのTextを変更
- 192. 192 得点表示用のUI • uGUIをPlayMakerから使うときは[PlayMaker uGui] -[Prefabs]-[Playmaker UGui]プレハブを シーンに追加します。
- 193. 193 得点表示用のUI • 体力表示のTextはHierarchy Viewから[Create]- [UI]-[Text]で作成します。 • CanvasやEventSystemは自動的に生成される ものなので削除しないようにしてください。
- 195. 195 得点表示用のUI • Game Viewの左上の「Free Aspect」を16:9な どに変更します。
- 197. 197 得点表示用のUI • TextをScoreに名前を変更。 • ScoreのRect Transformコ ンポーネントを次のように 修正 注意!
- 200. 200 クリアメッセージ用のUI • HierarchyのCanvasを選択し、右クリックで [UI]-[Text]を実行(Canvasの下にTextが作成され る) • TextをWinに変更
- 204. 204 スクリプト(イメージ) using UnityEngine; using UnityEngine.UI; using System.Collections; public class PlayerController : MonoBehaviour { 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. 205 スクリプト(イメージ) <<< 続き >>> void FixedUpdate () { float moveHorizontal = Input.GetAxis ("Horizontal"); float moveVertical = Input.GetAxis ("Vertical"); Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical); rb.AddForce (movement * speed); } void OnTriggerEnter(Collider other) { if (other.gameObject.CompareTag ( "Pick Up")) { other.gameObject.SetActive (false); count = count + 1; SetCountText (); } } <<< 続く >>> アイテムを取得した数を1つ増やして、 得点を更新
- 206. 206 スクリプト(イメージ) void SetCountText () { countText.text = "Count: " + count.ToString (); if (count >= 12) { winText.text = "You Win!"; } } } “Count: 取得数”という文字列を文字列を表示 取得数が12以上ならクリアメッセージを表示
- 207. 207 Unity UIのText用変数の追加 • Playerを選択し、PlayMaker Editorの[変数]タブを開く • 変数名: score、 型:GameObjectを新規作成 • インスペクタをチェック
- 208. 208 Unity UIのText用変数の追加 • 変数名: win、型: GameObjectを 新規作成 • インスペクタをチェック
- 210. 210 インスペクタによる指定 • PlayerのInspectorのPlay Maker FSMのscoreの右にある ◎をクリックして表示された ダイアログのScoreを選択 • これはSceneのScoreゲームオ ブジェクトをD&Dしてもでき ます。どちらの操作でも構い ません。 • 同様にwinも設定してください。
- 211. 211 初期化処理(Initステート) • Initステートを選択 • アクションブラウザか らSet Int Valueを追加 • Int Variableにcountを設 定 • Int Valueは0(初期値)
- 212. 212 初期化処理(Initステート) • Initステートにおいてアクショ ンブラウザからU GUI Text Set Textを追加 • 図を参照して値を設定
- 213. 213 初期化処理(Initステート) • Initステートにおいてアクシ ョンブラウザからU GUI Text Set Textを2つ追加 • 図を参照して値を設定 • 変数winのText欄にはスペー スを一つ入力してください
- 214. 214 初期化処理(Initステート) • シーンを保存して Playボタンを押しま しょう。 • 左上に「Count: 0」、 Winは空欄になれば 成功です。
- 215. 215 アイテムの取得(Getting Item) • Getting Itemステートを 選択し、Int Addアクショ ンを追加 • 図を参考に設定
- 216. 216 アイテムの取得(Getting Item) • Getting Itemステートを選 択し、Convert Int To StringとBuild Stringアクシ ョンを追加 • 図を参考に設定 “:”の後ろに空白を1つ追加する
- 217. 217 アイテムの取得(Getting Item) • Getting Itemステートを選択し、 U GUI Text Set Textを追加 • 図を参考に設定
- 218. 218 アイテムの取得(Getting Item) • Getting Itemステートを選択し、 Int Compareアクションを追加 • 図を参考に設定
- 219. 219 クリア(Winステート) • Winステートを追加 • Getting ItemのWinイベ ントからWinステート への遷移を追加 • 図を参考に設定
- 220. 220 基本システム完成! • シーンを保存してPlayボタンを押しましょう。 • アイテムを取得するとCountが増えていき、全て 回収(12個)すると”You Win!”のメッセージを表示し ます。 • もしこの時点でうまくいかなかった場合は、 Roll- a-ball_Playmaker.zipに含まれているRoll-a- ball_Playmaker7 のプロジェクトファイルを開い て次に備えてください(別途PlayMakerのインスト ールもお忘れなく) 。
- 221. 221 4.4. UIのボタンに対応
- 222. 222 Unity UIのボタン対応 • Unity UIのボタンが押されるとOnClick()呼ばれ るイベントが発生します。 • PlayMakerではu GUI Proxy FullのAdd-onパッ ケージをインストールすると「ON CLICK」と いう名前のカスタムイベントが発生します。
- 223. 223 処理概要 • 実現したい内容 • 全てのアイテムを回収後に[Restart]ボタンを表示 • [Restart]ボタンが押されたらシーンを再度読み込む
- 224. 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. 225 Restartボタン • HierarchyのCanvasを選択し、右 クリックを押して[UI]-[Button]を 実行し、Buttonを作成 • Buttonを「Restart」に名前を変 更 • RestartボタンのRect Transform を右図のように調整 • Canvas/Restart/TextのTextコン ポーネントのTextプロパティを 「Button」から「Restart」に変 更
- 226. 226 Restartボタン • Unity UIのイベントをPlayMaker FSM内で受け 取るためにPlay Maker U Gui Component Proxy コンポーネントを追加(Inspectorの[Add Component]ボタンを押して検索するのが比較的 簡単)
- 227. 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」と入力
- 231. 231 PlayerController FSMの修正 • Restart(GameObject型)変数を追加し、「イン スペクタ」プロパティをチェックする • InspectorのPlay Maker FSMコンポーネントの restartにRestartボタンをD&Dする
- 233. 233 PlayerController FSMの修正 • InitステートにActive Game Objectアクション を追加(今回の処理は順番に依存しないため場 所は任意) • 下図のように設定
- 234. 234 PlayerController FSMの修正 • WinステートにActive Game Objectアクション を追加(今回の処理は順番に依存しないため場 所は任意) • 下図のように設定
- 235. 235 Build Settingsの修正 • シーンをロードするにために はあらかじめBuild Settingsに 使用するシーンを登録する必 要があります。この設定は名 前の通り、ビルドするために 使用するものです。 • [File]-[Build Settings…]を実行
- 236. 236 Build Settingsの修正 • ProjectビューのScenes/MiniGameシーンファ イルをBuild Settingsの上の方にD&D
- 237. 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. 238 5. FAQ
- 239. 239 FAQ • Q1. 実行画面(Gameビューや ビルドしたアプリなど)に表 示されるPlayMakerのステー タスを消したい • A1. PlayMaker Editorの[環境 設定]の[ゲームビューニ状態 ラベルを表示]のチェックを 外してください
- 240. 240 FAQ • Q2.他にどんなことができるの? • A2.公式サイトを見ましょう。このワークショ ップが終わった後なら自力で読めると思います。 • チュートリアル • http://www.hutonggames.com/tutorials_game_design_with _playmaker.php • リファレンスマニュアル • https://hutonggames.fogbugz.com/default.asp?W1
- 241. 241 FAQ • Q3. 同じようなFSMを何度も入力したくない。 • A3. テンプレート機能を使えばFSMの保存/読 み込みができますので、似たようなFSMのコ ピーができます。
- 242. 242 FAQ • Q4. Mecanim(Animator)制御はできるの? • A4. Add-onがあります(何故か一覧に無い) • https://hutonggames.fogbugz.com/?W1031
- 243. 243 FAQ • Q5. C#/UnityScriptの方が分かりやすくない? • A5. 混合も出来ますので、うまく使い分けてくだ さい(例えば敵キャラのAI部分にだけPlayMakerを 使ってみるとか)。 • その他、性能に関する情報やiOS/Androidなどの情 報は公式FAQをご覧ください。 • https://hutonggames.fogbugz.com/default.asp?W541
Editor's Notes
- 執筆時点では「Ecosystem Brower」(Browserのsが抜けている)のタイプミスをしているみたいです。
- 執筆時点では「Ecosystem Brower」(Browserのsが抜けている)のタイプミスをしているみたいです。
- 執筆時点では「Ecosystem Brower」(Browserのsが抜けている)のタイプミスをしているみたいです。