Código de muestra para animación esquelética basada en lienzo

Recientemente, me enteré de una animación esquelética de lienzo. Como puedes ver por el nombre, es diferente de la animación de lienzo anterior. Me pregunto si estás interesado en aprender sobre ella.

Acerca de la animación esquelética, la vi accidentalmente por primera vez en el equipo de Tencent, pero debido a que hay muy pocos tutoriales en su sitio web oficial, solo hay una pequeña demostración como referencia y, extrañamente, el caso descargado oficialmente no se puede ejecutar, tal vez mi operación sea. Está mal, pero no importa. Aprendamos sobre esta animación de esqueleto muy avanzada a través de esta pequeña demostración. Yo también soy nuevo en esto y mi comprensión no es muy completa.

La introducción oficial dice que AlloyStick es un motor de animación esquelético desarrollado con tecnología HTML5 y se puede utilizar para el desarrollo de animaciones HTML5 y el desarrollo de juegos HTML5; AlloyStick se compone principalmente de un motor de animación esquelético y un editor de animación esquelético. Animación Con la función de edición, al configurar fotogramas clave de animación y confiar en potentes interpolaciones automáticas y relaciones esqueléticas, puede crear animaciones esqueléticas de Canvas realistas y vívidas, que pueden ejecutarse sin problemas en PC, teléfonos móviles, tabletas y otros dispositivos. Bueno, es fácil de decir y muy atractivo.

La llamada animación esquelética significa literalmente animación dibujada a través de huesos. Entonces, ¿cómo se ven los huesos aquí?

Sí, incluso si se ve así, está en línea con las expectativas. Después de todo, tienen una función de interpolación automática muy poderosa. Puede pensar que cada parte está conectada de una manera muy fluida, un poco como el desvanecimiento de PS.

Dado que es una función muy poderosa, debe tener sus propias ventajas únicas.

1. La animación es más realista, eso seguro.
2. La imagen ocupa muy poco espacio. Esto también se puede ver en el hecho de que esta persona sólo consta de tres partes: cabeza, manos y piernas.
3. Las animaciones de transición se intercalan automáticamente para hacer los movimientos más flexibles.
4. controlable por hueso
5. Cuadro de evento esqueleto, la animación continúa hasta una determinada acción o un determinado cuadro, lo que desencadena un comportamiento de evento personalizado
6. Herencia de datos de acción, varios personajes pueden usar un conjunto de datos de animación
7. Se puede combinar con motor interior.
8. Combina animación de sprites para crear animación híbrida

Comencemos la pequeña demostración a continuación.

Una animación esquelética consta principalmente de tres partes: datos esqueléticos, datos de piel y datos de animación. Con estas tres partes de datos, AlloyStick puede representar una animación esquelética vívida. Por supuesto, estas tres partes de datos no necesitan generarse manualmente, solo es necesario operarlas en el editor para generarlas automáticamente. Una vez generados los datos, puede llamar y ejecutar la animación esquelética de la siguiente manera. El primer paso es introducir Alloysk.js y luego agregar el recurso Resource.js. Cabe señalar que el png skin se introduce con la etiqueta img y, por supuesto, también se puede cargar en js. Resource.js incluye datos de piel, datos de relación de huesos y todos los datos de acción, incluidos nombres y parámetros de animación. En el segundo paso, el objeto de escenario Stage y el objeto de rol Armature se crean de acuerdo con el nuevo archivo de recursos, y el objeto Stage administra el objeto Armature. El método playTo es el método principal, que permite al personaje reproducir diferentes animaciones de acción. Puedes agregar eventos para cambiar entre diferentes acciones. Finalmente inicie el escenario stage.start().

 // El primer paso es crear el lienzo <canvas id=canvas width=800px height=600px> Lo sentimos, tu navegador no es compatible con el lienzo. Se recomienda que utilices el navegador Chrome</canvas>. 

 // El segundo paso es introducir los recursos de la máscara en forma de imágenes o js <img src=img/texture.png id=xiaoxiaoImg style=display:none;> 

 // El tercer paso presenta Alloysk.js y Resource.js // El cuarto paso es la preparación var canvas = document.getElementById('canvas')var texturaImg = document.getElementById('xiaoxiaoImg')var scene = new Alloyge.Scene( canvas.getContext('2d'))var player = new Alloysk.Armature('xiaoxiao',textureImg)//El quinto paso es crear la animación// Parámetros de velocidad de acción: estado de acción, velocidad, velocidad inicial, si se debe ejecutar siempre. También puede configurar otras acciones aquí, como rodar, rodar // Se actualizaron varios estados de acción: ejecutar, ejecutar, rodar, rodar simple, golpear, lanzar algo con la mano derecha, segundo golpe con. la mano derecha // jump_kick patada lateral vamos provocar relajarse relajarse jabón recoger jabón player.playTo('run',50,15,true);// Posición de la animación player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // Inicia el monitor FPS (no se requieren funciones auxiliares) Alloy.monitorFPS(scene); escena, y puedes pasar el bucle de devolución de llamada para llamar // El último paso para ejecutar la animación scene.start(); El efecto es como el chico corriendo a continuación. Perdóname por no abrir la puerta para hacer animaciones gif todavía...

El código relevante se puede cargar en github https://github.com/aurora-polaris/canvas3

Como soy nuevo en esto, no entiendo muchas cosas muy bien. Las solucionaré cuando tenga tiempo.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.