Html5, gamedev e o skeleton jigsaw

221

Published on

Palestra sobre HTML5, programação de jogos e o Skeleton Jigsaw, que é um jogo de plataforma que desenvolvi com o Rafael Masoni.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
221
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html5, gamedev e o skeleton jigsaw

  1. 1. HTML5, gamedev e o Skeleton Jigsaw por Willian Molinari a.k.a. PotHix
  2. 2. Porque!?
  3. 3. Gamejam Itaú cultural
  4. 4. Cadê o Ruby?
  5. 5. Close enough :)
  6. 6. E o Ruby?
  7. 7. WarOS https://github.com/pothix/waros
  8. 8. ■ Ruby 1.9.3 ■ Gosu ■ Rspec ■ SDL (via Gosu)
  9. 9. Motivação
  10. 10. Distribuição
  11. 11. Python? PyGame é bem legal!
  12. 12. JavaScript Really?
  13. 13. RECONQUEST https://github.com/pothix/reconquest
  14. 14. Escrever do zero?
  15. 15. Vantagens ■ Menos código e arquivos menores ■ Conhecer todo o código ■ Micro tuning
  16. 16. Desvantagens ■ Lá vem mais uma engine… ■ Não contribui com nenhuma outra ■ Teria que construir algumas ferramentas
  17. 17. Engines
  18. 18. LimeJS http://limejs.com
  19. 19. Crafty http://craftyjs.com
  20. 20. 秋葉原 Akihabara https://github.com/akihabara/akihabara
  21. 21. Várias outras! https://github.com/bebraw/jswiki/wiki/Game-Engines
  22. 22. Impact http://impactjs.com
  23. 23. Impact Morre $100 nessa brincadeira
  24. 24. Fonte: https://humblebundle.com
  25. 25. Impact por $30!
  26. 26. Eu escolho você, Impact!
  27. 27. Weltmeister (Level Editor)
  28. 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. 29. 1260 linhas de código Javascript no total (segundo sloc)
  30. 30. http://github.com/plaev
  31. 31. O Protótipo
  32. 32. História
  33. 33. Arte e Design
  34. 34. Por que pixel art? (Nessa escala)
  35. 35. RECONQUEST https://github.com/pothix/reconquest
  36. 36. Biolab Disaster http://playbiolab.com
  37. 37.
  38. 38. wat
  39. 39. Ferramentas
  40. 40. O Clássico Moderno
  41. 41. Paleta de Cores
  42. 42. Mais de 16 Milhões!
  43. 43. Alpha Channel
  44. 44. Concept Art
  45. 45. Level Design
  46. 46. Verticalidade Explorando outros conceitos.
  47. 47. Dificuldade na Criação das Fases E a solução.
  48. 48. Áudio
  49. 49. Música http://freemusicarchive.org
  50. 50. Efeitos Sonoros http://thirdcog.eu/apps/cfxr
  51. 51. Edição http://audacity.sourceforge.net
  52. 52. Áudio inicial
  53. 53. Áudio após edição
  54. 54. Antes 2.5MB Depois 1.0MB Compressão *aproximado
  55. 55. 4.0K analytics.js 1.2M game.min.js 4.0K index.html 2.6M media Tamanho total
  56. 56. Mobile Por que não?
  57. 57. Mobile Safari http://youtu.be/aPYeNaR5ps0
  58. 58. Android Browser Vários problemas
  59. 59. Muitos devices e muitos navegadores
  60. 60. Fallbacks Um mal necessário
  61. 61. Retrospectiva
  62. 62. Plataformas & Softwares (Fora o que já foi citado)
  63. 63. +
  64. 64. Tempo investido
  65. 65. 26 SPRINTS
  66. 66. 4 horas por semana (Mais ou menos)
  67. 67. 26 * 4 = 104 horas Duas semanas de trabalho full time
  68. 68. Quase 1 ano desde o início
  69. 69. 580 commits
  70. 70. 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
  71. 71. Acertos ■ SCRUM ■ Google Docs ■ Atenção ao detalhes ■ Sem pressa mas com responsabilidade ■ Equipe pequena
  72. 72. Perguntas? http://plaev.me/ Willian Molinari @PotHix pothix@plaev.me http://pothix.com Rafael Masoni @rmasoni rmasoni@plaev.me http://rafaelmasoni.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×