Sample code for canvas-based skeletal animation

Recently, I learned about a skeletal animation of canvas. As you can tell from the name, it is different from the previous animation of canvas. I wonder if you are interested in learning about it?

About skeletal animation, I first saw it accidentally on the Tencent team, but because there are very few tutorials on its official website, there is only a small demo for reference, and the officially downloaded case strangely cannot be run. , maybe my operation is wrong, but it doesn’t matter, let’s learn about this very advanced skeleton animation through this small demo. I am also new to it, and my understanding is not very comprehensive. Please forgive me.

The official introduction says that AlloyStick is a skeletal animation engine developed using HTML5 technology and can be used for HTML5 animation development and HTML5 game development; AlloyStick is mainly composed of a skeletal animation engine and a skeletal animation editor. The skeletal animation editor provides powerful skeletal animation. With the editing function, by setting animation key frames and relying on powerful automatic tweening and skeletal relationships, you can create realistic and vivid Canvas skeletal animations, which can run smoothly on PCs, mobile phones, tablets and other devices. Well, it's easy to say and very attractive.

The so-called skeletal animation literally means animation drawn through bones. So what do the bones here look like?

Yes, even if it looks like this, it is in line with expectations. After all, they have a very powerful automatic tweening function. You can think of it as every part is connected in a very smooth way, a bit like PS feathering.

Since it is a very powerful function, it must have its own unique advantages.

1. The animation is more realistic, that’s for sure
2. The picture takes up very little space. This can also be seen from the fact that this person only consists of three parts: head, hands and legs.
3. Transition animations are automatically tweened to make movements more flexible
4. Bone controllable
5. Skeleton event frame, the animation continues until a certain action or a certain frame, triggering custom event behavior
6. Action data inheritance, multiple characters can use one set of animation data
7. Can be combined with indoor engine
8. Combine sprite animation to create hybrid animation

Let’s start the small demo below

A skeletal animation mainly consists of three parts: skeletal data, skinning data, and animation data. With these three parts of data, AlloyStick can render vivid skeletal animation. Of course, these three parts of data do not need to be generated manually. They only need to be operated in the editor to automatically generate them. After the data is generated, you can call and execute the skeletal animation as follows. The first step is to introduce alloysk.js, and then add the resource resource.js. It should be noted that the skinned png is introduced with the img tag, and of course it can also be loaded in js. resource.js includes skinning data, bone relationship data, and all action data including animation names and parameters. In the second step, the stage object Stage and the role object Armature are created according to the new resource file, and the Stage object manages the Armature object. The playTo method is the core method, allowing the character to play different action animations. You can add events to switch between different actions. Finally start the stage stage.start().

 // The first step is to build canvas <canvas id=canvas width=800px height=600px> Sorry, your browser does not support canvas. It is recommended that you use Chrome browser</canvas> 

 // The second step is to introduce skin resources in the form of pictures or js <img src=img/texture.png id=xiaoxiaoImg style=display:none;> 

 // The third step introduces alloysk.js and resource.js // The fourth step is preparation var canvas = document.getElementById('canvas')var textureImg = document.getElementById('xiaoxiaoImg')var scene = new alloyge.Scene( canvas.getContext('2d'))var player = new alloysk.Armature('xiaoxiao',textureImg)//The fifth step is to create animation// Action speed parameters: action state, speed, initial speed, whether to always execute. You can also set other actions here, such as roll roll// Updated several action states: run run roll roll simpleHit throw something with the right hand secondHit punch with the right hand // jump_kick side kick comeon provoke relax relax soap pick up soap player.playTo('run',50,15,true);// Animation position player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // Start the FPS monitor (auxiliary functions are not required) alloy.monitorFPS(scene); // Start the animation in the scene, And you can pass in the callback loop to call // The last step to execute the animation scene.start(); // The effect is like the running boy below. Forgive me for not opening the door to making gif animation yet...

Relevant code can be uploaded to github https://github.com/aurora-polaris/canvas3

Since I’m new to this, I don’t understand many things very well. I’ll sort them out when I have time.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.