Advanced 2D Skeletal Character Animation for the WeChat Mini Game Engine with Cocos Creator Tutorial

Overview

WeChat Mini Games are a hot sensation in the China Gaming Space right now. With hundreds of millions of Chinese users ( and overseas regions like Singapore, Taiwan, Malaysia which have significant Chinese speaking populations ), it has a huge potential for any game developer wanting to enter the gaming market in Asia. This article gives you a short developer overview tutorial on deploying high quality 2D character animation onto the WeChat Mini Games platform using the Cocos Creator game engine together with the Creature Animation Tool.

Video Tutorial

Here is a full on Video Tutorial which takes you through most of the important portions of getting setup and publishing for Wechat Mini Games via Cocos Creator and Creature:

WeChat Mini Games

The WeChat Mini Games Engine is a Javascript based game engine that runs off of an independent JavaScript engine on the JS VM layer of the mobile device. On the Android platform, it uses Google’s V8 engine while on iOS it uses Apple’s JavaScript Core engine. This means execution speed is pretty good.

Source: https://www.lewagon.com/blog/wechat-mini-games-making-noise-how-developers-get-started-guickly

Having said that, the maximum file size for deploying such games is currently limited to about 8mb in size. This puts restrictions on the type of assets one can deploy and thus having assets that not only look good but also perform and distribute optimally space-wise are of utmost importance.

You can download the Wechat Mini Games SDK here to get started.

Cocos Creator

Cocos Creator is a very powerful + flexible Game Engine framework based off a JavaScript-based scripting architecture. It includes a fully integrated Game Development IDE as well as a component based architecture ( like Unity ) to help you quickly develop your games. Many components/widgets are available in Cocos Creator, including components like UI Sliders, Buttons, Panes and more. It also allows for advanced game effects like 2D Game Physics and Particle effects.

Source: https://cocos2d-x.org/creator

Most importantly of all, Cocos Creator allows you to build and publish games onto the WeChat Mini Game Engine platform via an easy 1–2 click workflow. You can download Cocos Creator from here.

Creature Animation Tool

The Creature Animation Tool is a powerful 2D Animation Tool that targets a wide variety of Game Engines ( Unity, UE4, Godot Engine, WebGL etc. ). It now also has a Runtime for Cocos Creator.

There are many key advantages of using Creature to author high quality 2D animations for your game, including:

  • Creature employs a unique and very powerful procedural motor animation system, allowing the animation of complex/difficult movements like cloth and hair with minimal effort. A lot of these kinds of motions can be automatically animated using Creature’s Motor system
  • Creature animates a character via both Bone Skinning ( Mesh deformation using Bone Transforms and Vertex Weighting ) as well as full on Mesh Deformations via a variety of advanced techniques, including Free Form Deformation, Soft Body Dynamics and more. This means a full range of motions can be easily animated with Creature
  • It allows for easy authoring of Skin/Item Swapping in Game Engine Runtimes
  • Creature has a file export format called CreaturePack which is optimally designed for high performance and high compression ratios ( important for Wechat Mini Games requirements )

You can find out more about the Creature Animation tool here.

CreaturePack Asset Format

CreaturePack is one of the export formats of the Creature Animation Tool. It was specifically designed to target mobile and other devices where space + memory constraints, performance and quality are of utmost importance.

CreaturePack allows for high performance animation playback with very impressive compression ratios and minimal quality loss. This means complex animations can often be compressed and deployed with sizes of < 0.5mb per animation clip!

This makes it the perfect animation deployment format for the WeChat Mini Game Engine. You can check out what CreaturePack is capable of in the video below:

Installation/Setup

You will need to have downloaded and installed the WeChat Mini Games SDK, Cocos Creator and have a licensed copy of Creature in order to proceed.

Next, you should download the Creature Cocos Creator runtimes from here.

Create a new Cocos Creator project, you should have a new Cocos Creator project folder ready once it is done.

Please drag/copy all the js files in this repository into your Cocos Creator project folder. Make sure the relevant meta files are created for the plugin script files to be recognized by the system. Also make sure the character atlas image files as well as converted to text CreaturePack assets + MetaData files are in the resources folder of your project.

Exporting to CreaturePack

With your Creature authored character, go into Animation mode, then click on Game Engine Export. The following settings are recommended:

  • Set Gap Step Compression to 5 for CreaturePack
  • Set Delta Compression to 2x
  • Play around with the Mesh Resolution, a value of 70 is good for starters

Once it all looks good, export out your animated character into a new folder by clicking Export.

Converting CreaturePack Assets to Base64 format

This is very important! Please either do this yourself or run the provided b64Encode.py in the main WebGL runtimes directory.

Usage:

python b64Encode.py <yourCreaturePack.creature_pack <outputFile.txt>

So for example if you have a CreaturePack file asset called char.creature_pack, you will run:

python b64Encode.py myCharacter.creature_pack char.creature_pack.txt

You will need python installed for the conversion script to run. Please make sure the converted file has the .txt extension so that Cocos Creator can recognize it.

MetaData renamed to JSON extension

To make your metaData recognizable by Cocos Creator, also rename your MetaData file to a file with a .json extension.

Setting up in Cocos Creator

Now go into Cocos Creator:

( First, make sure all your assets are in the resource folder of your game project )

  1. Create an Empty Node in your Cocos Creator scene
  2. Drag this CreaturePackDraw as as component into your node
  3. Assign the CreaturePack b64 encoded text asset into the Creature Pack Asset slot
  4. Assign your character atlas png file to the Char Texture slot
  5. Optionally, assign the meta data ( please rename with a .json extension ) to the Meta Data Asset slot if you want SkinSwapping

With all that setup, you should see your character animating on screen :

Controlling the character ( Animation Switching, Skin Swaps etc. )

CreaturePackDraw.js is the file that contains most of the important object handles to controlling your character. In particular, there is the following object in the main class:

this._packRenderer

This is a creaturepack.CreatureHaxeBaseRenderer which allows you to perform most animation game related operations on your character.

Switching Animations

To switch to an animation directly, call:

this._packRenderer.setActiveAnimation("MyNewAnimation");

To switch with blending, call:

this._packRenderer.blendToAnimation("MyNewAnimation", blendDelta);

where blendDelta is 0 < value < 1.0 . We recommend a value of 0.1 to get started.

SkinSwap

You can directly call CreaturePackDraw’s method:

switchToSkin("MyNewSwap");

to switch to a new available skinSwap. Take note you will need to have your metaData slot connected for skinSwapping to work.

Changing Mesh Region Colors

You can dynamically set and change mesh region colors via:

setMeshColorOverride("MyMeshRegion", 0.5, 0, 0, 1.0);

This will change your mesh region called MyMeshRegion with RGBA values of (0.5, 0, 0, 1.0). Take note the value ranges are from 0 to 1.0.

Publish to Wechat Mini Game Engine

You can follow the instructions here on how to publish for the platform. However, the general workflow is actually very simple:

  • Make sure the WeChat Developer Tools path in Cocos Creator is set to “Settings” > “Native Develop”
  • Click Build
  • Click Play!

That’s it! You should now see your game deployed onto the WeChat Mini Games platform! Have fun coding and animating for this exciting platform + market! :)