Scrubbing through animations using Anim State Graph

This was an interesting problem. A user wanted to be able to switch between states on the graph and use the arrow keys to scrub through that animation in the state which meant that speed would be 0 so that it wouldn’t animate.

Project: PlayCanvas | HTML5 Game Engine

Use the keys: 1, 2, 3 to switch states between idle, jump and run and the arrow keys left/right to scrub through the animation.

(be aware of this bug though Anim transition of state to itself via ANY state does not activate · Issue #3313 · playcanvas/engine · GitHub)

The issue was that if speed was 0 during the anim component update, it wouldn’t perform any transitions as there is no timeframe in the animation to check if any transitions are valid.

So even if the trigger was set to transition to another state, it wouldn’t activate.

This is as designed.

The workaround would to be set the trigger and the speed to be > 0 in the update frame of the script.

The anim component update would happen in the same frame but after the script update and as speed > 0, it would perform the transition.

In the script postUpdate which is called after the anim component update, we set the speed back to 0. The animation controller has now at this point follow transitioned to the next state (as long as transition duration is 0) and we can scrub through the animation.

Kapture 2021-07-08 at 12.53.15

1 Like

Also worth noting that the next engine release will have a new API that allows you to transition between states via code without needing to have valid transitions which will help a lot in certain scenerios.

1 Like