Como construir uma animação multi-estadual em seu jogo html5
Com todo este movimento acontecendo em seu jogo HTML5, você está certo de querer várias animações sofisticadas. Você pode usar o ChangeImage ()
Conteúdo
Video: Personagem e Animação - Vídeo Aula - Unity 2D - Criando um jogo 2D
Há um monte de imagem-troca acontecendo aqui. A animação curta é na verdade uma série de oito imagens diferentes rapidamente trocados para dar a ilusão de andar. Existem 4 animações diferentes (um para cada um dos pontos cardeais), de modo que um total de 32 imagens diferentes. No entanto, se você olhar sobre o código, você verá que o personagem Sprite contém apenas uma imagem.
Esta imagem é uma animação compósito. Cada linha representa uma direcção, e cada linha contém um ciclo, ou uma série de imagens, destinados a ser repetido.
o rpg_sprite_walk.jpg imagem foi criada por Franck Dupont. Ele generosamente colocaram esta imagem na local OpenGameArt.org, “Arikel”, onde ele é conhecido como Ele lançou seu trabalho sob uma licença especial chamado “Atribuição -. Share Alike” Isso significa que as pessoas podem usar ou remixar seu trabalho gratuitamente, contanto que eles atribuem o autor original.
A imagem de fundo é de um autor chamado Hyptosis, que divulgou imagens sob o domínio público no mesmo local. colaboradores talentosos e pensativos como Franck e Hyptosis são a chave para a comunidade criativa próspera. Sinta-se livre para olhar sobre o site aberto arte do jogo para mais uma grande obra de arte para usar em seus jogos, mas não se esqueça de agradecer e atribuem os autores como eles merecem.
Video: Como Criar Um Jogo De Plataforma (Animação de Sprites 2D) - Tutorial Construct 2 #02
o simpleGame.js biblioteca contém um recurso para fazer animações multi-imagem com bastante facilidade. Olhar sobre o código para walkAnim.html para ver como ele funciona:
walkAnim.html
Você precisa tomar alguns novos passos para construir uma animação, mas os resultados são completamente vale o esforço.
Obter uma imagem de animação.
Você pode criar uma imagem mesmo, ou olhar para os excelentes recursos como OpenGameArt.org para encontrar trabalho que os outros fizeram. Claro, você tem a responsabilidade de respeitar o trabalho do outro, mas há alguma grande obra disponível em licenças permissivas muito hoje. Certifique-se a imagem está organizada em linhas e colunas e que cada sub-imagem é exatamente o mesmo tamanho.
Você pode ter que mexer com o seu editor de imagem para assegurar que a imagem está no formato certo e que você sabe o tamanho de cada sub-imagem.
Anexar a imagem de animação para seu sprite.
Você estará anexando toda a imagem ao seu sprite, mas apenas exibir uma pequena parte dele a qualquer momento. Isto é mais fácil do que trabalhar com um monte de imagens, e também é mais eficiente.
Criar um objeto de animação com o loadAnimation () método.
Quando você invocar o loadAnimation () método de um objeto, você está criando uma ferramenta de animação que ajuda a gerenciar a animação. Os primeiros dois parâmetros são o tamanho de toda a imagem (largura e altura), e os segundos dois parâmetros são a largura e a altura de cada sub-imagem. Se você receber esses valores errado, a animação vai aparecer para rolar. Continue jogando até que você obter esses valores direita:
character.loadAnimation (192, 128, 24, 32) -
Construir os ciclos de animação.
Cada linha irá ser transformada em um ciclo de animação. A versão padrão (sem parâmetros) funciona bem na maioria das situações. Procure a documentação para os usos mais avançados desta ferramenta:
character.generateAnimationCycles () -
Renomeie os ciclos.
As animações criadas com o buildAnimationCycles () comando têm nomes padrão, mas é quase sempre melhor para prender seus próprios nomes, mais significativos. Adicionar um array com um nome indicando o que cada linha representa:
character.renameCycles (new Array ("baixa", "acima", "esquerda", "certo")) -Defina a velocidade da animação.
A velocidade da animação indica o quão rápido a animação será executado. Um valor de 500 parece certo para a maioria das aplicações, mas você pode ajustar esse valor para ciclo de caminhada do personagem parece que está realmente impulsionando o personagem:
character.setAnimationSpeed (500) -
Definir quais ciclo você pretende exibir.
o setCurrentCycle () método permite que você escolha o ciclo com um dos nomes que você indicados no renameAnimationCycles () degrau:
character.setCurrentCycle ("baixa") -Use o pauseAnimation () comando para interromper a animação.
o pauseAnimation () comando faz com que a animação parar temporariamente.
Usar playAnimation () para começar a animação.
Este método irá continuamente ciclo a ciclo animação corrente.
Como você pode ver, animação adiciona uma enorme quantidade de diversão com o jogo e abre todo o reino dos jogos de RPG para o seu repertório.