コインプッシャーを作ろう


今回は、Arborを使用してコインプッシャーのような簡単なゲームの作り方について解説します。

まだ基礎編を見ていない方は、先に基礎編をご覧ください。

基礎編

Contents

動作環境

このチュートリアルは、以下の環境で作成しております。

  • Unity 5.3.0f4
  • Arbor 2.2.0

バージョンによっては説明と異なる箇所があるかと思いますのがご了承ください。

チュートリアル用プロジェクトの準備

プロジェクトの作成

まずは、チュートリアル用にプロジェクトを作成してください。

プロジェクト名 ArborTutorial03
モード 3D
インポートするアセット Arbor

プロジェクトの作成やArborのインポートについては「はじめに : Arborを使用するための準備」を参照してください。

チュートリアル用パッケージのインポート

今回は、このチュートリアルで使用するオブジェクトをあらかじめ配置したパッケージがありますので、こちらをインポートしてください。

“Tutorial03” をダウンロード Tutorial03.unitypackage – 38 回のダウンロード – 8 KB

アセットパッケージのインポートの方法については、Unity公式マニュアル「Asset Packages」を参照してください。

Unity公式マニュアル「Asset Packages」

チュートリアル用シーンを開く

まずは、あらかじめオブジェクトを配置したシーンがあるので、こちらを開いてください。

Tutorial03/Scenes/にあるTutorial03シーンをダブルクリックして開きます。

オブジェクトを配置したシーンが開きましたが、このままプレイ開始しても何も挙動を設定していないためゲームとして成り立っていません。

Pusherオブジェクトを動かす

まずは、コインを押して落とすためのPusherオブジェクトを動かすところから始めましょう。

ArborFSMの追加

HierarchyからPusherオブジェクトを選択し、Inspectorウィンドウの「Add Component」ボタンからArborFSMを追加します。

GIF

追加したArborFSMの「Open Editor」ボタンからArbor Editorウィンドウを開いてください。

Movementステートの作成

次に、動かすためのMovementステートを作成します。

GIF

TweenRigidbodyPositionの追加

今回は、TweenRigidbodyPositionを使用して移動させます。

TweenRigidbodyPositionについて詳しくは、Arborリファレンス「TweenRigidbodyPosition」を参照してください。

Arborリファレンス「TweenRigidbodyPosition」

Movementステートの挙動追加から「Tween > TweenRigidbodyPosition」を追加してください。

GIF

TweenRigidbodyPositionの設定

前後に繰り返し動くようにTweenRigidbodyPositionを設定していきます。

変更する項目は以下の通りです。

Type PingPong
From (0,1,4)
To (0,1,2.5)

動作確認

実行するとPusherオブジェクトが前後するのが確認できます。

GIF

Spawnerオブジェクトからコインを出す

次に、スペースキーを押したらコインを出す処理を作成します。

ArborFSMの追加

HierarchyからSpawnerオブジェクトを選択し、Inspectorウィンドウの「Add Component」ボタンからArborFSMを追加します。

GIF

追加したArborFSMの「Open Editor」ボタンからArbor Editorウィンドウを開いてください。

Wait Keyステートの作成

スペースキーを押すまで待機するWait Keyステートを作成します。

GIF

KeyDownTransitionの追加

今回は、KeyDownTransitionを使用してキーの押下時に遷移するようにします。

KeyDownTransitionについて詳しくは、Arborリファレンス「KeyDownTransition」を参照してください。

Arborリファレンス「KeyDownTransition」

Wait Keyステートの挙動追加から「Transition > Input > KeyDownTransition」を追加します。

GIF

KeyDownTransitionの設定

スペースキーで遷移するようKeyDownTransitionを設定します。

Key Code Space

「Next State」はまだ他のステートがないため、後で設定します。

Spawn Coinステートの作成

続いて、コインを発生させるSpawn Coinステートを作成します。

GIF

InstantiateGameObjectの追加

オブジェクトの生成にはInstantiateGameObjectを使用します。

InstantiateGameObjectについて詳しくは、Arborリファレンス「InstantiateGameObject」を参照してください。

Arborリファレンス「InstantiateGameObject」

Spawn Coinステートの挙動追加から「GameObject > InstantiateGameObject」を追加します。

GIF

InstantiateGameObjectの設定

Prefabとして用意してあるCoinオブジェクトを生成するように設定します。

Prefab Assets/Tutorial03/Prefabs/Coinオブジェクト
Init Transform Spawnerオブジェクト自身のTransform

GoToTransitionの追加

コインの生成が行われたらGoToTransitionを使用してWait Keyステートに戻します。

GoToTransitionについて詳しくは、Arborリファレンス「GoToTransition」を参照してください。

Arborリファレンス「GoToTransition」

Spawn Coinステートの挙動追加から「Transition > GoToTransition」を追加します。

GIF

遷移の設定

最後に、Wait KeyステートとSpawn Coinステートを遷移するように設定します。

Wait KeyステートのKeyDownTransitionにある「Next State」からSpawn Coinステートへ、Spawn CoinステートのGoToTransitionにある「Next State」からWait Keyステートへ、それぞれ接続します。

GIF

動作確認

実行するとスペースキーを押すたびにSpawnerオブジェクトからコインが生成されるのが確認できます。

GIF

Saucerオブジェクトに触れたコインを削除する

次に、コインが落ちた場合の処理を作成していきます。

ArborFSMの追加

HierarchyからSaucerオブジェクトを選択し、Inspectorウィンドウの「Add Component」ボタンからArborFSMを追加します。

GIF

追加したArborFSMの「Open Editor」ボタンからArbor Editorウィンドウを開いてください。

Wait Triggerステートの作成

では、OnTriggerEnterが来たら処理するためのステートを作成します。

OnTriggerEnterについては、Unityマニュアル「Colliders」の「Triggers」の項を参照してください。

Unityマニュアル「Colliders」

「Wait Trigger」という名前のステートを作成してください。

GIF

OnTriggerEnterTransitionの追加

Wait TriggerステートにOnTriggerEnterTransitionを追加します。

OnTriggerEnterTransitionはOnTriggerEnterが呼ばれた際にステートを遷移する挙動です。

詳しくは、Arborリファレンス「OnTriggerEnterTransition」を参照してください。

Arborリファレンス「OnTriggerEnterTransition」

それでは、Wait Triggerステートの挙動追加から「Transition > Collision > OnTriggerEnterTransition」を追加しましょう。

GIF

接触判定する相手はコインのみなので、Is Check TagとTagの設定は不要です。

今回は、Colliderスロットから演算ノードを介してGameObjectを取り出し、削除する動作を作成してみます。

Component.GetGameObject演算ノードの作成

まず、ColliderなどのコンポーネントからGameObjectを取得するには、Component.GetGameObject演算ノードを使用します。

Component.GetGameObjectについては、Arborリファレンス「Component.GetGameObject」を参照してください。

Arborリファレンス「Component.GetGameObject」

右クリックメニューの「演算ノード作成」から「Component > Component.GetGameObject」を選択してComponent.GetGameObject演算ノードを作成します。

GIF

OnTriggerEnterTransitionのColliderスロットから接続

OnTriggerEnterTransitionのColliderスロットからComponent.GetGameObjectのComponentスロットに接続します。

GIF

Trigger Enterステートの作成

Trigger Enterによる処理を行うためのステートを作成します。

「Trigger Enter」という名前のステートを作成してください。

GIF

DestroyGameObjectの追加

Trigger EnterステートではCoinオブジェクトを削除するためDestroyGameObjectを追加します。

DestroyGameObjectは、指定したGameObjectを削除する挙動です。

詳しくは、Arborリファレンス「DestroyGameObject」を参照してください。

Arborリファレンス「DestroyGameObject」

それでは、Trigger Enterステートの挙動追加から、「GameObject > DestroyGameObject」を追加します。

GIF

DestroyGameObjectの設定

Component.GetGameObjectのGameObjectスロットから受け取るために、Targetの指定方法をCalculatorに変更します。

Targetプロパティの「タイプ選択アイコン」をクリックして「Calculator」を選択してください。

GIF

TargetスロットからComponent.GetGameObjectのGameObjectスロットへ接続します。

GIF

GoToTransitionの追加

Trigger EnterステートからWait Triggerへ遷移させるためにGoToTransitionを追加します。

Trigger Enterステートの挙動追加から、「Transition > GoToTransition」を追加します。

GIF

遷移の接続

Wait TriggerステートのOnTriggerEnterTransitionからTrigger Enterステートへ遷移するようにします。

同様にTrigger EnterステートのGoToTransitionからWait Triggerステートへ遷移するようにします。

GIF

TransitionTimingの変更

TriggerEnterステートの処理はOnTriggerEnterが呼ばれるたびに瞬時に行われて欲しいため、Immediateモードで遷移するように設定します。

TransitionTimingについては、「はじめに:TransitionTimingについて」を参照してください。

「はじめに:TransitionTimingについて」

OnTriggerEnterTransitionのNext Stateの設定アイコンから、Transition TimingをImmediateに変更してください。

GIF

同様にコインの削除が行われ次第瞬時にWait Triggerステートへ戻すため、GoToTransitionもImmediateに変更します。

GIF

動作確認

まず最初に「プレイボタン」を押して実行します。

コインを削除するのを確認したいため、Spawnerオブジェクトの位置を調整して、直接Saucerに落ちるようにします。

SpawnerオブジェクトのZ座標を-3.5にしてください。
(プレイ終了すると元の位置に戻ります)

そして、Gameウィンドウでスペースキーを押して出たコインがSaucerオブジェクトに触れた瞬間削除されるのを確認します。

GIF

削除されたのがわかりにくければSceneウィンドウも見てみるとわかりやすいです。

GIF

補足(OnTriggerEnterDestroy)

Saucerオブジェクトに触れたコインを削除するだけであればOnTriggerEnterDestroyも使用できます。

OnTriggerEnterDestroyは、触れた対象のゲームオブジェクトを削除する挙動です。

OnTriggerEnterDestroyについて詳しくは、Arborリファレンス「OnTriggerEnterDestroy」を参照してください。

Arborリファレンス「OnTriggerEnterDestroy」

今回は削除処理以外にも行いたいことがあるため別の方法を紹介しました。

スコア

次にスコアを追加してみましょう。

ParameterContainerオブジェクトの作成

ScoreパラメータをParameterContainerを使用して作成します。

ParameterContainerとはArborFSMで使用するパラメータを格納するためのコンポーネントです。

詳しくは、マニュアルの「ParameterContainerについて」を参照してください。

ParameterContainerについて

それでは、HierarchyのCreateボタンから「Arbor > ParameterContainer」を選択して、ParameterContainerが付いたオブジェクトを作成しましょう。

GIF

スコアパラメータの追加

作成したParameterContainerのInspectorから、Scoreパラメータを追加します。

+ボタンをクリックし「Int」を選択、作成されたパラメータの名前を「Score」にします。

GIF

CalcParameterの追加

Arbor EditorでSaucerのステートマシンを開いていなければ、Open Editorボタンから開くようにしてください。

SaucerのTrigger Enterステートに、Scoreパラメータを増やすためCalcParameterを追加します。

CalcParameterとは、ParameterContainerの各パラメータを計算するための挙動です。

詳しくは、Arborリファレンス「CalcParameter」を参照してください。

Arborリファレンス「CalcParameter」

それでは、Trigger Enterステートの挙動追加から「Parameter > CalcParameter」を追加しましょう。

GIF

CalcParameterの位置変更

CalcParameterが一番下になっておりGoToTransitionよりも後にあるため遷移処理が優先されてCalcParameterは処理されなくなってしまいます。

そこで、CalcParameterをGoToTransitionの上に変更しましょう。

CalcParameterのタイトルバーをドラッグ&ドロップでGoToTransitionの上に持っていきます。

GIF

CalcParameterの設定

Scoreパラメータを1増加させるようにCalcParameterを設定します。

Reference
    Container 作成したParameterContainerオブジェクト
    Parameter Scoreパラメータ
Function Add
Int Value 1

これでScoreパラメータに対して1増加するように設定できました。

動作確認

まず初めに「プレイボタン」を押して実行します。

スコアが増えるのを確認したいため、Spawnerオブジェクトの位置を調整して、コインが直接Saucerに落ちるようにします。

SpawnerオブジェクトのZ座標を-3.5にしてください。
(プレイ終了すると元の位置に戻ります)

そして、HierarychyからParameterContainerオブジェクトを選択しInspectorを表示しておきます。

Gameウィンドウでスペースを押しコインが消えると、同時にScoreパラメータが増えているのが確認できます。

GIF

スコアの表示

最後にスコアをUIで表示するようにしてみましょう。

ScoreTextオブジェクトの作成

HierarchyのCreateボタンから「UI > Text」を選択して作成し、オブジェクト名をScoreTextとします。

GIF

ScoreTextのRectTransformを設定

ScoreTextの位置を見える位置に調整します。

Anchor 左下
Pos (100,30,0)

ArborFSMの追加

ScoreTextオブジェクトにArborFSMを追加します。

Add Componentボタンから、「Arbor > ArborFSM」を選択してください。

GIF

そして、Open Editorボタンを押してArbor Editorで開いてください。

SetTextステートの作成

テキストをセットするため、SetTextという名前でステートを作成します。

GIF

UISetTextFromParameterの追加

ScoreパラメータからUITextを設定するにはUISetTextFromParameterを使用します。

UISetTextFromParameterについての詳細は、Arborマニュアル「UISetTextFromParameter」を参照してください。

Arborマニュアル「UISetTextFromParameter」

それでは、SetTextステートの挙動追加から、「UI > UISetTextFromParameter」を追加します。

GIF

UISetTextFromParameterの設定

Scoreパラメータが変更されるたびにUITextを更新するように設定していきます。

Text ScoreTextオブジェクトのTextコンポーネント
Parameter
    Container ParameterContainerオブジェクト
    Parameter Scoreパラメータ
Change Timing Update チェックを付ける

動作確認

まず初めに「プレイボタン」を押して実行します。

スコアが増えるのを確認したいため、Spawnerオブジェクトの位置を調整して、コインが直接Saucerに落ちるようにします。

SpawnerオブジェクトのZ座標を-3.5にしてください。
(プレイ終了すると元の位置に戻ります)

Gameウィンドウでスペースキーを押し、コインがSaucerオブジェクトに落ちるたびにScoreTextの表示が変わるのが確認できます。

GIF

最終確認

最後にすべての動作が動くか通しで確認してみましょう。

プレイボタン」を押して実行します。

Gameウィンドウでスペースキーを押して、正しくPusherオブジェクトで押されるか、Saucerに落ちるかなどを確認してみてください。

GIF

Example 7 (Coin Pusher)との違い

Coin PusherはArborパッケージのExampleにも同梱しています。

今回はチュートリアルということでゲームクリア判定などは行っていませんが、Example版では行っていますので一度確認してみてください。

大まかな違いは以下の通りです。

  • Stageオブジェクトに開始からゲームオーバーまでの流れを追加
  • Spawnerからコインを出すたびにスコアを減らすよう追加
    (スコアがないならコインも出せない)

次のステップ

以上で「コインプッシャーを作ろう」は完了です。

「コインプッシャーを作ろう」完了をツイート

次回は「2DSTGの敵を作ろう」です。

敵の動きや武器の挙動をArborで制御する方法について解説します。

2DSTGの敵を作ろう