Skelettanimation in Leinwand implementiert

In diesem Artikel werden hauptsächlich relevante Informationen zum Beispielcode einer Canvas-basierten Skelettanimation vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Ich habe kürzlich von einer Skelettanimation auf Leinwand erfahren. Wie Sie am Namen erkennen können, unterscheidet sie sich von der vorherigen Animation auf Leinwand.

Was die Skelettanimation betrifft, habe ich sie zum ersten Mal zufällig im Tencent-Team gesehen, aber da es auf der offiziellen Website nur sehr wenige Tutorials gibt, gibt es nur eine kleine Demo als Referenz, und der offizielle Download-Fall ist auch Es ist seltsam dass es nicht ausgeführt werden kann, aber das spielt keine Rolle. Lassen Sie uns anhand dieser kleinen Demo etwas über diese sehr fortgeschrittene Skelettanimation lernen

Bevor Sie beginnen, lernen wir zunächst AlloyStick kennen

In der offiziellen Einführung heißt es, dass AlloyStick eine Skelett-Animations-Engine ist, die mithilfe der HTML5-Technologie entwickelt wurde und für die Entwicklung von HTML5-Animationen verwendet werden kann Entwickelt; AlloyStick besteht hauptsächlich aus zwei Teilen: einer Skelettanimations-Engine und einem Skelettanimationseditor kann realistische, lebendige Canvas-Skelettanimationen erstellen, die reibungslos auf PCs, Mobiltelefonen, Tablets und anderen Geräten laufen. Nun, es ist leicht gesagt und sehr attraktiv

Die sogenannte Skelettanimation bedeutet wörtlich: Animation, die durch Knochen gezeichnet wird. Wie sehen die Knochen hier aus?

Ja, auch wenn es so aussieht, entspricht es den Erwartungen. Schließlich verfügen sie über eine sehr leistungsstarke automatische Tweening-Funktion werden verwendet. Sie sind auf reibungslose Weise verbunden, ein bisschen wie das Auslaufen in PS

Da es sich um eine sehr leistungsstarke Funktion handelt, muss es jemanden mit seinen eigenen einzigartigen Vorteilen geben

1. Die Animation ist realistischer, das steht fest

2. Das Bild nimmt sehr wenig Platz ein, was auch daran zu erkennen ist, dass diese Person nur aus drei Teilen besteht: dem Kopf , Hände und Beine

3. Übergangsanimationen werden automatisch getweened, wodurch Bewegungen flexibler werden

4. Knochen kontrollierbar

5. Bone-Ereignisrahmen, die Animation wartet direkt auf eine Aktion oder einen bestimmten Rahmen und löst ein benutzerdefiniertes Ereignisverhalten aus

6. Aktionsdatenvererbung, mehrere Charaktere können einen Satz Animationsdaten verwenden

7. Kann mit der Haus-Engine kombiniert werden

8. Sprite-Animation kombinieren, um Hybridanimation zu erstellen

Lass uns Beginnen Sie mit einer kleinen Demo

Eine Skelettanimation besteht hauptsächlich aus drei Teilen: Skelettdaten, Skinning-Daten und Animationsdaten. Mit diesen drei Datenteilen kann AlloyStick lebendige Skelettanimationen rendern. Natürlich müssen diese drei Datenteile nicht manuell generiert werden, sondern müssen nur im Editor bearbeitet werden, um sie automatisch zu generieren. Nachdem die Daten generiert wurden, können Sie die Skelettanimation wie folgt aufrufen und ausführen. Der erste Schritt besteht darin, „alloysk.js“ einzuführen und dann die Ressource „resource.js“ hinzuzufügen. Es ist zu beachten, dass das Skin-PNG mit dem IMG-Tag eingeführt wird und natürlich auch in JS geladen werden kann. resources.js umfasst Skinning-Daten, Bone-Beziehungsdaten und alle Aktionsdaten, einschließlich Animationsnamen und -parameter. Im zweiten Schritt werden das Bühnenobjekt Stage und das Rollenobjekt Armature gemäß der neuen Ressourcendatei generiert, und das Bühnenobjekt verwaltet das Armature-Objekt. Die playTo-Methode ist die Kernmethode, die es dem Charakter ermöglicht, verschiedene Aktionsanimationen abzuspielen. Sie können Ereignisse hinzufügen, um zwischen verschiedenen Aktionen zu wechseln. Starten Sie schließlich die Stufe 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动画的大门……

Da ich neu darin bin, verstehe ich viele Dinge nicht sehr gut, ich werde es klären, wenn ich Zeit habe

Das oben Gesagte ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist. Weitere verwandte Inhalte finden Sie auf der PHP-Chinese-Website.

Verwandte Empfehlungen:

Verwenden Sie HTML5 Canvas kapselt ein Kreisdiagramm, das Echarts nicht implementieren kann

So verwenden Sie Canvas, um die Maus gedrückt zu halten und zu bewegen, um eine Flugbahn zu zeichnen

Das obige ist der detaillierte Inhalt vonSkelettanimation in Leinwand implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!