Educational Fighting Game Demo

Only be able to attack enemy when giving the right answer to the question.

Handcrafted animation system

In this demo, the characters' animation is achieved by updating the sprite image of the game object very fast to create an illusion of animation. 

I coded this system to understand the animation config data in json format.

The artist only needs to name each action’s animation frame images in sequence.

You may ask why not use the animation editor provided by Cocos Creator engine? 

There are 3 reasons: 

1. It takes too much time to drag and drop each frame in the timeline of the animation editor of Cocos Creator engine.
2. Sometimes there are engine bugs in the animation editor. Such as a frame is sometimes lost when saving the animation and moving images files directory may ruin the whole animation file.
3. The data inside the .anim file is not easy to read, not suitable for editing. Adjusting frames in the animation editor is not convenient.

How to code the primitive animation system

Let’s say for run animation, there are 4 frames: run0.png run1.png run2.png run3.png 

And we switch between these images quickly to make an animation illusion.

At one moment, how do we know at this point, which sprite frame should we display?

If we use _lastStartTime to represent the timestamp when the run animation starts,

(Date.now() - _lastStartTime)/1000 means at this moment, how many seconds passed,

If each frame will display 0.1s, 

then the sprite frame index at this moment should be:  

var index = Math.floor((Date.now() - _lastStartTime)/1000/0.1))

If we loop the animation, the index should be:

index  = index  % totalRunFrames

The only thing left to do is to set the sprite of the character according to the index.