Let’s make a coin pusher


This time, I will explain how to make simple game like coin pusher using Arbor.

If you have not already seen the basic section, please read the basic section first.

Basic

Operating environment

This tutorial is created in the following environment.

  • Unity 5.3.0f4
  • Arbor 2.2.0

Depending on the version, please understand that there are parts different from the explanation.

Preparation of tutorial project

Create project

First of all, please create a project for the tutorial.

Project Name ArborTutorial03
Mode 3D
Assets to import Arbor

For information on creating projects and importing Arbor, please refer to “Getting Started: Preparation for using Arbor”.

Import tutorial package

This time, there are packages in which objects used in this tutorial are arranged in advance, please import here.

Download “Tutorial03” Tutorial03.unitypackage – Downloaded 38 times – 8 KB

For details on how to import asset packages, see the Unity official manual “Asset Packages”.

Unity Manual “Asset Packages”

Open the tutorial scene

First of all, there are scenes in which objects are arranged in advance, please open here.

Double-click the Tutorial03 scene in Tutorial03/Scenes/ to open it.

The scene where the object was placed opened, but since it has not set any behavior even if playing starts as it is, it does not hold as a game.

Move Pusher object

Let’s begin by moving the Pusher object to push and drop the coin.

Added ArborFSM

Select the Pusher object from Hierarchy and add ArborFSM from the “Add Component” button in the Inspector window.

GIF

Open the Arbor Editor window from the “Open Editor” button of the ArborFSM you added.

Creating a Movement state

Next, create a Movement state to move.

GIF

Add TweenRigidbodyPosition

This time, we will move it using TweenRigidbodyPosition.

For more information on TweenRigidbodyPosition, see Arbor Reference “TweenRigidbodyPosition”.

Arbor Reference “TweenRigidbodyPosition”

Please add “Tween> TweenRigidbodyPosition” from Add Behaviour of Movement state.

GIF

Setting of TweenRigidbodyPosition

We will set TweenRigidbodyPosition so that it moves repeatedly back and forth.

The items to change are as follows.

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

Operation check

You can see that the Pusher object goes back and forth when executed.

GIF

Instantiate coins from Spawner object

Next, create a process to instantiate a coin by pressing the Space key.

Added ArborFSM

Select the Spawner object from Hierarchy and add ArborFSM from the “Add Component” button in the Inspector window.

GIF

Open the Arbor Editor window from the “Open Editor” button of the ArborFSM you added.

Creating a Wait Key state

Create Wait Key state to wait until space key is pressed.

GIF

Added KeyDownTransition

In this time, we will use KeyDownTransition to make transition when key is pressed.

For more information on KeyDownTransition, see Arbor reference “KeyDownTransition”.

Arbor Reference “KeyDownTransition”

Add “Transition> Input> KeyDownTransition” from Add Behaviour of Wait Key state.

GIF

Setting KeyDownTransition

Set KeyDownTransition to transition with spacebar.

Key Code Space

“Next State” has not yet another state, so set it later.

Creating Spawn Coin State

Next, create a Spawn Coin state that instantiates coins.

GIF

Add InstantiateGameObject

We use InstantiateGameObject to instantiate objects.

For more information on InstantiateGameObject, see Arbor Reference “InstantiateGameObject”.

Arbor Reference “InstantiateGameObject”

Add “GameObject> InstantiateGameObject” from Add Behaviour of Spawn Coin state.

GIF

Set InstantiateGameObject

Set it to instantiate a Coin object prepared as a Prefab.

Prefab Assets/Tutorial03/Prefabs/Coin object
Init Transform Spawner object’s own Transform

Added GoToTransition

When coin generation is done, use GoToTransition to return to Wait Key state.

For more information on GoToTransition, see Arbor Reference “GoToTransition”.

Arbor Reference “GoToTransition”

Add “Transition> GoToTransition” from Add Behaviour of Spawn Coin state.

GIF

Transition setting

Finally, set it to transit the wait key state and the spawn coin state.

Connect from the “Next State” in the KeyDownTransition in the Wait Key state to the Spawn Coin state, from “Next State” in the GoToTransition in the Spawn Coin state to the Wait Key state respectively.

GIF

Operation check

You can see coins are instantiated from the Spawner object each time you press the Space key.

GIF

Destroy the coin that hit the Saucer object

Next, I will create a process when the coin falls.

Added ArborFSM

Select the Saucer object from Hierarchy and add ArborFSM from the “Add Component” button in the Inspector window.

GIF

Open the Arbor Editor window from the “Open Editor” button of the ArborFSM you added.

Create Wait Trigger state

Then, when OnTriggerEnter comes, I will create a state for processing.

For details on OnTriggerEnter, refer to the “Triggers” section of the Unity manual “Colliders”.

Unity Manual “Colliders”

Please create a state named “Wait Trigger”.

GIF

Add OnTriggerEnterTransition

Add OnTriggerEnterTransition to Wait Trigger state.

OnTriggerEnterTransition is the behavior of transitioning state when OnTriggerEnter is called.

For details, see Arbor Reference “OnTriggerEnterTransition”.

Arbor Reference “OnTriggerEnterTransition”

Let’s add “Transition> Collision> OnTriggerEnterTransition” from Add Behaviour in Wait Trigger state.

GIF

Since it is only the coin to judge the contact, setting Is Check Tag and Tag is unnecessary.

In this example, we will extract the GameObject from the Collider slot via the Calculator node and create the action to destroy.

Create a Component.GetGameObject Calculator node

First, use the Component.GetGameObject Calculator node to get a GameObject from a component such as Collider.

For Component.GetGameObject, see the Arbor reference “Component.GetGameObject”.

Arbor Reference “Component.GetGameObject”

From the right-click menu, select “Component> Component.GetGameObject” from “Create Calculator” to create the Component.GetGameObject operation node.

GIF

Connect from Collider slot of OnTriggerEnterTransition

Connect from the Collider slot of OnTriggerEnterTransition to the Component slot of Component.GetGameObject.

GIF

Create Trigger Enter state

Create a state for processing by Trigger Enter.

Please create a state named “Trigger Enter”.

GIF

Added DestroyGameObject

In the Trigger Enter state, add DestroyGameObject to Destroy the Coin object.

DestroyGameObject is a behavior to delete the specified GameObject.

For details, refer to Arbor reference “DestroyGameObject”.

Arbor Reference “DestroyGameObject”

Now add “GameObject> DestroyGameObject” from Add Behaviour in the Trigger Enter state.

GIF

Setting of DestroyGameObject

To receive from the GameObject slot of Component.GetGameObject, change the way to specify Target to Calculator.

Please click “Type selection icon” of Target property and select “Calculator”.

GIF

Connect from Target slot to GameObject slot of Component.GetGameObject.

GIF

Added GoToTransition

Add GoToTransition to transition from Trigger Enter state to Wait Trigger.

Add “Transition> GoToTransition” from Add Behaviour of Trigger Enter state.

GIF

Transition connection

Make transition from OnTriggerEnterTransition in Wait Trigger state to Trigger Enter state.

Likewise, the transition from GoToTransition in the Trigger Enter state to Wait Trigger state is made.

GIF

Change TransitionTiming

Processing of TriggerEnter state is set to transition in Immediate mode because it wants to be done instantaneously each time OnTriggerEnter is called.

For TransitionTiming, see “Getting Started : About TransitionTiming”.

“Getting Started : About TransitionTiming”

Change Transition Timing to Immediate from the setting icon of Next State of OnTriggerEnterTransition.

GIF

Likewise, GoToTransition will also be changed to Immediate to instantly return to the Wait Trigger state as soon as coins are deleted.

GIF

Operation check

First press “Play button” to execute.

I want to confirm deleting the coin, so adjust the position of the Spawner object so that it falls directly to Saucer.

Set the Z coordinate of the Spawner object to -3.5.
(When you finish playing, you will return to the original position)

Then, in the Game window, press the Space key and confirm that the removed coins are deleted the moment they touch the Saucer object.

GIF

If it is difficult to understand that it was deleted, it is easy to see the Scene window.

GIF

Supplement (OnTriggerEnterDestroy)

You can also use OnTriggerEnterDestroy if you just delete coins that touched the Saucer object.

OnTriggerEnterDestroy is a behavior to delete the target game object.

For more information on OnTriggerEnterDestroy, see Arbor Reference “OnTriggerEnterDestroy”.

Arbor Reference “OnTriggerEnterDestroy”

This time, I have introduced another method because I want to do other than deletion processing.

Score

Let’s add a score next.

Create a ParameterContainer object

Create a Score parameter using ParameterContainer.

ParameterContainer is a component for storing parameters used by ArborFSM.

For details, see “About ParameterContainer” in the manual.

About ParameterContainer

Let’s create an object with ParameterContainer by selecting “Arbor> ParameterContainer” from Hierarchy’s Create button.

GIF

Add Score parameter

Add the Score parameter from the Inspector of the created ParameterContainer.

Click the + button, select “Int”, and set the name of the created parameter to “Score”.

GIF

Add CalcParameter

If you do not open the state machine of Saucer with Arbor Editor, please open it from the Open Editor button.

In the Saucer’s Trigger Enter state, add CalcParameter to increase the Score parameter.

CalcParameter is the behavior to compute each parameter of ParameterContainer.

For details, refer to the Arbor reference “CalcParameter”.

Arbor Reference “CalcParameter”

Let’s add “Parameter> CalcParameter” from Add Behaviour in the Trigger Enter state.

GIF

Change the position of CalcParameter

Since CalcParameter is at the bottom and after GoToTransition, the transition process takes precedence and CalcParameter will not be processed.

Let’s change CalcParameter above GoToTransition.

Drag and drop the title bar of CalcParameter onto GoToTransition.

GIF

Setting of CalcParameter

Set CalcParameter to increment the Score parameter by 1.

Reference
    Container ParameterContainer object created
    Parameter Score parameter
Function Add
Int Value 1

Now you can set 1 to increase for Score parameter.

Operation check

First of all, press “play button” to execute.

In order to confirm that the score increases, adjust the position of the Spawner object so that the coin falls directly to Saucer.

Set the Z coordinate of the Spawner object to -3.5.
(When you finish playing, you will return to the original position)

Then, select ParameterContainer object from Hierarchy and display Inspector.

If you press the space key in the Game window and the coin disappears, you can see that the Score parameter is increasing at the same time.

GIF

Show score

Let’s try to display the score in UI at the end.

Create a ScoreText object

Select “UI> Text” from Hierarchy’s Create button to create it, and set the object name to ScoreText.

GIF

Set RectTransform of ScoreText

Adjust the position of ScoreText to a visible position.

Anchor Bottom left
Pos (100,30,0)

Added ArborFSM

Add ArborFSM to the ScoreText object.

From the Add Component button, select “Arbor> ArborFSM”.

GIF

Then open the Arbor Editor by pressing the Open Editor button.

Create SetText state

To set the text, create a state named SetText.

GIF

Added UISetTextFromParameter

Use UISetTextFromParameter to set UIText from the Score parameter.

For more information on UISetTextFromParameter, see Arbor reference “UISetTextFromParameter”.

Arbor Reference “UISetTextFromParameter”

Let’s add ‘UI> UISetTextFromParameter’ from addition of Behavior of SetText state.

GIF

Setting UISetTextFromParameter

We will set the UIText to update every time the Score parameter is changed.

Text Text component of ScoreText object
Parameter
    Container ParameterContainer object
    Parameter Score parameter
Change Timing Update Check

Operation check

First of all, press “Play button” to execute.

In order to confirm that the score increases, adjust the position of the Spawner object so that the coin falls directly to Saucer.

Set the Z coordinate of the Spawner object to -3.5.
(When you finish playing, you will return to the original position)

You can see that the ScoreText display changes each time the coin falls on the Saucer object by pressing the Space key in the Game window.

GIF

Final confirmation

Let’s check through all lastly whether it all works properly.

Press “Play button” to execute.

Please check whether it is correctly pushed by Pusher object or falling to Saucer by pressing Space key in Game window.

GIF

Difference from Example 7 (Coin Pusher)

Coin Pusher is also included in the example of Arbor package.

In this tutorial, I am not going to make a game clear judgment etc, but in the example version we are going to check once.

The rough differences are as follows.

  • Added flow from start to game over to Stage object
  • Added to reduce the score every time you issue a coin from Spawner.
    (If you do not have a score you can not even have coins)

Next step

This completes the “Let’s make a coin pusher”.

“Let’s make a coin pusher” complete tweets

Next time is “Let’s make an enemy of 2DSTG”.

I will explain how to control enemy movement and weapon behavior with Arbor.

“Let’s make an enemy of 2DSTG”