Skip to content

Instantly share code, notes, and snippets.

@shrinktofit
Last active June 5, 2020 06:07
Show Gist options
  • Save shrinktofit/489eb84b9de066385f83b30a07bb4597 to your computer and use it in GitHub Desktop.
Save shrinktofit/489eb84b9de066385f83b30a07bb4597 to your computer and use it in GitHub Desktop.
An animation system for Cocos Creator(3D): NewGenAnim

An animation system for Cocos Creator(3D): NewGenAnim

Introduction

This article introduces an animation system for Cocos Creator(3D). "NewGenAnim" is its name during development.

Motivation

:)

Concepts

Animation graph

Animation graph is a kind of asset which describes how multiple animation states are combined, how control flow is determined by a group of variables.

Animation graph by itself is a directional graph. Edges are called as transitions. In distinction to scene node, nodes in animation graph are called as graph nodes(however in term of this article "node" is an alias of graph node).

Graph node

In general, every node may have a motion associated or not. Motion is the abstract of an animation representation.

There may be four kinds of nodes:

  • entry node;
  • exit node;
  • "any" node;
  • and, plain nodes, those do not belong to above.

Special nodes

Entry node, exist node and "any" node are built-in nodes which was borned once the graph is created. As their name suggested, the entry node is the initial node when the animation graph is constructed. The exit node has meaning of stopping the control flow. The "any" node is pretty special: outgoing transitions from the "any" node are considered as if that transitions are also emitted from other nodes, except for transition destination.

As their special meanings, no incoming transition is allowed for entry node or "any" node, and no outgoing transition is allowed for exist node. Motion on "any" node would take no effect.

Motion

There are two kinds of motion: state motion and blend tree.

State motion

State motion is a motion controls the playback of an animation clip. It internally wraps an animation state for that purpose.

Blend tree

Blend tree is a more complex type of motion. Every blend tree has a blender controlling how a group of sub-motion are blending together according to some blend arguments. The blender yeilds weights for each sub-motion.

The blend arguments usually reflect specular game logic. Such as speed, velocity, timing and so on. Depend on dimension of those argument value, there are also different blenders.

1D Blender

The 1D Blender accepts a single number argument. It records a threshold for each motion it's going to blend. If the blend argument matches the threshold, the corresponding motion was taken to play. Or if the blend argument is in bettwen two thresholds, the two corresponding motions were blended according to the ratio.

The most common use case of 1D blenders is to model blending of idle/walk/run of a character by it's speed.

2D Blender

Use cases

Case: character simple movemotion

{
  nodes: {
    'movemotion': {
      motion: { // blend tree, 1D blender
        motions: ['idle', 'walk', 'run'], // every sub-motion is a state motion
        thresholds:  [0, 0.5, 1.0], // threshold of every sub-motion
        argument: 'speed',
      }
    },
  },
  variables: {
    speed: 0,
  },
}

Case: character locomotion

{
  nodes: {
    'movemotion': {
      motion: { // blend tree, 2D blender
        algorithm: 'freeform-directional',
        motions: [ // every sub-motion is a state motion
          'idle', 'walk', 'run',
          'turn-left', 'walk-left', 'run-left',
          'turn-right', 'walk-right', 'run-right',
        ],
        thresholds:  [ // threshold of every sub-motion
          [0.0,  0.0], [0.5,  0.0], [1.0,  0.0],
          [0.0, -1.0], [0.5, -1.0], [1.0, -1.0],
          [0.0,  1.0], [0.5,  1.0], [1.0,  1.0],
        ],
        argument: ['speed', 'turnSpeed'],
      }
    },
  },
  variables: {
    speed: 0,
    turnSpeed: 0,
  },
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment