79
4.4. Controle o herói pelo teclado e veja sua animação
Casa do Código
4.4
Controle o herói pelo teclado e veja sua
animação
Chegou a hora de juntar a Spritesheet com as outras classes criadas an-
teriormente ( Animacao e Teclado). Vamos controlar o Sonic correndo!
O sprite do Sonic terá sa funções de:
Configurar sua respectiva spritesheet;
Ler o estado das teclas de seta e mudar o estado do sprite;
Selecionar a linha na spritesheet correspondente ao estado desejado;
Responder ao loop de animação, implementando os velhos métodos
atualizar e desenhar.
rq tstsrtstt
P t
t
ttPrs trá tt
srt srsrtstssrt
srt srssrt
srt srtssrt
srt srsssrt
s ss t ts
srt
r rs tã á
srt
t
Primeiro,
façamos as referências do Canvas, como de costume. Depois,
criamos os controles de teclado, de animação e o Sonic. Este precisará ler o 80
Casa do Código
Capítulo 4. Folhas de sprites spritesheets
teclado para movimentar-se. Espero que você esteja percebendo que praticamente tudo que criaremos seguirá este padrão:
r s tttss
r tt sttt
r t t
r tt
r s tt t
s
s
rts
r
Crie a classe Sonic
Pelos comandos dados ao Sonic anteriormente, seu esqueleto conterá so-
mente o context, o teclado, a posição (x, y) e os métodos de sprite:
rq ss
t tt t
tstt tt
tst t
ts
ts
rtt
tr t
sr t
Uma das funções da classe Sonic é controlar sua spritesheet, portanto va-
mos criá-la no construtor. Optei por sempre receber as imagens pelo construtor, pois assim o aplicativo principal terá controle sobre seu evento onload 81
4.4. Controle o herói pelo teclado e veja sua animação
Casa do Código
(por exemplo, para animar uma tela de loading que será criada posterior-
mente).
t tt t
tstt tt
tst t
ts
ts
r srtst rtr r
tsst rtsttt
tssttr
Arrumemos o teste para fornecer a imagem:
r
sr srtst
r s tt t
Vamos também ligar a animação no onload:
srt
t
r
Estados do sprite
Já sabemos movimentar um sprite na tela a partir do teclado. No entanto,
o sprite do Sonic só deverá ser animado se alguma seta estiver pressionada; do contrário, a animação de sprites não deve ocorrer. E ele deve ser animado na direção correta. Aí entra a necessidade de termos bem definidos quais os estados possíveis para o sprite Sonic.
82
Casa do Código
Capítulo 4. Folhas de sprites spritesheets
Na teoria da Orientação a objetos, um estado é uma forma em que
um objeto se encontra e que determina seu comportamento. Em esta-
dos diferentes, a mesma mensagem (chamada de método) enviada a um
objeto pode produzir comportamentos diferentes.
Os estados são definidos a partir de um ou mais atributos de um
objeto. Por exemplo, uma conta bancária pode estar em um estado
NO_VERMELHO caso o saldo seja menor que zero.
O estado do Sonic dependerá de dois atributos: direcao e andando.
Estando parado ou andando, ele pode estar virado para a direita ou para a esquerda. Dessa forma, temos quatro estados possíveis para selecionar as imagens e animar (ou não) a partir da spritesheet.
Vamos definir os as direções do Sonic com valores únicos e iniciar o es-
tado atual no construtor:
r
r
t tt t
tstt tt
tst t
ts
ts
r srtst rtr r
tsst rtsttt
tssttr
st
ts s
tsr
Quero agora testar a seta para direita e movimentar o Sonic de acordo.
Caso o Sonic já não esteja nesse estado, eu tenho que iniciar a respectiva animação na spritesheet. Ao disparar uma mudança de estado, sempre pode-
83
4.4. Controle o herói pelo teclado e veja sua animação
Casa do Código
mos checar o estado anterior e tomar as medidas necessárias. No método
atualizar, fazemos:
tstrss
á ã st st st
ts tsr
qr srtst
tsst
tsst
t
Posicionamos a nossa spritesheet na primeira coluna (zero), da linha rel-
ativa ao Sonic indo para a direita. Ainda dentro do primeiro if, devemos
então definir o estado atual, animar a spritesheet e deslocar o Sonic:
tstrss
r st t
ts tr
tsr
st st çã srtst rr
tsstrr
s
ts ts
Usamos um novo atributo, velocidade. Vamos iniciá-lo com um valor
padrão no construtor:
P sr strtr
ts
O mesmo raciocínio será usado para tratar a movimentação para a es-
querda. Continuando o método atualizar:
84
Casa do Código
Capítulo 4. Folhas de sprites spritesheets
s tstrss
ts tsr
tsst tçã q srá
tsst
ts tr
tsr
tsstrr
ts ts q é s s
Finalmente, se nenhuma tecla de movimentação estiver pressionada, o
Sonic está parado. Devemos, no entanto, checar sua direção atual para saber qual imagem do Sonic parado devemos usar, se virado para a esquerda ou
para a direita. Também não chamamos o método proximoQuadro, pois
neste estado não há animação.
s
tsr
tsst
s tsr
tsst
tsst
ts s
Todo este processamento está ocorrendo, mas sequer podemos ver o re-
sultado: o método desenhar não foi implementado! Aqui, podemos sim-
plesmente chamar o desenhar da classe Spritesheet:
sr t
tsstsrts ts
Isso é tudo! Divirta-se controlando o Sonic para os lados. Ele começa inicialmente parado e virado para a direita, pois assim definimos no construtor, como estado inicial.