27. GRÁFICOS COM SPRITE SHEETS
var sprites = new Image();
sprites.src = “sprites.png”;
ctx.drawImage(
sprites,
sx, sy,
início do recorte
sw, sh,
tamanho do recorte
dx, dy,
coord. de destino
dw, dh
tamanho de destino
);
sx = 25
sy = 50
sw = 25
sh = 25
28.
29. “
1 Game != 1 Canvas
http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games
#ficadica
”
30. USING MULTIPLE
HTML5 CANVASES
AS LAYERS
http://html5.litten.com/laye
rs/canvaslayers.html
http://html5.litten.com/usin
g-multiple-html5-canvasesas-layers/
60. USAR OU NÃO USAR HTML5 PARA
JOGOS?
• JS: linguagem robusta
• Frameworks para auxiliar no desenvolvimento
• Independente de plataforma, dependente de
suporte do navegador
• Manutenção e disponibilidade em diferentes
dispositivos
61. CADA COISA EM SEU LUGAR
• JS para lógica / mecânica
• Controles, inputs, textos, transições: CSS
• SVG: pode ser usado para algumas animações e
cenários vetoriais
• Você precisa mesmo desenhar tudo no canvas?
64. REFERÊNCIAS
• Gil Megidish. Game Development With HTML5.
http://www.slideshare.net/gawd/game-development-with-html5
• LimeJS. Is HTML5 the future of (mobile) gaming?
http://www.limejs.com/2011/03/18/is-html5-the-future-of-mobile-gaming
• Facebook Developers. Making a Speedy HTML5 Game.
https://developers.facebook.com/blog/post/2012/04/17/making-a-speedyhtml5-game/
• Ernesto Jiménez. 5 tips for your HTML5 games.
http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games
• MDN. Canvas Tutorial. https://developer.mozilla.org/enUS/docs/HTML/Canvas/Tutorial