O documento discute os desafios de desenvolver um jogo de quebra-cabeça chamado Skeleton Jigsaw usando HTML5. Apresenta as vantagens e desvantagens de usar HTML5 para jogos, como distribuição fácil mas limitações de dispositivos e testes em navegadores. Detalha o código e assets do jogo, otimizações realizadas e estatísticas sobre o tempo de desenvolvimento.

1. Desafios de fazer
o demo do
skeleton jigsaw
com HTML5
Willian Molinari
a.k.a. PotHix
Slides em: goo.gl/w5Ch9i

2. Willian Molinari
mais conhecido como PotHix
GuruSP
.org

3. Histórico

4. Cadê o Ruby?

5. Quase lá! ;)

6. WarOS
https://github.com/pothix/waros

7. RECONQUEST
https://pothix.github.io/RECONQUEST
https://github.com/pothix/reconquest

8. Jogando e aprendendo
http://jogandoeaprendendo.com.br
https://github.com/pothix/jogando_e_aprendendo

9. Desenvolvimento Jogos
casuais com HTML5
http://goo.gl/t5zLEJ

10. Skeleton Jigsaw
http://plaev.github.io/skel
https://github.com/plaev/skeleton-jigsaw

11. Jogos no browser

12. Porque Javascript?

14. Vantagens
■ Distribuição bem mais fácil
■ Ambiente de desenvolvimento simples
■ Possibilidade de rodar em vários devices

15. Desvantagens
■ Limitações de cada device
■ Testes em vários navegadores
■ Debug ainda é difícil

16. Engines
https://html5gameengine.com/
https://github.com/bebraw/jswiki/wiki/Game-Engines

17. Destaques
■ Akihabara (github.com/akihabara) *
■ Pixijs (pixijs.com)
■ MelonJS (melonjs.org)
■ PandaJS (pandajs.net)
■ Crafty (craftyjs.com)
■ Impact (impactjs.com)

19. Map editor
http://impactjs.com/documentation/weltmeister

21. 1 ig.module('game.entities.hud')
2 .requires('impact.entity')
3 .defines(function () {
4 EntityHud = ig.Entity.extend({
5 _wmIgnore: true,
6 animSheet: new ig.AnimationSheet('media/hud.png', 10, 10),
7 gravityFactor: 0,
8 zIndex: 2,
9 name: "hud",
10 piece_collected: false,
11
12 init: function (x, y, settings) {
13 this.parent(x, y, settings);
14 this.addAnim('empty', 1, [0]);
15 this.addAnim('full', 1, [1]);
16 },
17
18 update: function () {
19 if( this.piece_collected ){ this.currentAnim = this.anims.full; }
20 this.parent();
21 }
22 });
23 });

22. Áudio

23. Audio em multiplos formatos

24. Audio otimizado

25. Antes 2.5MB
Depois 1.0MB
Compressão
*aproximado

26. Audio em celulares
Só tristeza

27. Mobile

28. Mobile Safari
http://youtu.be/aPYeNaR5ps0

29. Android Browser
Vários problemas

30. https://www.netmarketshare.com/browser-market-share.aspx

31. https://www.netmarketshare.com/browser-market-share.aspx
19% -> 12%

33. Muitos devices
com muitos browsers

34. Fallbacks
Um mal necessário

35. Otimização!
Vai fazer parte da sua vida

36. Estatísticas
Baseadas no Skeleton Jigsaw

37. 1260 linhas de código Javascript no total (segundo sloc)

38. 4.0K analytics.js
1.2M game.min.js
4.0K index.html
2.6M media
Tamanho total

39. Tempo investido

40. 26 * 4 = 104 horas
Duas semanas de trabalho full time

41. Quase 1 ano
desde o início

42. Considerações
conheça seu jogo e sua tecnologia

43. Perguntas?
https://goo.gl/w5Ch9i
Willian Molinari
@PotHix
pothix@pothix.com
http://pothix.com