s
tr
ã t r çã
tsrttr
Como o herói vai acrescentar um tiro à animação sem uma referência a
ela? Vamos recebê-la também no construtor:
t rtt t
tstt tt
tst t
ts
ts
ts
E passá-la no aplicativo de teste:
64
Casa do Código
Capítulo 3. A interação com o jogador leitura apurada do teclado
r r rtt t
Faça o teste. Se você fez tudo correto, o herói deve atirar ao teclarmos
espaço. Mas ainda temos dois pequenos problemas:
1) a classe Bola está programada para quicar, portanto não vemos os tiros sumirem da tela (figura 3.6);
2) quando parado, o herói atira sempre para a direita.
Figura 3.6: Os tiros ficam quicando na tela, ao invés de sumirem
Para resolver o primeiro problema, vamos mudar o algoritmo do método
atualizar da classe Bola. Recomendo que este teste referencie sua própria cópia do arquivo bola.js, para não alterar o comportamento dos testes
anteriores.
tr t
rs s tsts q q r s
ts ts
ts ts
65
3.3. Efetuando disparos detectando somente o primeiro keydown
Casa do Código
Quanto à direção do tiro, criamos no Heroi um atributo que guarda a
sua direção:
ós ús r s rçõs
r
r
t rtt t
tstt tt
tst t
ts
ts
ts
rçã rã
tsr
Desta forma, ao movimentar o herói, guardamos a direção em que ele se
encontra nesse atributo:
tr t
tstrss
ts
tsr
ts
s tstrss
ts tsttst
tsr
ts
Por fim, basta ler essa direção ao soltar o tiro, em vez do estado de determinada tecla:
trr t
66
Casa do Código
Capítulo 3. A interação com o jogador leitura apurada do teclado
rçã t
tsr
tr
s
tr
Pronto! Temos um herói que se movimenta e atira dentro de um loop
de animação. Embora ainda esteja muito básico, é preciso que os conceitos aprendidos fiquem bem fixados para seguirmos para as próximas etapas. Procure reler e refazer os códigos de cada capítulo diversas vezes. Tente também fazer algumas coisas diferentes, como mover ou atirar na vertical!
Para isso, os códigos de teclas são 38 (acima) e 40 (abaixo), e as alterações na posição y dos sprites serão as mesmas já feitas para x, somente incrementando a partir da velocidadeY. Experimente!
No próximo capítulo, introduzirei as folhas de sprites (spritesheets), que nos permitirão animar nosso herói
a partir de imagens.
67
Capítulo 4
Folhas de sprites spritesheets
4.1
Conceito e abordagem utilizada
Um pequeno game engine está começando a tomar forma. Já temos um modo
robusto de controlar o loop de animação e capturar a entrada do usuário no teclado de uma maneira eficiente para jogos.
Neste capítulo, avançaremos um pouco além e faremos algo muito inter-
essante e fundamental: as spritesheets (folhas de sprites). Um sprite, como você aprendeu no capítulo 2.1, é cada elemento controlado pelo loop de animação (o herói, um inimigo, um bloco ou plataforma etc.). Uma folha de
sprites é uma imagem contendo várias partes de uma animação. Essas partes são alternadas constantemente para produzir o movimento de um ou mais
sprites.
4.1. Conceito e abordagem utilizada
Casa do Código
Figura 4.1: Folha de sprites (spritesheet)
É uma boa prática carregar imagens maiores contendo uma porção de
outras menores, em vez de ter cada pequena imagem em seu próprio arquivo.
Lembre-se de que, em ambiente web, cada imagem requer nova conexão do
browser com o servidor.
Programar animações com spritesheets pode ser tão simples ou tão tra-
balhoso quanto você desejar ou precisar, dependendo da abordagem uti-
lizada. No livro Core HTML5 Canvas[1], de David Geary, as posições de
cada figurinha (x, y, largura e altura) dentro da spritesheet são chumbadas em grandes arrays:
r srt
t
Essa abordagem é bastante econômica em termos do espaço ocupado
pelas imagens, mas gera muito trabalho extra para coletar a posição de
cada imagem e, principalmente, para enquadrá-las adequadamente. Aqui,
adotaremos uma abordagem bastante sistematizada:
cada spritesheet será dividida em espaços iguais, por isso as imagens
devem estar corretamente distribuídas;
cada linha da spritesheet corresponderá a um estado do sprite (ex.:
parado, correndo para a direita, correndo para a esquerda);
a animação de um estado usará somente as figuras na sua linha própria.
70
Casa do Código
Capítulo 4. Folhas de sprites spritesheets
Isso gera grande quantidade de espaço vazio na imagem, aumentando o
tamanho do arquivo, mas certamente facilitará muito a programação. Tenha
em mente que esta não é a única abordagem válida, mas para fins didáticos é a que iremos utilizar V convenhamos, o modo mais econômico descrito no
livro Core HTML5 Canvas é totalmente improdutivo, em especial quando o
foco é o aprendizado das técnicas de programação, não de enquadramento de imagens.
Figura 4.2: Spritesheet dividida em partes iguais e organizando os estados por linhas
O CorelDraw possui a ferramenta Papel Gráfico, que cria um quadric-
ulado dividindo uma área em partes iguais. Neste programa e também
no Photoshop, Illustrator e em outros, podemos usar as réguas e linhas-
guia. Se você não conhece estes recursos, sugiro que pesquise a respeito.