Introducing the Anim State Graph

We’re excited to be able to release a new system for creating fantastic and high fidelity animations in PlayCanvas!

Animation systems receive a set of inputs (button presses, current player speed, health, etc) and output a models animation pose for the current frame. How an animation system goes from a particular set of inputs to the desired animation pose can become quite complicated, especially when writing this in code.

With the release of the Anim component, Anim State Graph assets and Anim State Graph Editor, you will be able to design and develop intricate animation behavior for your game objects right in the PlayCanvas editor. 

It’s now easier than ever to make your game characters move just the way you’d like, while writing minimal code in the process!

Having recently beta tested this feature with a number of developers, we’ve already seen some fantastic results! For instance, the developer of the popular online shooter venge.io is utilising the anim state graph to drive character animations in their up and coming online RPG. 

A clip of an early build of this game can be seen below, showcasing the blending of multiple animation clips. When combined together in a state graph they create realistic and fluid movement for the main character.

This animation system was entirely developed in the PlayCanvas editor using the anim state graph user interface. The state graph for the main character can be seen below:

We can’t wait to see what other developers can create with this system!

Features

Graph Layers – Split your animation behavior into separate layers. For instance: locomotion animations can be separated from facial expressions. 

Multiple characters – Because anim state graphs are stored as assets, a single graph can be used to drive the animation of as many entities as you want by assigning your graph asset to multiple entity anim components.

Multiple characters utilising the same anim state graph

While these two characters use different animations for their various actions, they share the same behavior. With the anim state graph you can update this behavior in one place while still using it with as many characters as you like.

How does it all work?

When opening an Anim State Graph asset you’ll be presented with a visual graph editor which allows you to define all of the different animation states your game object can be in. You can then connect these states using transitions. 

Create anim state graphs using the editor ui

Each transition blends between two animations over a specified amount of time. You can adjust and tweak transitions to your liking and see the results in real time in the PlayCanvas launch page. You can then assign parameter conditions to each transition to define the circumstances under which that transition can fire. These parameter values can be modified in your scripts to control the behavior of your animation system.

Control anim state graph behavior in scripts using the anim component API

Once you’ve created your Anim State Graph you can assign it to your entity using the Anim component. At this point you can attach your animation assets to each state which will play when transitioning to that state.

Looking ahead

Today only marks the initial release of our new animation system. We’ve got grand plans on how to push the system further. Here’s a few features we’ve got in the works:

Animation Events – These events can be set up to fire and specific points during the lifetime of an animation, allowing you to hook game logic into the behavior of your anim state graph. For example you could spawn a set of dust particles during the exact frame that your character lands on the ground after a jump.

Layer Masking – You’ll be able mask your character animations on a particular state graph layer. For instance you could have only the bottom half of a character driven by a particular anim state graph layer.

Blend Trees – Directly control the blend between multiple animations in real time.

Blending three animations using a 2D cartesian blend tree

Animation Clips – Currently the anim state graph supports animation assets that have been imported into PlayCanvas. Clips will allow you to create extra animation assets within the PlayCanvas editor yourself! These will be great for quickly adding smaller animated flourishes to your game objects.

If you’re interested in using anim state graphs in your PlayCanvas projects, here’s some useful links:

Introducing JSON Script Attributes

JSON Script Attributes Preview

We have levelled up the Script Attributes that makes it much easier to organize and group related attributes together.

Using JSON, developers are able to define a schema for a data object that has multiple attributes and have them grouped together in the Inspector.

In the example below, we have created a JSON schema with the name ‘settings’ and has the attributes ‘gravity’, ‘startingHealth’ and ‘godMode’.

GameManager.attributes.add('settings', {
    type: 'json',
    schema: [{
        name: 'gravity',
        type: 'number',
        default: -9.8
    }, {
        name: 'startingHealth',
        type: 'number',
        default: 20
    }, {
        name: 'godMode',
        type: 'boolean',
        default: false
    }]
});

In the Inspector, the data object is shown as a collapsible section:

Collapsible script settings

Even better, these data objects can made into an array! This is a huge improvement over having to organize multiple attribute arrays that was difficult to update and error prone to maintain.

Example JSON schema for an array of enemies:

GameManager.attributes.add('enemies', {
    type: 'json',
    schema: [{
        name: 'health',
        type: 'number',
        default: 10
    }, {
        name: 'type',
        type: 'number',
        enum: [
            { 'Close Combat': 1 },
            { 'Range': 2 },
            { 'Both': 3 }
        ]
    }, {
        name: 'templateAsset',
        type: 'asset',
        assetType: 'template'
    }],
    array: true
});

Becomes the following in the inspector which is so much cleaner!

Arrays of JSON objects

Read more in the documentation and let us hear your feedback in the forums!

Copy and Paste Assets between Projects

PlayCanvas has a pretty cool (but not widely known about) feature that allows you to copy and paste entities and entity hierarchy between two instances of the Editor. This can save a lot of time, particularly when setting up new projects.

Many of you have requested the ability to do the same with assets. Well, we listened – and now you can! 🚀

So if you need to grab some assets from another project, no more need to download from Project A and then upload to Project B. Just copy and paste in seconds, directly from project to project.

This makes it super easy to share reusable code and assets with your team and the rest of the PlayCanvas community, especially in combination with the recent launch of Templates to setup preconfigured Entities.

Use the context menu or the Ctrl/Cmd + C and Ctrl/Cmd + V hotkeys to copy assets across to your projects. 💪

Check out the documentation for more details.

Supercharge your workflow with Template Assets!

It’s finally here! The PlayCanvas team is very excited to announce the public release of our new Templates feature! 🎉

Templates allow you to create preconfigured entities with all the values and child hierarchy as an asset reference.

This is a huge workflow boost as managing and changing objects in a scene is now easier and faster to do. New instances of the Template can be placed in the scene with the Editor. These instances have a link to the Template asset, so any changes to the asset will change the instances in the scene too.

Now we are able to change and update many scene entities via a single asset which is a welcome change from the tedious manual updating of multiple entities across multiple scenes.

Change all instances of Templates in one click! 🚀

Other features of the Template system also include:

  • Adding instances in the Scene editor (including drag and drop support of template assets to the Hierarchy panel)
  • Overriding properties on a per instance basis
  • Nested Templates which allows referencing a Template in another Template
  • Creating a new instances via code from an asset reference

In terms of how they can be used, we have been beta-testing the feature since early 2020 (big thanks to all those that have given us feedback and bug reports 🙏) and some of the use cases we’ve seen so far include:

  • Designing and creating sections of an infinite runner game
  • Managing UI screens and instantiating them at runtime
  • Different enemy types that a script can reference to randomly generate a level

As you can see, Templates give you a wide range of flexibility of workflow options to manage and modify content in your projects.

Find out more about Templates in the User Manual and give them a try yourself!