Mesh Animation Support #363
Description
Mesh Animations
This outlines a proposal for adding support for mesh animations to Cocos2D and SpriteBuilder. Example of effects that can be achieved with this technique can be seen in Zynga Dream Zoo (game play, more info), in Live2D (demo vid) and Puppet2D (demo vid), to name a few.
The ideas here are in the brain storming phase. The hope is to get as many ideas for how to implement this as possible, so we can find the best solution and create a solid API.
Cocos2D Additions
To make these kind of animations, a couple of new node types would be needed.
Mesh Nodes
The first part of the mesh animation is to add two types of mesh nodes. This image illustrates what a mesh node could look like.
- CCMeshSpriteNode inherits from CCSprite, it basically renders the sprite with an arbitrary mesh instead of a quad.
- CCMeshEffectNode inherits from the upcoming CCEffectNode. The CCEffectNode uses a render texture to draw it's children to a buffer before (optionally) adding effects and drawing them to the screen. The CCEffectMeshNode would render the effect node using a mesh instead of a quad. Having this node will make it possible to deform all of the effect node's children as a group.
Deformers
Animating the meshes on a per vertex basis would be both complicated from a user programming standpoint and take a lot of data if saved in an animation file. Another solution is to use a set of different deformers. Each type of deformer would modify the mesh in different ways. On a lower level the deformers could be implemented as vertex shaders or otherwise deform the mesh. The deformers would be invisible nodes added as children (or grand children) to the mesh node. This approach provides a number of benefits; the deformers could be animated using actions and they could have physics bodies attached.
Deformers:
- CCMeshDeformerBone a bone affects a set of vertices and transforms them the same way as the bone is transformed (translation, rotation, scale & skew). Which vertices are affected depends on the initial placement of the bone, and the area it is covering. The area can be specified as a pill shape. A bone can also have an outer zone that affects less (using some linear interpolation). It's a possibility that a bone could have a custom shape as well.
- CCMeshDeformerSphere is a deformer that emulates a 3D sphere. One use case could be a 2.5D face animation. The sphere would set an initial position, and a 3D scale and rotation. The 3D rotation would be animatable.
- CCMeshDeformerBend can bend vertices smoothly.
- CCMeshDeformerBulge can create a bulge.
SpriteBuilder
Making useful animations using meshes purely in code is a very complex task, but with good editor support this could be both easy to understand and use. SpriteBuilder should implement a mesh editor. This editor could be based upon the physics polygon editor, but with more options for adding vertices inside the shape.
The deformers needs a way (mode?) to set their initial positions relative to the meshes, then they should be possible to animate with the standard set of animatable properties, possible with additions specifically for sphere, bend and bulge deformers.