Skeleton animation implemented in canvas

This article mainly introduces the relevant information about the sample code of canvas-based skeletal animation. The content is quite good. I will share it with you now and give it as a reference.

Recently I learned a kind of skeletal animation about canvas. Just by hearing this name, I know that it is different from the previous animation of canvas. I wonder if you are interested in learning about it?

I first saw the skeletal animation accidentally on the Tencent team, but since there are very few tutorials on its official website, there is only a small demo for reference, and the official downloaded case is also It's very strange that it can't 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

Before we begin, let’s first learn about AlloyStick

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 games. Developed; AlloyStick is mainly composed of two parts: a skeletal animation engine and a skeletal animation editor. The skeletal animation editor provides powerful skeletal animation editing functions. By setting animation keyframes and relying on powerful automatic tweening and bone relationships, you can create realistic , vivid Canvas skeleton animation, which can run smoothly on PC, 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 how many parts are used. Connected in a smooth way, a bit like PS feathering

Since it is a very powerful function, there must be someone with its own unique advantages

1. The animation is more realistic, This is for sure

2. The picture takes up very little space, which can also be seen from the fact that this person only consists of three parts: head, hands and legs

3. Transition animation is automatically tween, making the action more flexible

4. Skeleton controllable

5. Skeletal event frame, the animation goes straight and waits for a certain action Or a certain frame, triggering custom event behavior

6. Action data inheritance, multiple characters can use a set of animation data

7. Can be combined with the house engine

8. Combine sprite animation to create hybrid animation

Let’s start with a small demo

A skeletal animation is mainly composed of 3 parts : Skeleton 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 generated 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().

// 第一步 还是要先搭建canvas
<canvas id="canvas" width="800px" height="600px">抱歉，你的浏览器不支持canvas，建议你使用Chrome浏览器</canvas>

// 第二步 以图片形式或者js方式引入蒙皮资源
<img src="img/texture.png" id="xiaoxiaoImg" style="display:none;">

// 第三步 引入alloysk.js和resource.js
// 第四步 准备工作
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)
// 第五步 制作动画
// 动作快慢 参数：动作状态，速度，初始速度，是否一直执行，这里还可以设置其他动作，比如翻滚 roll
// 更新了几个动作状态：run 奔跑  roll 翻滚  simpleHit 右手扔东西   secondHit  右手打拳
 //  jump_kick  侧踢 comeon 挑衅   relax 放松  soap 捡肥皂
player.playTo('run',50,15,true);
// 动画位置
player.setPos(300,300); 

player.setEaseType(true);		
scene.addObj(player);
 // 启动FPS监听器 (辅助功能 非必须)
alloyge.monitorFPS(scene);
// 开始场景里的动画，并且可以传入callback循环调用
// 最后一步 执行动画
scene.start(); 
// 效果就是下面这样奔跑的少年啦，原谅我还没开通做gif动画的大门……

Since I am new to this, I don’t understand many things very well. I will sort it out when I have time.

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. Help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Use html5 canvas encapsulates a pie chart that echarts cannot implement

How to use canvas to hold down the mouse and move to draw a trajectory

The above is the detailed content of Skeleton animation implemented in canvas. For more information, please follow other related articles on the PHP Chinese website!