Unity Asset GameCreator 概要編

# はじめに

この記事はUnityの有料アセット「GameCreator」について紹介する記事です。
GameCreatorはUnityのAssetStoreにて65ドル（2019年10月）で購入することができます。
※一応公式フォーラムで記事を書いていいかどうか相談してみた結果OKでした。（コアな部分のソースコードなどは無理ですが）

GameCreatorのアセットのリンクは[こちら](https://assetstore.unity.com/packages/templates/systems/game-creator-89443)

# GameCreatorの概要
GameCreatorは何かということですが、簡潔にまとめると

- ビジュアルスクリプティング＆UnityEditorの拡張アセット
- UnityのInspectorに命令処理を追加していき、上から順番に処理が実行される
- 基本ロジックはActions, Triggers, Conditionsの3つからなり、これらを組み合わせてゲームを構築していく
    - ***Actions***はGameObjectなどに動作を与える
    - ***Triggers***は動作などのイベントを発火する
    - ***Conditions***は条件分岐などの制御処理を行う
- 上記以外にプレイヤーを操作するための***Player***、変数の管理などをする***Variables***, カメラ操作を制御する***Camera Motor*** などが内包されている
- 自前のActions,Triggers,Conditionsを追加可能（エンジニア向け）
- 追加の拡張モジュールがいくつか販売されており、これらを追加して様々なゲーム機能を追加できる

より詳しい内容について知りたい方は下記の公式ドキュメント（英語）があります
https://docs.gamecreator.io/game-creator/game-creator

# デモ
- 公式からWebGLサンプルが公開されているので、こちらを最初に触ってみるのがよいかなと思います。
  - https://demos.gamecreator.io/
  - デモページの上部に、***Inventory,Dialog,Quests,Stats,Behavior***がありますが、これらは追加販売の拡張モジュールのデモになります。これらは***GameCreatorのみのアセットには付随していません。またこれらはGame Creatorを購入して追加しないと動きません。***ご注意下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/70208cae-bf2c-3de4-2f5d-a6aed9b196d1.png)

# 実際に使ってみる
実際にUnity上でどう作っていくのかをお見せしていきます。
簡単な例として、「プレイヤーがドアを開ける」サンプルを作ります。

- WASDで操作可能なプレイヤー
- ドアに近づくとメッセージが出る
- Eキーを押すとキャラクターがアクションを行いドアが開く
- ドアが開いている最中に別視点のカメラに切り替える

### 環境
- Unityのバージョン
    - 2018.4.8f
- GameCreatorのバージョン
    - 1.0.4

### GameCreatorのインストール
UnityAssetStoreでGameCreatorを購入し、プロジェクトにインポートします。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/c9333e63-7af7-8cf9-4381-a09b651459f5.png)
インストールが完了すると、Unityのエディタメニュー部分にGame Creatorが追加されます。
ちなみにメニューの内容は下記の通りです。
![無題4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/a3811f74-71bf-b9f9-1295-5416e6073b1f.png)

| メニュー名       |説明|
|:-----------------|:------------------------------------|
| Check for Update | 最新バージョンの確認とアップデート|        
| Reinstall Game Creator|            GameCreatorの再インストール |
| Module Manager   | 拡張モジュールの管理|
| Preference|GameCreatorや拡張モジュールの設定|
| Tools|ドキュメントやツールバー表示|

### Playerをシーンに配置する
まずは操作できるプレイヤーをシーンに配置してみます。
Unityの上部メニューのGameObject または HierarchyのCreateなどから[GameCreator]->[Characters]->[Player]を選択します。
すると、シーン上にPlayerオブジェクトが配置されます。
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/56b05bed-40ee-e075-39fc-b2f304a97d3f.png)

このままUnityEditorで再生するとそのまま落下していくので、適当な土台をプレイヤーの下に配置しておきます。
この状態で実行するとプレイヤーを動かせます。
[WASD]または[↑→↓←]で移動、[スペース]でジャンプできます。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/7ca585fe-1bd7-b7b6-980a-f0fddf0d0460.png)


### Camera Motorを追加する
このままだとカメラ（Main Camera）がプレイヤーに追従しないので、追従するようにしたいと思います。
GameCreatorでは、***Camera Motor***でこれを実現します。

Unityの上部メニューのGameObject または HierarchyのCreateなどから[GameCreator]->[Other]->[Camera Motor]を選択します。
この状態で実行するとマウスの動きとPlayerの動きに合わせてカメラが移動します。
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/7344209e-de41-938f-9660-6a43e10a8ceb.png)

CameraMotorのオブジェクトのInspectorからChangeを選択すると幾つかリストが出てきます。***FollowCamera***にして実行してみてください。先ほどの実行結果と異なり、カメラがマウスの動きに反応しなくなり、Playerの動きに追従するようになります。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/6f266478-494f-13c6-a2b7-d62a3ef08936.png)
※Camera Motorにはいくつかパラメータや機能がありますがここでは詳しく説明をしません。別の機会に取り上げたいと思います。

### Triggersを追加する
プレイヤーが動くようになったところで、イベントを発火するためのTriggerをシーンに配置してみましょう。
[GameCreator]->[Triggers]を選択してください。
Unityのシーンに次のようなTriggerゲームオブジェクトが追加されます。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/17a3f1f3-52d3-4371-b0a5-b6b985ff40c5.png)
デフォルトのトリガーは***OnStart***になっています。これはシーンが開始されたときに実行されるTriggerになっています。これをChangeTriggersを押して、***OnPlayerEnterKey***と入力して選択して下さい。OnPlayerEnterKeyはプレイヤーがコライダーに入っているかつ指定したキーが入力されたときにActionを実行するトリガーになります。また、ここではKeyCodeを「E」にしています。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/a53654b6-755d-4d83-77d1-99a6209b6bf5.png)
Triggersの設定は以上です。ちなみにこの段階で実行してももちろん何も起こりません。何を行うかはActionsに定義します。
※ちなみにOnPlayerEnterKeyなどコライダーに入ってからActionなどを実行するTriggersは、必ずCollider系のコンポーネントとIsTriggerの有効が必要です。

### Actionsを追加する
Actionsはゲームオブジェクトなどに動作を与える処理になります。アクションの追加の仕方は数種類あります。
ここでは、前項「Triggersを追加する」で追加したTriggerのInspectorから、Actionアイコンが表示されているところを押します。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/77c88d7a-9342-db49-e51b-17ec1f0e4a05.png)
そうすると、Triggerゲームオブジェクトの下にActionsという名前の子ゲームオブジェクトが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/09062ccf-1dcb-1f1b-8cc5-e2ec06741ac2.png)
追加されたActionsを見ると、次のようになっていると思います。ここにアクションを追加していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/3173d12f-8bd2-c543-835e-d4d3b1d5bb26.png)

#### メッセージログを出してみる

味気ないですが、UnityのDebug.Logと同じようにコンソールに文字列を出すアクションを追加してみます。
ActionsのAdd ActionからDebug Messageと入力し、***Debug Message***アクションを追加してみてください。次のようになると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/b7c6c652-dd85-e2e2-0b04-5b30b697466c.png)

ログがちゃんと出るのか確認してみます。以下の画像ではtriggerゲームオブジェクトの位置がわかりやすいように、Triggerの下にPrimitiveなCubeオブジェクト（BoxColliderなし）を追加して位置を調整してます。
TriggerのSphereColliderに入っている状態でEキーを押すと、コンソールにMessageの内容がログに出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/365e563a-93ac-c85d-c10c-4032cae247e1.png)

#### いろいろなアクションを追加してみる

さすがにログだけを出すのはつまらないので、いくつかアクションを追加してみます。

Add Actionを選択して、Transform Moveと入力してアクションを追加してみてください。新しいアクションがDebug Messageアクションの下に追加されたと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/a39e2b1d-0b54-f394-c150-708e22dffca8.png)
***Transform Move***アクションはゲームオブジェクトを移動するアクションです。Durationのパラメータを設定することでイーズイン・アウトのようなアニメーションつきで移動してくれたりします。

適当な位置に、Cubeオブジェクトを配置して、ドアとするゲームオブジェクトをシーンに追加しておきます。（ここではDoorというゲームオブジェクトで配置しました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/7b331fc6-c5db-6b00-da16-71bc5ee42102.png)
次に、追加したActionsゲームオブジェクトを選択して、先ほど追加したTransform Moveアクションで、このDoorを上部に移動するようにしたいと思います。今、アクションの名前がMove Playerという名前で表示されていると思いますが、これを以下のように変更してみてください。

| 項目名            |設定値|
|:-----------------|:-----------------:|
| Target           |GameObject, Door|
| MoveTo           |Transform, Door, Offset(0,10,0)|
| Rotate           |false|
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/78a787e8-aa54-50b8-faba-b7d8d41550d9.png)

この状態で実行してみます。TriggerのSphereColliderに入っている状態でEキーを押すと、Doorが上のほうにスーっという感じで移動していきます。

ちなみに、実行中にAdd Actionの右端のボタンが押せる状態になっており、このボタンを押すとTriggerに入らなくてもActionを実行することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/cc9ec1ca-943d-408d-5d91-bfe4f4b5d2e2.png)

さらに色々アクションを追加してみます。各Actionの詳細な説明は今回は行いませんが、他のActionが知りたい方は[公式のドキュメント](https://docs.gamecreator.io/game-creator/game-creator/actions)をご覧下さい。

| Action名            |説明|
|:--------------------|:-----------------|
| Play Sound          |音を鳴らす|
| Change Property         |playerまたはcharacterの設定値を変更する（例えばジャンプ禁止にする）|
| Change Camera         |Cameraを別のCameraに切り替える|

例として、今回作る「ドアを開ける」Actionsは次の通りです。

- [Change Property]:プレイヤーを操作不可の状態にする
- [Change Camera]:カメラを別の位置にあるカメラ（FixedCamera）に切り替える
- [Transform Move]:ドアを開ける
- [Play Sound]:音を鳴らす
- [Change Camera]:カメラを最初に使っていたメインカメラのほうに切り替える（切り替えるときに1.7秒でスムーズに戻す）
- [Change Property]:プレイヤーを操作可能状態に戻す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/8b8d4208-d32f-8a10-4f5d-77aef63026c6.png)

# Conditionsについて
Conditionsは条件分岐で、If ~ Else と同じ意味です。今回は詳しく扱いませんがとりあえず触れておきたいと思います。
Conditionsを追加するには、[GameCreator]->[Conditions]を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/1425cbd1-54c8-1fd6-f6a0-4181c52e23cd.png)
Conditionsには条件にマッチすると、Thenに指定したActionが実行されていきます。Add Clauseボタンを押すと、Conditionsの内容を変更できるようになります。また、条件にマッチしなかった場合はElseに指定したActionが実行されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/18d71c42-8c3d-21c8-36d6-922ded4d1968.png)

### プレイヤーの3Dモデルを変更したい

今は白い人の3Dモデルですが、別の3Dモデルに変更することもできます。ちなみに、Game Creatorのアニメーションシステムを利用するには、インポートしたアニメーションが***Humanoid***である必要があります。

UnityのHierarchyのPlayerゲームオブジェクトから ***Character Annimator***のコンポーネントに、Drop Your 3D Modelという部分があるので、そこに適用したい3Dモデルをドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/b21d976b-880b-5020-87cc-1d037439b93d.png)

UnityChanの3Dモデルを使ってみます。Unity Asset StoreからUnityChanの3Dモデルをプロジェクトにインポートしてモデルをドラッグ＆ドロップしてください。プレイヤーがUnityChanの3Dモデルに替わったと思います。ジャンプなどのアニメーションも一応適用されてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/fbc5d9b3-60df-cfb4-8623-96bfed2b0160.png)
※環境によっては、UnityChanのパッケージをインポートすると、[using System.Security.Policy]でコンパイルエラーが出ると思います。AutoBlink.csのusing System.Security.Policy部分をコメントアウトしてください。

### アニメーションステートを変更したい
3Dモデルは変わりましたが、実行してみると待機状態や走ったときのアニメーションがデフォルトのアニメーションになっていて、これを変更したいと思います。（画像からだとわかりずらいですが…）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/3aa5d2ad-640f-f1ca-b30c-1306824d3736.png)
GameCreatorの場合、専用のアニメーションステートというものを作ってプレイヤーに反映することでアニメーションが変更できます。

Unityの下のプロジェクトフォルダから、[Create]->[Game Creator]->[Characters]->[Locomotion State]を選択してください。
こんな感じのアイコンのアセットができると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/269cdeaa-a46f-0c03-c3a4-b233503140a0.png)
StateUnityChanという名前にしておきます。
作成したアニメーションステートを、PlayerのCharacter Animationに設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/d0064856-3251-3d88-84b0-7abbd8da79f8.png)
作ったアニメーションステートを見ると、長いリストが表示されていると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/28eca167-e590-9fbf-b966-e20aca10d9ed.png)
Character@idleをUnityChanのアニメーションである「WAIT00」、Character@runFowardを同じくUnityChanのアニメーションの「RUN00_F」に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/00046451-7763-b967-32cb-f2d77af35730.png)
実行するとアニメーションがいい感じに適用されてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517786/2ca25ff1-942f-82e4-018a-2b0ecd3b060d.png)


# まとめ
Game CreatorはUnityの有料アセットになります。Visual Scriptingでロジックを組み込むことが可能です。Triggers/Actions/Conditionsを組み合わせて様々な処理を追加していくことが出来ます。今回は触れませんでしたが、これら3つの基本ロジックは自分で作ることも可能です。次回があればこの3つの機能について深堀りしていきたいと思います。