Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

45,142 views

Published on

7月29日開催のUnity道場資料です。
講師:石井勇一(ユニティ・テクノロジーズ・ジャパン合同会社)

Published in: Technology
  • Brent Forsman is paralyzed from a hunting accident. He now uses the Demolisher system to generate income. He says: "I believe there is no way this system can fail!" ■■■ http://t.cn/A6zP2GDT
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Profit Maximiser redefined the notion of exploiting bookie offers as a longer-term, rather than a one-off opportunity. Seasoned users report steady month-by-month profits and support each other through a famously busy, private facebook group. The winner of our best matched betting product oscar has matured into something very, very special. ◆◆◆ https://bit.ly/2UD1pAx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Mike Cruickshank Profit Maximiser▲▲▲ http://t.cn/A6hPRSfx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/2Q98JRS ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2Q98JRS ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

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

×