o duende

classe tem a capacidade de mover e girar em seu jogo HTML5, mas esses recursos não são construídos em javascript normal. Você pode usar os recursos de transformação do tag tela para obter esse comportamento.

Transformações são operações matemáticas que podem ser aplicadas a qualquer desenho ou imagem para alterar a aparência. Existem três grandes transformações:

• tradução: Move-se uma determinada quantidade de X e Y.

• rotação: Gira em torno de um ponto particular.

• escala: Altera o tamanho do desenho em X e Y.

Video: Jack the Lumberjack - javascript and HTML5 Canvas Game

O elemento de tela permite que todas estas operações em qualquer tipo de desenho. No entanto, a forma como o elemento canvas faz isso fica um pouco mais perto de matemática do que você pode ter começado antes. Transformações no elemento de tela pode ser difícil de entender até que você entender um pouco sobre como eles realmente funcionam.

Como realizar transformações em um objeto jogo

Em matemática, você realmente não transformar objetos. Em vez disso, você modificar o sistema de coordenadas e desenhar sua imagem no sistema recém-transformada de coordenadas. É comum em um aplicativo de desenho vetorial ter vários sistemas de coordenadas escondidas de trabalho ao mesmo tempo. Isso é importante, porque é a maneira transformações lona trabalhar. Essencialmente, quando você quer executar transformações em um objeto, você faça o seguinte:

1. Anunciar o início de um sistema de coordenadas temporária.

   A imagem principal já tem seu próprio sistema de coordenadas que não vai mudar. Antes você pode transformar qualquer coisa, você precisa para construir um novo sistema de coordenadas para realizar essas mudanças. o Salve () comando indica o início de uma nova definição do sistema de coordenadas.

2. Mova o centro com traduzir().

   A origem (0, 0) Começa no canto superior esquerdo da tela por padrão. Normalmente, você vai construir seus objetos transformados no (novo) origem e mover a origem para colocar o objeto. Se você traduzir (50, 50) E, em seguida, desenhar uma imagem em (0, 0), A imagem irá ser desenhada na origem do sistema de coordenadas temporária, que será em (50, 50) Na tela principal.

3. Girar o sistema de coordenadas com rodar ().

   o rodar () comando roda o novo sistema de coordenadas em torno de sua origem. O parâmetro de rotação é formado em radianos.

4. Dimensionar o sistema de coordenadas X e Y. em

   Você também pode alterar o novo sistema de coordenadas através da aplicação de valores de escala X e Y. Isso permite que você crie imagens esticadas e comprimidas.

5. Criar elementos no novo sistema de coordenadas.

   Depois de aplicar todas as transformações que você quer, você pode usar todas as técnicas de desenho lona comuns. No entanto, estes desenhos serão sorteados no sistema de coordenadas virtual que você acabou de fazer, não no principal sistema de coordenadas da tela.

6. Feche o sistema de coordenadas temporária.

   Geralmente, você vai querer aplicar diferentes transformações para diferentes partes da sua tela. Quando você terminar com uma transformação especial, use o restaurar() comando para fechar o novo sistema de coordenadas. Todos os comandos de desenho posteriores usará o padrão do sistema do objeto da lona de coordenadas.

Como transformar uma imagem de jogo

Pode ser difícil entender como matemática transformações funcionam porque eles parecem tão simples na superfície. Construir um programa para ver como isso tudo se encaixa.

transformações


Canvas não é suportada

Este programa faz a configuração normal de lona e, em seguida, cria uma transformação que traduz a imagem para o centro da tela, gira a imagem, e muda o tamanho da imagem:

1. Criar uma página com uma lona.

   Normalmente, simpleGame irá criar a tela para você, mas, neste caso, o elemento de tela é feita à mão.

2. Fazer todas as coisas de configuração normal.

   Isso envolve a limpeza regular: conseguir o acesso para a tela e seu contexto e criar a imagem.

3. Comece um novo sistema de coordenadas.

   o Salve () comando realmente não salvar nada. Ele indica o início de um novo sistema de coordenadas. Quaisquer comandos de desenho que ocorrem entre esta Salve () declaração e a correspondência restaurar() seguirá funções de transformação.

4. Traduzir o novo sistema.

   Mova o sistema de coordenadas para (100, 100), que é o centro da tela.

5. Gire o novo sistema.

   Rodar a imagem por pi / 4 radianos, o que é 45 por cento.

6. Dimensionar o novo sistema.

   multiplique o X valores de 3 e o Y valores de 1,5.

7. Desenhar uma imagem.

   Porque esta imagem é desenhada dentro de uma Salve () / restaurar() bloco, ele é desenhado com as transformações intactas.

8. Termine o subsistema com restaurar().

   o restaurar() comando fecha-se o sistema de coordenadas temporária para que todos os comandos subseqüentes irá se referir ao pai sistema de coordenadas.

9. Desenhe um retângulo vermelho no sistema padrão.

   O vermelho acariciou retângulo é desenhado fora do normal do sistema de coordenadas, então não é dimensionado ou girado.

O principal projeto da duende objecto é uma imagem cercada por uma transformação. Quando você cria um sprite, ele constrói o objeto de imagem, e define uma transformação com tradução, rotação e escala.

Como você manipular a posição, ângulo e velocidade do sprite, você está realmente simplesmente alterando os valores enviados para a transformação. A imagem é deslocada de modo que o (X, y) propriedades do sprite de especificar o centro do sprite. Dessa forma, sprites girar em torno de seu centro, o que dá uma aparência mais natural.