Palestra apresentada na USC durante a 3ª Jornada de Informática

1. DESENVOLVIMENTO
DE JOGOS COM
<HTML5 />
Talita Pagani - @talitapagani

2. SOBRE
Formação
Atuação Profissional
Comunidade

3. HTML5 E SUA
PARAFERNÁLIA*...
* sim, é assim que se escreve. “Parafernalha” é outra coisa.

4. Canvas
Audio &
Video
Offline
Applications
HTML5
Media
Capture
Seletores e
Validadores
Web
Sockets e
Web
Storage

5. PORQUÊ?
• Ubiquidade: mobile, web, TV, geladeira (?)
• Independência de plataforma
• Facebook
• Acessibilidade

6. Jogos em HTML5:
HTML5 +
JAVASCRIPT +
CSS + SVG + ...?

7. Lógica
Assets
Gráficos
Anatomia
de jogos
Input
Multiplayer
Áudio

8. JS
Gráficos, cenários
(vetoriais),
animações
SVG
CSS
<canvas>, <audio>,
<video>, conteúdo
textual
Comportamentos,
eventos, lógica,
mecânica
HTML5
Transições, controles,
formatação e
apresentação

9. Ll VIESES

10. FAMILIARIDADE
Você já conhece a tecnologia

11. COMPLEXIDADE
JavaScript é uma linguagem de propósito geral

12. CROSS-PLATFORM
Um único código, múltiplos dispositivos

13. SUPORTE
Diferentes features, diferentes navegadores

14. (IN)CONSISTÊNCIA
Implementações distintas

15. SOCIAL
Possibilidade de integração com APIs e features
de redes sociais

16. SEGURANÇA
Proteção de código

17. PERFORMANCE
Aceleração de hardware, GPU e etc.

18. Você sabia que...
O INTERNET EXPLORER (9 E 10)
POSSUI UMA BOA ACELERAÇÃO
DE HARDWARE?

19. ≠
HATERS GONNA HATE

22. %
CÓDIGOS E
MELHORES PRÁTICAS

23. Tudo começa aqui...
<canvas id=“canvas" width="150" height="150">
Desculpe, seu navegador não suporta canvas.
</canvas>
<script type="text/javascript">
function gameloop() {
var canvas = document.getElementById(canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>

24. PRIMITIVAS
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}

25. PRIMITIVAS + IMAGENS
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
};
img.src = '/files/4531/backdrop.png';
}

26. MAIS FUNÇÕES...
•
save();
•
translate(x, y);
•
rotate(d);
•
scale(x, y);
•
restore();
•
bezierCurve, quadraticCurve, rect, fillText, strokeText, beginPath/closePath

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

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/

31. Canvas

32. DOM

33. Múltiplos canvas permitem
CAMADAS
DRAW REGIONS
MELHOR MANIPULAÇÃO DE
ELEMENTOS DO JOGO

34. Tudo isso pra
DESENVOLVER
UM JOGO
em HTML5???

35. CALMA
Tá tudo bem agora

36. http://impactjs.com/

37. http://www.limejs.com

38. http://www.gameclosure.com/

39. http://craftyjs.com/

40. http://melonjs.org/

41. http://joyjs.org/

42. http://threejs.org/

43. http://phonegap.com/

44. http://html5gameengine.com/

45. >
DEMOS

46. http://talitapagani.github.io/DamnAliens/

47. http://phoboslab.org/ztype/

48. http://www.currantcat.com/convergence/

49. http://canvasdefense.appspot.com/

50. http://wordsquared.com/

51. http://playtankworld.com/level/air_strike

52. BÔNUS
http://html5games.com/

53. BÔNUS
http://www.html5games.net/

54. B
ONDE APRENDER

55. http://www.html5gamedevelopment.com/

56. http://www.html5canvastutorials.com/

57. https://developer.mozilla.org/pt-BR/demos/?menu

58. http://www.html5rocks.com/en/tutorials/canvas/notearsgame/?redirect_from_locale=pt

59. !
CONCLUSÕES

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?

62. 7
ARQUITETURAS
HÍBRIDAS DE JOGOS

63. come to the
dark Web side

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

65. FRAMEWORKS
•
http://www.limejs.com/
•
http://impactjs.com/
•
http://www.gameclosure.com/
•
http://craftyjs.com/
•
http://www.melonjs.org/
•
http://phonegap.com/
•
http://joyjs.org/

66. IMAGENS
• http://rawkes.com/articles/mashing-up-the-html5-logo
• http://crieseumeme.com/media/created/o5lmld.jpg
• http://fc03.deviantart.net/fs70/i/2010/005/2/0/Sonic_Sprite_
Sheet_WIP_by_Derek_the_Hedgehog87.png
• http://fc02.deviantart.net/fs71/i/2011/086/9/b/darth_vader_
by_sila92-d3cmlgq.png
• https://www.dropbox.com/sh/m5efumhdr4quhqv/zXDKgTnrOg
#/

67. Obrigada!
twitter.com/talitapagani | facebook.com/talitapagani | github.com/talitapagani

68. Perguntas?