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

Contents

Operating environment

This tutorial is created in the following environment.

Unity 2019.4.8f1
Arbor 3.7.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 “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 590 times – 64 KB

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

Unity Manual “Asset Packages”

Note

If your browser is Firefox, the downloaded data may be corrupted.

If the package import fails, please download it with another browser such as Edge or Chrome.

Open the tutorial scene

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

  • Double-click “Assets/Tutorial03/Scenes/Tutorial03 Scene” from the Project window.

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

Add an ArborFSM component to the Pusher object.

  • Select the “Pusher” object from the Hierarchy window.
  • Click the “Add Component” button in the Inspector window.
  • Select ” Arbor > ArborFSM” from the component selection window.
  • Click the “Open Editor” button of the added ArborFSM to open the Arbor Editor window.
GIF

Creating a Movement state

Next, create a Movement state to move.

  • Right-click on the empty area of the graph.
  • Select “Create State” from the menu.
  • Confirm the state name as “Movement”.
GIF

Add TweenRigidbodyPosition

This time, we will move it using TweenRigidbodyPosition.

  • Click the Movement state setting icon.
  • Select “Add Behaviour” from the menu.
  • Select “Tween > TweenRigidbodyPosition” from the behavior selection window.
GIF

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

Arbor Reference “TweenRigidbodyPosition”

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 the Hierarchy window.
  • Click the “Add Component” button in the Inspector window.
  • Select ” Arbor > ArborFSM” from the component selection window.
  • Click the “Open Editor” button of the added ArborFSM to open the Arbor Editor window.
GIF

Creating a Wait Key state

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

  • Right-click on the empty area of the graph.
  • Select “Create State” from the menu.
  • Confirm the state name as “Wait Key”.
GIF

Added KeyDownTransition

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

  • Click the Wait Key state setting icon.
  • Select “Add Behaviour” from the menu.
  • Select “Transition> Input> KeyDownTransition” from the behavior selection window.
GIF

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

Arbor Reference “KeyDownTransition”

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.

  • Right-click on the empty area of the graph.
  • Select “Create State” from the menu.
  • Confirm the state name as “Spawn Coin”.
GIF

Add InstantiateGameObject

We use InstantiateGameObject to instantiate objects.

  • Click the Spawn Coin state setting icon.
  • Select “Add Behaviour” from the menu.
  • Select “GameObject > InstantiateGameObject” from the behavior selection window.
GIF

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

Arbor Reference “InstantiateGameObject”

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.

  • Click the Spawn Coin state setting icon.
  • Select “Add Behaviour” from the menu.
  • Select “Transition > GoToTransition” from the behavior selection window.
GIF

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

Arbor Reference “GoToTransition”

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.
  • Connect from the “Next State” in the GoToTransition in the Spawn Coin state to the Wait Key state.
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 the Hierarchy window.
  • Click the “Add Component” button in the Inspector window.
  • Select ” Arbor > ArborFSM” from the component selection window.
  • Click the “Open Editor” button of the added ArborFSM to open the Arbor Editor window.
GIF

Create Wait Trigger state

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

  • Right-click on the empty area of the graph.
  • Select “Create State” from the menu.
  • Confirm the state name as “Wait Trigger”.
GIF

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

Unity Manual “Colliders”

Add OnTriggerEnterTransition

Add OnTriggerEnterTransition to Wait Trigger state.

  • Click the Wait Trigger state setting icon.
  • Select “Add Behaviour” from the menu.
  • Select “Transition > Collision > OnTriggerEnterTransition” from the behavior selection window.
GIF

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

For details, see Arbor Reference “OnTriggerEnterTransition”.

Arbor Reference “OnTriggerEnterTransition”

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.

  • Right-click on an empty area near the right side of the Wait Trigger state.
  • Select “Create Calculator” from the menu.
  • Select “Component > Component.GetGameObject” from the calculator node selection window.
GIF

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

Arbor Reference “Component.GetGameObject”

Connect from Collider slot of OnTriggerEnterTransition

Connect to Component.GetGameObject from Collider’s output slot and pass the value.

  • 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.

  • Right-click on an empty area near the right side of the Component.GetGameObject calculator node.
  • Select “Create State” from the menu.
  • Confirm the state name as “Trigger Enter”.
GIF

Added DestroyGameObject

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

  • Click the Trigger Enter state setting icon.
  • Select “Add Behaviour” from the menu.
  • Select “GameObject > DestroyGameObject” from the behavior selection window.
GIF

DestroyGameObject is a behavior to delete the specified GameObject.

For details, refer to Arbor reference “DestroyGameObject”.

Arbor Reference “DestroyGameObject”

Setting of DestroyGameObject

Receives GameObject from Component.GetGameObject.

  • Connect the GameObject slot of Component.GetGameObject to the Target slot.
GIF

Added GoToTransition

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

  • Click the Trigger Enter state setting icon.
  • Select “Add Behaviour” from the menu.
  • Select “Transition > GoToTransition” from the behavior selection window.
GIF

Transition connection

  • Connect from OnTriggerEnterTransition in the Wait Trigger state to Trigger Enter state.
  • Connect from GoToTransition in the Trigger  Enter state to Wait Trigger state.
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.

  • Click the “Next State” setting icon of OnTriggerEnterTransition in the Wait Trigger state.
  • Changed Transition Timing in the setting window to Immediate.
GIF

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

  • Click the “Next State” setting icon of GoToTransition in the Trigger Enter state.
  • Changed Transition Timing in the setting window to Immediate.
GIF

For TransitionTiming, see “Manual : TransitionTiming”.

“Manual : TransitionTiming”

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.

  • Click the + button on the Hierarchy window.
  • Select “Arbor > Parameter Container” from the menu.
GIF

ParameterContainer is a component for storing parameters used by ArborFSM.

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

About ParameterContainer

Add Score parameter

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

  • Click the + button.
  • Select “Int” from the menu.
  • Rename 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.

  • Click the Trigger Enter state setting icon.
  • Select “Add Behaviour” from the menu.
  • Select “Parameter> CalcParameter” from the behavior selection window.
GIF

CalcParameter is the behavior to compute each parameter of ParameterContainer.

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

Arbor Reference “CalcParameter”

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.

  • Start dragging the title bar of CalcParameter
  • Drop between DestroyGameObject and 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

  • lick the + button on the Hierarchy window.
  • Select “UI > Text” from the menu.
  • Changed the object name to “Score Text”.
GIF

Set RectTransform of ScoreText

Adjust the position of ScoreText to a visible position.

  • Change Anchor to bottom left.
  • Change PosX to 100.
  • Change PosY to 30.
GIF
Anchor Bottom left
Pos (100,30,0)

Added ArborFSM

Add ArborFSM to the ScoreText object.

  • Click the “Add Component” button in the ScoreText object’s Inspector window.
  • Select ” Arbor > ArborFSM” from the component selection window.
  • Click the “Open Editor” button of the added ArborFSM to open the Arbor Editor window.
GIF

Create SetText state

To set the text, create a state named SetText.

  • Right-click on the empty area of the graph.
  • Select “Create State” from the menu.
  • Confirm the state name as “SetText”.
GIF

Added UISetTextFromParameter

Use UISetTextFromParameter to set UIText from the Score parameter.

  • Click the Trigger Enter state setting icon.
  • Select “Add Behaviour” from the menu.
  • Select “UI > UISetTextFromParameter” from the behavior selection window.
GIF

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

Arbor Reference “UISetTextFromParameter”

Setting UISetTextFromParameter

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

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”

Privacy Preference Center

Your Privacy

This site uses cookies to display contents and advertisements tailored to users, provide social media functions, measure advertisement impressions and clicks. We also gather information on users' site usage status and provide them to social media, advertisement distribution and data analysis partners. Each partner may use this information in combination with other information that the user provided to each partner or other information gathered when the user used the service of each partner.

Analytics, Ads