Figura 6.3: Os elementos do fundo rolam a velocidades diferentes
109
6.1. Animação de fundo com efeito parallax
Casa do Código
Paralaxe
Um avião no céu parece voar a uma velocidade incrivelmente lenta.
No entanto, se estivéssemos lá em cima e ele passasse por nós, o veríamos a toda velocidade.
Da mesma forma, viajando por uma estrada, o mato diante do meio-
fio e as placas passam velozmente, enquanto a serra ao longe se afasta
devagar.
Esse efeito de velocidade aparente, na Física, é denominado par-
alaxe. Quanto mais distante está um objeto, menor será sua veloci-
dade percebida por nós.
O livro Core HTML5 Canvas, de David Geary, traz um exemplo muito
bem feito, que pode ser conferido aqui:
http://corehtml5canvas.com/code-live/ch05/example-5.17/example.
html
Obs.: entre desenvolvedores de jogos, o mais comum é nos referir-
mos ao efeito pelo nome em inglês (parallax), razão pela qual usarei esta forma daqui para frente.
Durante a rolagem, cada imagem deverá ser desenhada no mínimo duas
vezes, de forma a cobrir toda a área de desenho durante a rolagem (figura 6.4). Se fosse uma imagem menor, teríamos que desenhá-la mais vezes. A
cada ciclo, nós emendamos os desenhos a uma altura diferente (marcada com uma linha vermelha):
110
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
Figura 6.4:
Cada imagem de fundo é desenhada quantas vezes forem
necessárias para cobrir
a área do jogo. Com imagens maiores que o Canvas, duas vezes são suficientes
Repare que os pontos inicial e final do gradiente têm de possuir a mesma
cor para serem emendados (lembre-se disso ao criar as imagens em seu pro-
grama gráfico predileto). Da mesma forma, os extremos das outras figuras
precisam encaixar-se perfeitamente! Por exemplo, para criar as nuvens, podemos proceder da maneira descrita nas figuras 6.5 e 6.6:
111
6.1. Animação de fundo com efeito parallax
Casa do Código
Figura 6.5: Quebramos uma nuvem pelo centro
Figura 6.6: Viramos cada metade de cabeça para baixo e encaixamos nas bordas da imagem
Tomando esses cuidados ao produzir as imagens de fundo de seus games,
112
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
a programação ficará muito fácil. Vamos criar a classe Fundo, que será basi-camente um sprite como todos os outros.
Teste para a classe Fundo
Para a criação deste teste, crie uma pasta de nome img na mesma pasta
onde o HTML será salvo, e copie nela os arquivos fundo-espaco.png,
fundo-estrelas.png e fundo-nuvens.png do pacote que você baixou.
Você pode criar ou procurar outras imagens com fundo transparente tam-
bém, mas certifique-se de recortá-las ou dimensioná-las para 500x1000.
Figura 6.7: Crie uma pasta junto ao HTML e copie as imagens nela
O HTML para o teste não tem nada de especial:
rq tstt
P t
t
tts r Prtt
srt srssrt
srt srssrt
113
6.1. Animação de fundo com efeito parallax
Casa do Código
s s t ts
srt
Prr ts q rrr s s
srt
t
Observação
Ao
incluir
arquivos
já
criados
anteriormente
(no
caso,
animacao.js), pegue sempre o do capítulo mais recente.
Neste
caso, a versão mais recente da classe Animacao é do capítulo 4. A cada
capítulo ou tópico, o game engine poderá sofrer alterações.
No JavaScript, inicialmente mandamos carregar as imagens:
r s
ssr s
r strs
strssr strs
r s
ssr s
Em seguida, temos que esperar todas serem carregadas. Como já apren-
demos, isto é feito através do evento onload. Mantemos um contador de
quantas já estão carregadas e, quando todas estiverem prontas, a aplicação pode de fato iniciar":
r rrs
r tt
s rr
strs rr
114
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
s rr
t rr
rrs
rrs tt r
Na função iniciar, fazemos as operações habituais: inicializamos o
Canvas, criamos os sprites (que aqui serão os fundos rolando) e os incluímos no objeto animador:
t r
r s ttts
r tt sttt
Pss tt r s ts
r s tt s
r strs tt strs
r s tt s
rt
s
strs
s
r tt
rts
rtstrs
rts
r
Iniciando a classe Fundo
A próxima etapa é iniciar a classe Fundo. Sempre adotamos a prática
de receber as imagens pelo construtor, para permitir que a aplicação controle quando todas estão carregadas:
rq s
t tt
115
6.1. Animação de fundo com efeito parallax
Casa do Código
tstt tt
ts
ts
rtt
tr t
sr t
Lembre-se de que cada fundo deve ser desenhado duas vezes, emenda-
dos pelas extremidades em posições diferentes (figura 6.4). Crie o atributo posicaoEmenda e o inicialize no construtor com o valor zero:
t tt
tstt tt
ts
ts
tss
No método desenhar, desenhamos as duas cópias da imagem emen-
dadas nessa posição:
sr t
r ts Pr tr srt
Prr ó
r s tss t
tsttr s t
t
ó
s tss
tsttr s t
t
116
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
No método atualizar, incrementamos a posição da emenda e a volta-
mos para zero caso a imagem de cima desça mais que o início do Canvas. A
figura 6.8 adiante ilustra o que acontece:
tr t
tr sçã
tss ts
ss sçã
tss tst
tss
Figura 6.8: Imagens desceram muito, hora de reposicioná-las