Como construir um Multi-State Animação em seu jogo HTML5
Com todo este movimento acontecendo no seu jogo HTML5, você está certo de querer várias animações sofisticadas. Você pode usar o ChangeImage () ou setImage () function (eles são dois nomes diferentes para a mesma coisa) para mudar a imagem associada a um sprite qualquer momento. Às vezes, porém, você quer animações muito mais sofisticados. Dê uma olhada walkAnim.html.
Há um monte de imagem em 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 (uma 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 composta. 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.png imagem foi criada por Franck Dupont. Ele generosamente colocaram esta imagem na local OpenGameArt.org, onde ele é conhecido como "Arikel." Ele lançou seu trabalho sob uma licença especial chamado # 147 Atribuição -. Share Alike # 148- Isso significa que as pessoas podem usar ou remixar seu trabalho gratuitamente, contanto que eles atribuem ao 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.
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 de que a imagem é 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 do tamanho de toda a imagem (largura e altura), eo segundo dois parâmetros são a largura e altura de cada sub-imagem. Se você receber esses valores errado, a animação será exibida 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 será transformado 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 anexar seus próprios nomes, mais significativos. Adicionar uma matriz com um nome indicando o que cada linha representa:
character.renameCycles (new Array ( "down", "up", "esquerda", "direita")) -
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 pretende exibir.
o setCurrentCycle () método permite que você escolha o ciclo com um dos nomes que você indicados no renameAnimationCycles () passo:
character.setCurrentCycle ( "down") -
Use o pauseAnimation () comando para pausar a animação.
o pauseAnimation () de comando faz com que a animação parar temporariamente.
Usar playAnimation () para começar a animação.
Este método irá continuamente repetir o ciclo de animação atual.
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.