1 pixel|サイバーエージェント公式クリエイターズブログ

サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。


Theme:

はじめまして!UI/UXデザイナーの嶋田豪介(@__gsk__)です。
現在は主にモバイルゲームのラピッドプロトタイピングや技術調査を担当しています。以前は3DCGモデラーもやっておりました。趣味はソフトウェア研究、一番好きなソフトはExcelです。


さて、本記事でご紹介するPlayMakerは、Unity上で強力なビジュアルスクリプティング環境を提供する有料アセットです。コードを書かずにロジックが組め、可読性やデバッグ効率面でも優れた機能を有しています。登場以来有料アセットランキングの上位に入り続けており、まさにベストセラーアセットの代表格と言えるでしょう。
他有名ゲームエンジンにおける同様の環境は、Unreal EngineBlueprintsが、CryEngineFlow Graphがそれぞれ標準搭載されています。複雑肥大化しがちな昨今のゲーム開発において、フローの全体像を視覚的に把握できるビジュアルスクリプティング環境は存在感を増してきています。

以下では、主にUnityのスクリプティングに二の足を踏んでいるデザイナーやプログラマー向けに、PlayMakerの概要をご紹介させて頂ければと思います。Unlock Your Power!

PlayMakerの特徴

PlayMakerで構築したノベルエンジン。 この例ではシナリオファイルのロード、構文解析、使用アセットの管理、ノベルの進行などシーンの全てを支配的に一元管理させている。


PlayMakerの特筆すべき点は

  • 状態遷移ベースのフロー設計ができる
  • ロジックをノンコーディングで記述できる
  • 実行中プログラムの状態を視覚的に把握でき、デバッグ効率が高い
  • 既存コードや他アセットとの連携が容易
  • ユーザー独自の「アクション(後述)」開発が容易
などが挙げられます。
また、Uni2DSimpleSQLSQLiteKitなど、パブリッシャー自らPlayMaker対応を謳っているアセットが多いのも特徴です。もちろん公式に対応していなくても、ほとんどの場合自作のアクションやスクリプト経由で問題なく連携できます。
加えて、PlayMakerユーザーが自作したアドオンアクションNGUIPrime[31]をはじめとして公式フォーラムにて大量にシェアされています。iTweenに至ってはバンドルされている上、専用アクションも豊富に付属するため非常に相性が良いと言えます。
これらの特徴から、導入による効果が特に期待できるシーンをあえて挙げれば
  • モック製作/ラピッドプロトタイピング
  • UI/状態遷移の管理システム
  • iTweenアニメーションの制御
  • AIの思考ルーチン
  • UnityEngine APIの学習
などです。

チーム開発における注意点

一つのゲームをPlayMakerだけで作り上げることもできますが、C#スクリプトなどと連携させてプロジェクトの一部に導入することもできます。 ただしチーム開発においては
  • コードではないのでマージができない
  • 厳密なカプセル化が困難である
  • 自由度が高くほぼどんなロジックも書けてしまう
などの特徴を把握した上で運用ルールを明確にしないと、デバッグやリファクタに余計な工数を消費する恐れがあります。 メンバーの練度や開発の規模次第ですが
  •  使用範囲を特定シーンに限定する
  •  既存コードとの連携ルールを明文化する
  •  コードは全てPlayMakerのアクションにして使用する
  •  状態遷移制御のみで使用し、ロジックを書かない 
  • トゥイーン制御のみに使用する
など、なんらかの対応が必要になるでしょう。チームでの安易な導入には危険があることを忘れないでください。

ステートマシンとは

PlayMakerはステートマシン(FSMまたは有限オートマトン)と呼ばれるUMLの状態遷移図に似た形式でプログラムを構築します。 ステートマシンは主に以下四つの概念で構成されます。
  • ステート (オブジェクトの状態)
  • イベント (ある状態から別の状態への遷移を起こすトリガー)
  • アクション (ある状態でのオブジェクトの振る舞い、具体的なロジック)
  • 変数 (ステートマシンが扱うオブジェクトや数値などの入れ物)
例えば、プレイヤーキャラクターの歩き、走り、無敵状態、毒状態などは全てステートとして表現できます。また、「歩き」から「走り」などへの状態変化は、何かしらのイベントをトリガーとして遷移(トランジション)します。そして各状態では具体的な挙動がアクションとして記述され、歩く速さなどのパラメーターはアクションの中で変数に入れられて使用されます。
また、複数のステートマシンを一つのオブジェクトにアタッチすることも可能です。

PlayMakerのエディター画面

  • 濃いグレーの四角がステート
  • 青い枠に囲まれているものは現在編集中のステート
  • ステートの下に一つまたは複数ある薄いグレーの四角がイベント
  • 画面右側は編集中ステートに配置されているアクション

ステートを作る

PlayMakerでステートマシンを組み立てる工程を見てみましょう。あくまで概要の紹介なので、読みやすさを優先し以下全てのステートや変数は日本語で命名しています。また、操作の説明については省略しています。


灰色のブロックそれぞれがステートです。アイドル(待機)、歩く、走る、無敵、毒などの「状態」をとるキャラクターを想定しました。アイドルステートの直上にSTARTというブロックがありますが、このステートマシンの起動時に最初にアクティブになるステートを意味しています。


ただし、一つのステートマシンは同時に複数の状態をとることはできません。従って同時にアクティブにしたいステートはそれぞれ別のステートマシンとして実装する必要があります。例えば「歩きながら毒状態」「走りながら無敵状態」などを実現したいので、下図のように整理しました。

移動管理のステートマシン

バフ管理のステートマシン


イベントを作る

ステートからステートに移る(トランジションする)ためにはイベント名を定義する必要があります。 前出の移動管理のステートマシンを例に進めていきます。 イベントを作るにはPlayMaker EditorのEventタブを使用します。

ここではマウスを押している間は歩き、数秒歩き続けたら走りに移行する挙動とするため、各ステートに以下のようにイベントを設定しました。

「!」が表示されているのは、イベントは定義されているが、その遷移先が見つからないためです。 それぞれのイベントと遷移先のステートを関連づける必要があります。 イベントからステートに向けてドラッグすると矢印でステート同士が結び付けられ、すべての遷移が完成しました。


アクションを割り当てる

それぞれのステートで行うロジックと、各イベントを発動させる条件を定義するため、各ステートの中に「アクション」を配置します。アクションブラウザを開くと標準で同梱されている多種多様なアクションが現れるので、目的のステートを選んでから、任意のアクションをダブルクリックもしくはドラッグで配置します。

アクションブラウザ

PlayMakerのアクションブラウザ。 キーワードでフィルタリングができる。下部には選択したアクションのプレビューと説明が表示される。

「アイドル」ステートのアクション

「アイドル」ステートには「Get Mouse Button Down」というアクションを配置しました。名前の通りクリックを検知したら、現在のステートのどのイベントを発動させるかを指定するアクションです。 この場合、左クリックで「マウスダウン」イベントが発動され、矢印の先にある「歩く」ステートに遷移します。

「歩く」ステートのアクション

「歩く」ステートには五つのアクションを配置しています。大雑把に説明すると以下のような処理を行っています。
  1. Get Position:自身の現在座標を変数「現在の位置」に格納 
  2. Vector3 Add XYZ:「現在の位置」のX値に変数「歩きの移動量」の数値を毎フレーム加算 
  3. Set Position:自身の座標に「現在の位置」を毎フレーム代入 
  4. Get Mouse Button Up:マウスボタンを離したら「マウスアップ」イベントを発動
  5. Wait:このステートに入って1秒経過したら「一定時間経過」イベントを発動
※アクションは基本的に、フレーム内で上から順に実行されていきます。ただし、EveryFrameにチェックがついているアクションがある場合、そのステートがアクティブな間、そのアクションは毎フレーム実行され続けます。

「走る」ステートのアクション

移動量の変数に「走りの移動量」が設定されています。 他のアクションの説明は「歩く」ステートとほぼ同じ処理なので省略します。



最後に

このステートマシンを実行した動画です。 コードを一切書かずにUnityのオブジェクトをインタラクティブに制御できました。
本記事ではPlayMakerの基礎的な概念の解説と、極めて単純なステートマシンを作りました。また機会があれば、PlayMakerのフルパワーを発揮させた実践的な内容をご紹介できればと考えています。
いいね!した人  |  リブログ(0)

1pixelさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

最近の画像つき記事  もっと見る >>
ページトップへ戻る