Sugestões:
http://coreldrawtips.com/site/using-the-graph-paper-tool-in-coreldraw
http://helpx.adobe.com/br/photoshop/using/grid-guides.html
71
4.2. Carregando imagens e fazendo recortes (clipping)
Casa do Código
4.2
Carregando imagens e fazendo recortes
(clipping)
Carregar uma imagem do servidor pelo JavaScript é bastante simples.
Primeiro instanciamos um objeto Image, em seguida, setamos seu atributo
src para o caminho da imagem:
r
sr srtst
A imagem possui o evento onload, que é disparado quando o carrega-
mento da imagem está completo:
t
Quando tivermos muitas imagens, o evento onload de cada uma pode
incrementar uma porcentagem ou barrinha de carregando. Isso ficará para outra hora!
Vamos agora fazer o clipping (enquadramento), que é o recorte da parte
exata da spritesheet que queremos. Por exemplo, suponha que queremos a
figurinha na linha 2, coluna 7 (contados a partir de zero). Na hora de programar as animações, ficará muito mais fácil expressar dessa maneira. No
entanto, precisaremos calcular a posição (x, y) do recorte da imagem.
rq t
P t
t
tt
rtst rrt qrt
tt
s s t t
s
srt
72
Casa do Código
Capítulo 4. Folhas de sprites spritesheets
r
sr srtst
t
q rs
srt
t
No evento onload da imagem, calcularemos as posições x e y do recorte.
Como estamos considerando quadros de tamanhos iguais, basta dividir a
largura total pelo número de colunas para obter a largura de um quadro. Depois basta multiplicar este valor pela coluna desejada, e temos a posição x onde o recorte se inicia. Para a posição y, o processo é análogo a partir da altura total e número de linhas:
t
Pss sts rs r srtst
r s
r s
sã qr
r rr t s
r tr t s
r q qr rss
r qr
r qr
Psçã rrt
r rr qr
r tr qr
t
Tendo calculado x, y, largura e altura, basta lembrarmos do método
drawImage do context (veja o capítulo 1.2). Este método pode ser chamado
73
4.2. Carregando imagens e fazendo recortes (clipping)
Casa do Código
de duas maneiras:
Desenhando uma imagem inteira:
ttr rr tr
Fazendo clipping:
ttr
r
r
rrr
trr
st
st
rrst
trst
Finalizemos, então, o nosso código:
r tt
tttsttt
ttr
rr
tr
Psçã s qr sr
rr
tr
Veja o resultado no browser:
74
Casa do Código
Capítulo 4. Folhas de sprites spritesheets
Figura 4.3: Fazendo clipping na spritesheet (quadro na linha 2, coluna 7) 4.3
Animações de sprite a classe Spritesheet
Daremos prosseguimento à confecção do nosso game engine.
A classe
Spritesheet será responsável por:
Avançar a animação, escolhendo qual o quadro a ser desenhado no mo-
mento;
Calcular as posições de recorte e realizar o clipping, dados os números de linhas e colunas;
Gerenciar o tempo entre um quadro e outro.
Como de costume, escreveremos primeiro um código de teste, com o qual
tentamos manter a interface da classe o mais enxuta possível. Inicialmente, faremos o Sonic correr para a direita. Cada quadro terá a duração de 60 milissegundos, podendo ser ajustado posteriormente.
75
4.3. Animações de sprite a classe Spritesheet
Casa do Código
Figura 4.4: Sonic correndo na tela
Dessa forma, a classe Spritesheet deverá alternar para nós os quadros
da segunda linha (índice 1, contado a partir de zero veja figura 4.2). Ainda não usaremos a classe Animacao, apenas uma função simples que servirá
como game loop.
rq tstsrtstt
P t
t
ttst ss rtsttt
srt srsrtstssrt
s ssrtst t t
s
srt
s ttr r rtst
r s ss
76
Casa do Código
Capítulo 4. Folhas de sprites spritesheets
srt
t
No JavaScript, queremos dizer à classe Spritesheet os números de lin-
has e colunas, e escolhemos qual linha queremos animar. As colunas deverão ser alternadas automaticamente.
Também
passamos no construtor o context do Canvas e a imagem a ser
desenhada:
r tt tttssrtst
ttt
r
sr srtst
r ssr tt s s
r st rtsttt
rçã qr
sttr
rr r rt
st
çã
Na função gameLoop, ordeno à Spritesheet que avance um quadro
e que desenhe o quadro atual na posição que eu mandar:
t
ttrt ttst
ttst
çr çã
strr
77
4.3. Animações de sprite a classe Spritesheet
Casa do Código
sr qr t
stsr
rqsttr
Teste pronto, passemos ao esboço da classe Spritesheet:
t rtsttt s s
tstt tt
ts
tss s
tss s
tstr
ts
ts
rtstrtt
rr t
sr t
O cálculo do quadro atual é bem simples, bastando incrementar a coluna
atual e voltar para zero quando exceder o número de colunas:
rr t
ts tss
ts
s
ts
Mas há um porém: como temos um intervalo de tempo definido para a
mudança de quadro, temos que levá-lo em conta! Isso não é difícil: vamos
manter um registro da última mudança e, a cada ciclo, verificar se já passou o tempo especificado:
78
Casa do Código
Capítulo 4. Folhas de sprites spritesheets
rr t
t t
r r tt
ã t út t
tst tst r
á é r r
r tst tstr rtr
ts tss
ts
s
ts
rr r út ç
tst r
No método desenhar, basta fazer o clipping como aprendemos:
sr t
r rrr tst tss
r trr tst tss
tsttr
ts
rrr ts
trr ts
rr
tr
rr
tr
Neste ponto, já temos o Sonic correndo na tela, mas ainda sem alterar sua posição.