Beispielcode für eine Canvas-basierte Skelettanimation

Kürzlich habe ich etwas über eine Skelettanimation von Canvas erfahren. Wie Sie am Namen erkennen können, unterscheidet sie sich von der vorherigen Animation von Canvas.

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 offiziell heruntergeladene Fall kann seltsamerweise nicht ausgeführt werden, vielleicht ist es meine Operation Falsch, aber das macht nichts. Lassen Sie uns durch diese kleine Demo etwas über diese sehr fortgeschrittene Skelettanimation lernen. Ich bin auch neu darin und mein Verständnis ist nicht sehr umfassend.

In der offiziellen Einführung heißt es, dass AlloyStick eine Skelett-Animations-Engine ist, die mit HTML5-Technologie entwickelt wurde und für die Entwicklung von HTML5-Animationen und HTML5-Spielen verwendet werden kann. AlloyStick besteht hauptsächlich aus einer Skelett-Animations-Engine und einem Skelett-Animationseditor Mit der Bearbeitungsfunktion können Sie durch das Festlegen von Animationsschlüsselbildern und die Verwendung leistungsstarker automatischer Tweening- und Skelettbeziehungen realistische und lebendige Canvas-Skelettanimationen erstellen, die reibungslos auf PCs, Mobiltelefonen, Tablets und anderen Geräten ausgeführt werden können. Nun, es ist leicht gesagt und sehr attraktiv.

Die sogenannte Skelettanimation bedeutet wörtlich übersetzt eine durch Knochen gezeichnete Animation. 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. Man kann sich das so vorstellen, als ob jedes Teil auf sehr reibungslose Weise verbunden ist, ein bisschen wie beim PS-Federing.

Da es sich um eine sehr leistungsstarke Funktion handelt, muss sie ihre eigenen einzigartigen Vorteile haben.

1. Die Animation ist realistischer, das steht fest
2. Das Bild nimmt sehr wenig Platz ein. Dies lässt sich auch daran erkennen, dass diese Person nur aus drei Teilen besteht: Kopf, Händen und Beinen.
3. Übergangsanimationen werden automatisch getweened, um Bewegungen flexibler zu gestalten
4. Knochenkontrollierbar
5. Skeleton-Ereignisrahmen, die Animation wird bis zu einer bestimmten Aktion oder einem bestimmten Rahmen fortgesetzt, wodurch ein benutzerdefiniertes Ereignisverhalten ausgelöst wird
6. Aktionsdatenvererbung: Mehrere Charaktere können einen Satz Animationsdaten verwenden
7. Kombinierbar mit Innenmotor
8. Kombinieren Sie Sprite-Animationen, um eine Hybridanimation zu erstellen

Beginnen wir unten mit der 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 entsprechend der neuen Ressourcendatei erstellt 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 abschließend die Bühne stage.start().

 // Der erste Schritt besteht darin, Canvas <canvas id=canvas width=800px height=600px> zu erstellen. Ihr Browser unterstützt leider kein Canvas. Es wird empfohlen, den Chrome-Browser zu verwenden</canvas> 

 // Der zweite Schritt besteht darin, Skin-Ressourcen in Form von Bildern oder js einzuführen <img src=img/texture.png id=xiaoxiaoImg style=display:none;> 

 // Der dritte Schritt führt Alloysk.js und Resource.js ein // Der vierte Schritt ist die Vorbereitung 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)//Der fünfte Schritt besteht darin, eine Animation zu erstellen// Aktionsgeschwindigkeitsparameter: Aktionsstatus, Geschwindigkeit, Anfangsgeschwindigkeit, ob immer ausgeführt werden soll. Sie können hier auch andere Aktionen festlegen, z. B. Rollen, Rollen// Mehrere Aktionszustände aktualisiert: Laufen, Laufen, Rollen, EinfachHit, etwas mit der rechten Hand werfen, SecondHit, Schlag mit die rechte Hand // Jump_Kick Side Kick Comeon Provozieren Relax Relax Soap Pick Up Soap Player.playTo('run',50,15,true);// Animationsposition player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // Starten Sie den FPS-Monitor (Hilfsfunktionen sind nicht erforderlich) Alloy.monitorFPS(scene); // Starten Sie die Animation im scene, Und Sie können die Callback-Schleife übergeben, um den letzten Schritt aufzurufen, um die Animation auszuführen scene.start(/); Der Effekt ist wie bei dem laufenden Jungen unten. Verzeihen Sie mir, dass ich die Tür zum Erstellen von GIF-Animationen noch nicht geöffnet habe ...

Relevanter Code kann auf Github hochgeladen werden: https://github.com/aurora-polaris/canvas3

Da ich neu in diesem Bereich bin, verstehe ich viele Dinge nicht sehr gut. Ich werde sie klären, wenn ich Zeit habe.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.