O documento discute o desenvolvimento de um jogo 2D usando a engine Impact.js e JavaScript. O autor detalha sua experiência criando dois jogos open source anteriormente usando Ruby e C++ antes de escolher Impact.js para seu projeto mais recente devido ao seu baixo custo e fácil aprendizado. O autor também discute ferramentas, design, dificuldades e lições aprendidas durante o desenvolvimento do jogo.

1. HTML5, gamedev
e o
Skeleton Jigsaw
por
Willian Molinari
a.k.a. PotHix

2. Porque!?

3. Gamejam Itaú cultural

4. Cadê o Ruby?

5. Close enough :)

6. E o Ruby?

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

8. ■ Ruby 1.9.3
■ Gosu
■ Rspec
■ SDL (via Gosu)

9. Motivação

10. Distribuição

11. Python?
PyGame é bem legal!

12. JavaScript
Really?

13. RECONQUEST
https://github.com/pothix/reconquest

14. Escrever do zero?

15. Vantagens
■ Menos código e arquivos menores
■ Conhecer todo o código
■ Micro tuning

16. Desvantagens
■ Lá vem mais uma engine…
■ Não contribui com nenhuma outra
■ Teria que construir algumas ferramentas

17. Engines

18. LimeJS
http://limejs.com

19. Crafty
http://craftyjs.com

20. 秋葉原
Akihabara
https://github.com/akihabara/akihabara

21. Várias outras!
https://github.com/bebraw/jswiki/wiki/Game-Engines

22. Impact
http://impactjs.com

23. Impact
Morre $100 nessa brincadeira

24. Fonte: https://humblebundle.com

25. Impact por $30!

26. Eu escolho você, Impact!

27. Weltmeister (Level Editor)

28. 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 });

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

30. http://github.com/plaev

31. O Protótipo

36. História

37. Arte e Design

38. Por que pixel art?
(Nessa escala)

42. RECONQUEST
https://github.com/pothix/reconquest

43. Biolab Disaster
http://playbiolab.com

44. …

45. wat

48. Ferramentas

51. O Clássico Moderno

52. Paleta de Cores

53. Mais de 16 Milhões!

54. Alpha Channel

55. Concept Art

59. Level Design

62. Verticalidade
Explorando outros conceitos.

64. Dificuldade
na Criação das Fases
E a solução.

68. Áudio

69. Música
http://freemusicarchive.org

70. Efeitos Sonoros
http://thirdcog.eu/apps/cfxr

71. Edição
http://audacity.sourceforge.net

72. Áudio inicial

73. Áudio após edição

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

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

76. Mobile
Por que não?

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

78. Android Browser
Vários problemas

79. Muitos devices
e muitos navegadores

80. Fallbacks
Um mal necessário

81. Retrospectiva

82. Plataformas & Softwares
(Fora o que já foi citado)

83. +

85. Tempo investido

86. 26
SPRINTS

87. 4 horas
por semana
(Mais ou menos)

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

89. Quase 1 ano
desde o início

90. 580
commits

91. Erros
■ Decidir não suportar mobile desde o início
■ Usar levels pra fazer outras telas
■ Detalhes demais no começo
■ Não trabalhar ao mesmo tempo

92. Acertos
■ SCRUM
■ Google Docs
■ Atenção ao detalhes
■ Sem pressa mas com responsabilidade
■ Equipe pequena

93. Perguntas?
http://plaev.me/
Willian Molinari
@PotHix
pothix@plaev.me
http://pothix.com
Rafael Masoni
@rmasoni
rmasoni@plaev.me
http://rafaelmasoni.com