The latest version of Phaser Editor 2D is out, bringing new Script Node libraries for custom game logic and behaviours.

Posted on 12th Jan 2024. Follow @phaser_ and get the Phaser World newsletter.

We're pleased to announce the immediate availability of a brand new version of Phaser Editor 2D.

One of the most important features is the new Script Node libraries. Script Nodes are a powerful way to add logic and behaviors to Game Objects and Scenes. For example, do you want to destroy a Game Object based on a physics collision and play a sound at the same time? Just chain together some of the new nodes to achieve this. The new libraries contain lots of helpful nodes to speed-up your development process.

Download Phaser Editor 2D v3.66.0

Action Target Config User Component

The new Action Target Config user component is one of the most important new additions in this version. It is part of the @phasereditor2d/scripts-core library and its purpose is to specify in an Action Node which Game Object is the recipient of the action. It can be the node's parent Game Object, or one of the arguments of the execute method.

You can see this more clearly in this example illustrated in the the editor's documentation.

Most of the Action Nodes modify or read the Game Object from the node. This is fine for a lot of cases, but sometimes you need more flexibility, such as in this example:

Say you wish to make a collider between a player object and a list of coin objects. When the player touches a coin, it should be destroyed:

game scene

By using the Make Collider Action node, you can add it to the player. This node has a parameter that allows you to select another object you want to collide with. In this case, a Container with the coins within it:

Make collider node

Make collider node properties

When the collision happens, the collider node executes the method that passes the two objects as arguments. In the first argument is the player, and in the second the coin.

So, by adding the Destroy Object Action node to the collider it will, by default, destroy the parent Game Object, which is the player. However, we want to destroy the coin. So by changing the target of the Destroy Action to the second argument of the execute method we achieve this.

To do this, add the Action Target Config user component to the Destroy Object Action, and set the Target to ARG_2. The Destroy Action then will receive the second argument of the execute method and destroy it.

destroy action node

destroy action node target action

The Target parameter shows an array of options, GAME_OBJECT (default), ARG_1, …, ARG_8.

In addition to the Target, you can set the Target Name of the action. The name is helpful syntax sugar and makes the node more readable in the Outline view of the Editor. You can see this in the previous screenshot, where the node starts with the value of Target plus the Target Name.

Custom Actions

Making a new Action Node is very simple. Create a prefab of a Script Node then implement the execute() method. If you want to support the Action Target Config component, you can use the ScriptNode.getActionTargetObject() utility method:

class MyAction extends ScriptNode {

   execute(...args: any[]) {

      const obj = this.getActionTargetObject(args);

      myCustomAction(obj);
   }
}

Script Library Updates

All of the Script Node libraries have been updated to use the new Action Target Config component. Also, there are new Script Nodes with some handy new functionality. The script libraries will evolve continuously in future versions, so expect more changes and features to arrive.

We feel that Script Nodes will become a powerful way for developers to quickly and easily configure complex actions in their games, so it will be an area of focus for us in the coming months. They genuinely speed-up the process of prototyping games, or simplifying the implementation of parts of your game or UI. As with all new features, please test if Script Nodes are a good fit for your game before moving it into production.

phasereditor2d@scripts-core:

Script Nodes:

  • Add To Parent Action - adds the Game Object to the given parent.
  • Exec Random Action - executes a random child node.
  • Exec Children Action - executes all children nodes.
  • Play Sprite Animation - plays the given sprite animation.
  • Set Angle Action - sets the angle to the Game Object.
  • Set Scale X/Y Action - set the X or Y of the Game Object's scale.
  • Set X/Y Action - set the scale X/Y of the Game Object's position.
  • Set Flip Action - flips the Game Object vertically or horizontally.
  • Spawn Object Action - spawns an object in the world.

User Components:

  • Action Target Config - modifies the routing of the receiver of an Action Node.
  • Assign Operator - to use a different operator (+=, *=, =) in assignment nodes.

@phasereditor2d/scripts-arcade:

  • Get GameObject From Body Action - Gets the Game Object for the given physics body.
  • Make Object Collider Action - Creates a physics collider with the Game Object.
  • Set Body Enable Action - To enable/disable physics in the Game Object.
  • Start Flip With Velocity Action - Starts flipping the Game Object heading to the velocity vector.
  • Start Follow Pointer Action - Starts moving the Game Object toward the pointer position.
  • If Body Touching - A conditional action to test the body touching state.

(New) @phasereditor2d/scripts-random:

Script Nodes:

  • Set Random X Action - Set a random value to the object's X.
  • Set Random Y Action - Set a random value to the object's X.

User Components:

  • Random Between Config - To select an integer random value between two numbers.
  • Random Multiple Config - To select an integer random multiple between two numbers.
  • Random In Array Config - To pick a random value in an array of options.

Note: Script Node Actions that set a random value read the different random configurations to generate the values. Adding a configuration is required.

New User Component's Object Display Name

You now have the ability to set the display name of an object in a user component. It works in the same way as naming a prefab object. When the editor shows the name of a prefab instance, it computes the name by expanding the prefab object display format and then appends all the user components' display names to it.

This Horizontal Move component shows the minX and minY values in the Platform prefab instance.

This is the definition of the component. Have a look at the Object Display Format template:

![component definition][phaser-editor-v366-released-6.png]

And this is what it looks like when you add the component to a prefab instance and set properties:

![user component in the object properties][phaser-editor-v366-released-7.png]

Finally, this is how the user component name is included in the object's label in the Outline view:

![user component in the object's label][phaser-editor-v366-released-8.png]

Object Display Name

While we've talked a lot about rendering object labels, it doesn't stop here! Now you can override all the previous behaviors by setting a custom display name on the object instance. This works for prefab instances and regular object instances.

For example, the IfBodyTouchingScript prefab has two nodes (nested prefabs). One for grouping the "then" actions, and the other for grouping the "else" actions. With the Display Name property, you can set "natural names" to these nodes:

![Display name][phaser-editor-v366-released-9.png]

![Display names in the outline][phaser-editor-v366-released-10.png]

![Display names in nested prefabs][phaser-editor-v366-released-11.png]

Other Changes and Fixes

  • The display name formatting expression #{x} expands to "x".
  • Fixes duplicating children objects on a tree copy/paste.
  • Fixes getting user components of nested prefabs.
  • Allow read-only editors.
  • Set read-only to editors for files in the node_module folder.

Flappy Chicken

In order to test out the new Script Nodes, we created a full game using only the Script Nodes from the new Script libraries. It is a reproduction of the Flappy Chicken game made by Ansimuz.

This game is available for free in the Phaser Editor 2D Marketplace or can be downloaded via the Phaser Editor 2D All in One new project wizard.

Promote your Games and Tutorials

If you have created a game, tutorial, or other content with Phaser Editor 2D and would like us to promote it for free, please get in touch! We can feature it on our website, newsletter, and social channels. Email arian@phaser.io

What's Next?

Now that Phaser Editor 2D is part of Phaser Studio we are planning our priorities for the future. This includes a move to get Phaser Editor running online in the browser and integrating all of the tools and content with the main Phaser website. Plus, we've got a healthy roadmap of features for the Editor itself! We'll be sharing more details soon.

Keep in contact!

Arian