Skip to content

Using a node graph to spawn a butterfly

Node graphs utilize a node-based workflow to help you create remarkable gameplay features easily and quickly. In this tutorial, we will explore how to use a node graph to create a butterfly flying out when a player approaches a bush.

Prerequisite

Visual Studio Code is installed and integrated with your Studio. If you haven't done this already, follow the instructions in How to start coding to download and integrate.

Adding models, a component, and a trigger box

Adding a bush and a butterfly

  1. Find a bush model and a butterfly model in Asset Library and add them to your assets. In our example, we add model BushBig_B for the bush, and model Butterfly_Monarch for the butterfly.

  2. Place the two models into the scene by choosing Scenery>My Assets. To adjust the model position, rotation, or scale, specify in the Transform pane or simply drag the model.

    Note: The butterfly model can be placed anywhere in the scene. A copy of this model will spawn rather than the model itself and the model's position has no effect on the spawn point.

    take-out-models

Adding a Behavior_SpawnableObjectMarker component to the butterfly

To make the butterfly fly out around the bush, we need to add a Behavior_SpawnableObjectMarker component to the butterfly. This component makes a specific object spawnable once attached to it.

  1. Find the Behavior_SpawnableObjectMarker component in Asset Library and add it to your assets.

  2. Choose the butterfly and open its Properties window by clicking more.

  3. Add the component to the butterfly by choosing + Feature>Assets>Behavior_SpawnableObjectMarker. Add component

  4. Give this component a name. In our example, we name it bug. Name component

Adding a trigger box to the bush

To make a spawn event happen, choose the bush and add a trigger box to it by choosing + Trigger>Sphere. We also adjust the center and radius of the sphere trigger.

Add sphere trigger

Creating a node graph

Attach a new graph file to bush by selecting the bush and choosing + Feature>Add node graph>+ New node graph. You can name it Spawner. For more details, see adding a node graph.

Add node graph

Then click edit button to open your code editor and start adding nodes.

Adding and connecting nodes

Setting the trigger and trigger condition

First of all, we need to set the bush as the trigger, and the trigger condition to be upon players entering the trigger box.

  1. Click Add Node or right-click a blank space in the Editor to bring up the Add Node search box. Then type onTriggerEnter and select the first search result. Note that the second search result includes two entity parameters, which are not applicable in this case.

    search onTriggerEnter

    On the OnTriggerEnter node, trigger stands for the object with a trigger box while entity stands for the object entering the trigger box.

    onTriggerEnter

  2. With this node an event will be triggered when any trigger box in the scene is entered. So we need to constrain it to be triggered only when a player gets close to the bush. Make sure the trigger is the bush itself by typing GetEntityId in the Add Node search box and filtering to locate BushBig_B as the entity.

    GetEntityId_bush

  3. Similarly we use GetEntityId to set self (the current object) as another entity. We also use Integer Equal to connect the two entities by drawing lines between nodes. Equate_GetEntityId

  4. Let's move on to set the player entering the trigger box as the trigger condition by using IsPlayerCharacter, Branch, and And nodes. Connect Player with Condition

  5. Connect all nodes created so far as follows to complete setting up the trigger and the trigger condition (with white lines connecting the nodes to be executed): Connect trigger and condition

Setting the object to spawn and the spawn position

To allow a butterfly to show up right above the bush when triggered, we need to set the butterfly as the object to spawn and the desired position for the butterfly to spawn.

  1. Choose the first Spawn node under YaScene with the global position variable. Then enter the name bug for the SpawnableObjectMarker component. Set bug to spawn

  2. For the target spawn position of the butterfly, we can get the position of the bush and add an extra value to its Y-axis with splitting float3. Find GetGlobalPosition under YaMovableComponent and link its result to node Split Float3.

    Split position float3

  3. Then we continue to create a variable in the Node Management panel. After clicking the Add button in the Variables field, enter a name and choose the data type of this variable before clicking Done.

    create variable

    Click the variable you just created to open the Detail panel, and set a default value.

    set variable

    Thus, you can place the variable into the graph by dragging and choosing Get when dropping it.

    get variable

  4. To add the variable to Y-Axis to create a position for the butterfly to spawn in, and to save the new position as a float3 value, first add a New node under float3 and an operator node Float Add. Then connect these nodes:

    save new position

  5. Link the result of new float3 with globalPosition on node Spawn and this feature is all set:

    link spawn position

The whole node graph looks like this:

whole graph

Saving the node graph

Before getting back to Studio, don't forget to save the node graph by clicking save button.

Note: A Lua file will be automatically generated when you save a node graph. For example, when you click the graph file name right above the toolbar, you can see a Lua file named Spawner.gen.lua. You can also modify this Lua file and use it directly if needed.

lua file generated

Go back to Studio, click play to enter Play Mode, and start to playtest.

butterfly spawning

Whenever a player gets close to the bush, the butterfly appears just above it. Hopefully, this tutorial has inspired you to try more features and unleash your creativity with node graphs.