Exemplo de código para animação esquelética baseada em tela

Recentemente, aprendi sobre uma animação esquelética de tela. Como você pode perceber pelo nome, ela é diferente da animação anterior de tela. Gostaria de saber se você está interessado em aprender sobre ela.

Sobre animação esquelética, vi pela primeira vez acidentalmente na equipe Tencent, mas como há poucos tutoriais em seu site oficial, há apenas uma pequena demonstração para referência, e o caso baixado oficialmente estranhamente não pode ser executado, talvez minha operação seja. errado, mas não importa, vamos aprender sobre essa animação de esqueleto muito avançada por meio desta pequena demonstração. Também sou novo nisso e meu entendimento não é muito abrangente.

A introdução oficial diz que AlloyStick é um mecanismo de animação esquelética desenvolvido usando a tecnologia HTML5 e pode ser usado para desenvolvimento de animação HTML5 e o desenvolvimento de jogos HTML5 é composto principalmente por um mecanismo de animação esquelética e um editor de animação esquelética. animação Com a função de edição, ao definir quadros-chave de animação e contar com poderosa interpolação automática e relacionamentos esqueléticos, você pode criar animações esqueléticas realistas e vívidas do Canvas, que podem ser executadas sem problemas em PCs, telefones celulares, tablets e outros dispositivos. Bem, é fácil de dizer e muito atraente.

A chamada animação esquelética significa literalmente animação desenhada através dos ossos. Então, como são os ossos aqui?

Sim, mesmo que pareça assim, está de acordo com as expectativas. Afinal, eles têm uma função de interpolação automática muito poderosa. Você pode pensar nisso como se cada parte estivesse conectada de uma forma muito suave, um pouco como o PS Feathering.

Por ser uma função muito poderosa, deve ter suas próprias vantagens exclusivas.

1. A animação é mais realista, isso é certo
2. A imagem ocupa muito pouco espaço. Isso também pode ser percebido pelo fato de essa pessoa ser composta apenas por três partes: cabeça, mãos e pernas.
3. As animações de transição são interpoladas automaticamente para tornar os movimentos mais flexíveis
4. Osso controlável
5. Estrutura de evento esqueleto, a animação continua até uma determinada ação ou quadro, acionando um comportamento de evento personalizado
6. Herança de dados de ação, vários personagens podem usar um conjunto de dados de animação
7. Pode ser combinado com motor interno
8. Combine animação sprite para criar animação híbrida

Vamos começar a pequena demonstração abaixo

Uma animação esquelética consiste principalmente em três partes: dados esqueléticos, dados de skinning e dados de animação. Com essas três partes de dados, o AlloyStick pode renderizar animações esqueléticas vívidas. Claro, essas três partes de dados não precisam ser geradas manualmente. Elas só precisam ser operadas no editor para gerá-las automaticamente. Depois que os dados são gerados, você pode chamar e executar a animação do esqueleto da seguinte maneira. A primeira etapa é introduzir o Alloysk.js e, em seguida, adicionar o recurso Resource.js. Deve-se notar que o png skinned é introduzido com a tag img e, claro, também pode ser carregado em js. resource.js inclui dados de skinning, dados de relacionamento ósseo e todos os dados de ação, incluindo nomes e parâmetros de animação. Na segunda etapa, o objeto Stage Stage e o objeto Role Armature são criados de acordo com o novo arquivo de recurso, e o objeto Stage gerencia o objeto Armature. O método playTo é o método principal, permitindo que o personagem reproduza diferentes animações de ação. Você pode adicionar eventos para alternar entre diferentes ações. Finalmente inicie o estágio stage.start().

 // O primeiro passo é construir o canvas <canvas id=canvas width=800px height=600px> Desculpe, seu navegador não suporta canvas. É recomendado que você use o navegador Chrome</canvas>. 

 // O segundo passo é introduzir recursos de skin na forma de imagens ou js <img src=img/texture.png id=xiaoxiaoImg style=display:none;> 

 // A terceira etapa apresenta Alloysk.js e Resource.js // A quarta etapa é a preparação 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)//O quinto passo é criar animação // Parâmetros de velocidade da ação: estado da ação, velocidade, velocidade inicial, se deve sempre ser executado aqui. Você também pode definir outras ações aqui, como roll roll // Atualizados vários estados de ação: run run roll roll simpleHit, lança algo com a mão direita, segundoHit, soco com. a mão direita // jump_kick chute lateral comeon provocar relaxar relaxar sabonete pegar sabonete player.playTo('run',50,15,true);// Posição da animação player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // Inicia o monitor FPS (funções auxiliares não são necessárias) Alloy.monitorFPS(scene); cena, E você pode passar no loop de retorno de chamada para chamar // A última etapa para executar a animação scene.start(); O efeito é como o do garoto correndo abaixo. Perdoe-me por ainda não ter aberto a porta para fazer animações gif...

O código relevante pode ser carregado no github https://github.com/aurora-polaris/canvas3

Como sou novo nisso, não entendo muito bem muitas coisas. Vou resolvê-las quando tiver tempo.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.