Como exemplo prático, começamos desenhando um quadrado verde. Em
seguida, subimos na pilha com save e fazemos um quadrado roxo. Depois
que retornamos com restore, nossa cor atual passa a ser o verde nova-
mente:
rq srstrt
s s t ts
srt
s tt
r s ttts
r tt sttt
q qr r
ttt r
ttt
s rçã ss
tts
r qr r
ttt r
ttt
ts r í trr
ttrstr
t r r
20
Casa do Código
Capítulo 1. Fundamentos
ttt
srt
Figura 1.16: Salvamos a cor verde na pilha (save), mudamos para roxo e volta-mos para o verde (restore)
Referências sobre o Canvas
Neste tópico, não quis nem de longe esgotar os recursos do Canvas,
mas dar uma base para iniciarmos o desenvolvimento de jogos. Indico-
lhe algumas referências para você aprimorar seus conhecimentos e ter
ideias, muitas ideias, para implementar em seus jogos:
W3Schools[3] (http://www.w3schools.com/tags/ref_canvas.asp) :
recomendo todos os tutoriais deles, por serem simples e por você
poder rodar os exemplos na hora;
Core HTML5 Canvas[1] (http://corehtml5canvas.com) : excelente
livro de David Geary, bem aprofundado, foi a minha principal
fonte para aprender sobre o Canvas. O autor discute não somente
os recursos da ferramenta, mas técnicas e algoritmos extrema-
mente avançados e úteis para jogos;
HTML5 2D game development: Introducing Snail Bait[2] (http:
//goo.gl/Ojvi9T - URL encurtada): do mesmo autor do Core
HTML5 Canvas, este é o primeiro de uma série de artigos na qual
somos guiados na criação de um jogo de plataforma.
21
1.3. Animações com requestAnimationFrame
Casa do Código
1.3
Animações com requestAnimationFrame
Tradicionalmente,
quando
queremos
executar
tarefas
periódicas
em páginas web,
usamos os métodos
window.setTimeout
ou
window.setInterval, passando a função desejada e o intervalo em
milissegundos.
Os
resultados são satisfatórios para tarefas simples, no
entanto, o controle do tempo pelo browser não é totalmente preciso. É
preciso lembrar que os sistemas operacionais modernos são multitarefa, e
mesmo os browsers podem ter várias guias abertas. Não é possível garantir que a CPU esteja sempre disponível no momento exato desejado, portanto o
intervalo informado sempre será aproximado.
A solução para jogos e outras aplicações que requerem animações mais
precisas é trabalhar com ciclos mais curtos, aproveitando cada momento em que a CPU está disponível para nosso aplicativo, e nesse momento fazer
o cálculo do tempo. Para isso, a especificação do HTML5 traz o método
window.requestAnimationFrame, que delega para o browser a tarefa de
executar sua animação o mais rápido possível, assim que os recursos do sistema estiverem disponíveis. Para este método, passamos como parâmetro a
função que fará os desenhos no Canvas. Temos que chamá-lo de forma cíclica, uma vez após a outra, da mesma forma que faríamos caso usássemos o conhecido setTimeout:
tór
t çã çã
ã é rs qr
rqsttr
çã çã
t
ç s qqr
t ró
rqsttr
Para demonstrar na prática, façamos uma bolinha se deslocando pela tela.
22
Casa do Código
Capítulo 1. Fundamentos
Obtemos as referências do Canvas e do contexto gráfico, definimos a posição inicial da bola e seu raio e, em seguida, mandamos uma animação iniciar,
chamando a função mexerBola:
rq rqsttrt
s s t ts
srt
s tt
s ttts
tt sttt
s
r
r
r r
r çã
rqsttrr
çã çã
t r
q s srá
srt
Nessa função, primeiro limpamos o Canvas com o método clearRect
do contexto, que serve para limpar uma área (equivale a desenhar um retângulo branco). Fazemos isso para apagar rastros anteriores da bolinha. Em
seguida, nós a desenhamos em sua posição atual, alteramos sua posição x e solicitamos a execução do próximo ciclo de animação:
t r
r s
ttrt st st
sr
ttPt
ttr r tP
tt
23
1.3. Animações com requestAnimationFrame
Casa do Código
sr s r rt
r ró çã
rqsttrr
Faça experiências! Você pode:
mexer para a direita: some um valor a x (veja a figura 1.2);
mexer para a esquerda: subtraia um valor de x;
mexer para baixo: some um valor a y;
mexer para cima: subtraia um valor de y;
mexer na diagonal:
altere as posições tanto de x quanto de y. Você
pode somar ou subtrair, usar valores diferentes para cada um etc.
Controlando o tempo da animação
Repare que a bolinha anda bem depressa.
Isto ocorre porque o
requestAnimationFrame trabalha com ciclos curtos, aproveitando o
primeiro momento em que a CPU e o browser puderem executar o processa-
mento da função de animação.
Podemos ler o relógio do computador em cada ciclo para controlar o
movimento da bolinha. Sabemos que o JavaScript possui o objeto Date, que
obtém a data e a hora atuais, e que esse objeto possui o método getTime(), que devolve esse instante exato em milissegundos. Para saber quanto tempo demorou entre um ciclo e outro (lembre-se de que esse tempo é sempre variável), bastaria tirar a diferença entre o instante atual e o anterior. Sabendo o intervalo decorrido, é possível calcular quanto a bola deve se deslocar nesse tempo:
tór
tr stt t
24
Casa do Código
Capítulo 1. Fundamentos