O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Desafios de fazer
o demo do
skeleton jigsaw
com HTML5
Willian Molinari
a.k.a. PotHix
Slides em: goo.gl/w5Ch9i
Willian Molinari
mais conhecido como PotHix
GuruSP
.org
Histórico
Cadê o Ruby?
Quase lá! ;)
WarOS
https://github.com/pothix/waros
RECONQUEST
https://pothix.github.io/RECONQUEST
https://github.com/pothix/reconquest
Jogando e aprendendo
http://jogandoeaprendendo.com.br
https://github.com/pothix/jogando_e_aprendendo
Desenvolvimento Jogos
casuais com HTML5
http://goo.gl/t5zLEJ
Skeleton Jigsaw
http://plaev.github.io/skel
https://github.com/plaev/skeleton-jigsaw
Jogos no browser
Porque Javascript?
Vantagens
■ Distribuição bem mais fácil
■ Ambiente de desenvolvimento simples
■ Possibilidade de rodar em vários devices
Desvantagens
■ Limitações de cada device
■ Testes em vários navegadores
■ Debug ainda é difícil
Engines
https://html5gameengine.com/
https://github.com/bebraw/jswiki/wiki/Game-Engines
Destaques
■ Akihabara (github.com/akihabara) *
■ Pixijs (pixijs.com)
■ MelonJS (melonjs.org)
■ PandaJS (pandajs.net)
■ Cra...
Map editor
http://impactjs.com/documentation/weltmeister
1 ig.module('game.entities.hud')
2 .requires('impact.entity')
3 .defines(function () {
4 EntityHud = ig.Entity.extend({
5 ...
Áudio
Audio em multiplos formatos
Audio otimizado
Antes 2.5MB
Depois 1.0MB
Compressão
*aproximado
Audio em celulares
Só tristeza
Mobile
Mobile Safari
http://youtu.be/aPYeNaR5ps0
Android Browser
Vários problemas
https://www.netmarketshare.com/browser-market-share.aspx
https://www.netmarketshare.com/browser-market-share.aspx
19% -> 12%
Muitos devices
com muitos browsers
Fallbacks
Um mal necessário
Otimização!
Vai fazer parte da sua vida
Estatísticas
Baseadas no Skeleton Jigsaw
1260 linhas de código Javascript no total (segundo sloc)
4.0K analytics.js
1.2M game.min.js
4.0K index.html
2.6M media
Tamanho total
Tempo investido
26 * 4 = 104 horas
Duas semanas de trabalho full time
Quase 1 ano
desde o início
Considerações
conheça seu jogo e sua tecnologia
Perguntas?
https://goo.gl/w5Ch9i
Willian Molinari
@PotHix
pothix@pothix.com
http://pothix.com
Os desafios de desenvolver o demo do skeleton jigsaw com html5
Os desafios de desenvolver o demo do skeleton jigsaw com html5
Os desafios de desenvolver o demo do skeleton jigsaw com html5
Os desafios de desenvolver o demo do skeleton jigsaw com html5
Próximos SlideShares
Carregando em…5
×

Os desafios de desenvolver o demo do skeleton jigsaw com html5

292 visualizações

Publicada em

Nessa talk vou mostrar como foi desenvolver o Skeleton Jigsaw utilizando Javascript e HTML5. Mostrarei quais foram as ferramentas utilizadas, os problemas que enfrentamos e as otimizações necessárias para funcionar em vários dispositivos diferentes.

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Os desafios de desenvolver o demo do skeleton jigsaw com html5

  1. 1. Desafios de fazer o demo do skeleton jigsaw com HTML5 Willian Molinari a.k.a. PotHix Slides em: goo.gl/w5Ch9i
  2. 2. Willian Molinari mais conhecido como PotHix GuruSP .org
  3. 3. Histórico
  4. 4. Cadê o Ruby?
  5. 5. Quase lá! ;)
  6. 6. WarOS https://github.com/pothix/waros
  7. 7. RECONQUEST https://pothix.github.io/RECONQUEST https://github.com/pothix/reconquest
  8. 8. Jogando e aprendendo http://jogandoeaprendendo.com.br https://github.com/pothix/jogando_e_aprendendo
  9. 9. Desenvolvimento Jogos casuais com HTML5 http://goo.gl/t5zLEJ
  10. 10. Skeleton Jigsaw http://plaev.github.io/skel https://github.com/plaev/skeleton-jigsaw
  11. 11. Jogos no browser
  12. 12. Porque Javascript?
  13. 13. Vantagens ■ Distribuição bem mais fácil ■ Ambiente de desenvolvimento simples ■ Possibilidade de rodar em vários devices
  14. 14. Desvantagens ■ Limitações de cada device ■ Testes em vários navegadores ■ Debug ainda é difícil
  15. 15. Engines https://html5gameengine.com/ https://github.com/bebraw/jswiki/wiki/Game-Engines
  16. 16. Destaques ■ Akihabara (github.com/akihabara) * ■ Pixijs (pixijs.com) ■ MelonJS (melonjs.org) ■ PandaJS (pandajs.net) ■ Crafty (craftyjs.com) ■ Impact (impactjs.com)
  17. 17. Map editor http://impactjs.com/documentation/weltmeister
  18. 18. 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 });
  19. 19. Áudio
  20. 20. Audio em multiplos formatos
  21. 21. Audio otimizado
  22. 22. Antes 2.5MB Depois 1.0MB Compressão *aproximado
  23. 23. Audio em celulares Só tristeza
  24. 24. Mobile
  25. 25. Mobile Safari http://youtu.be/aPYeNaR5ps0
  26. 26. Android Browser Vários problemas
  27. 27. https://www.netmarketshare.com/browser-market-share.aspx
  28. 28. https://www.netmarketshare.com/browser-market-share.aspx 19% -> 12%
  29. 29. Muitos devices com muitos browsers
  30. 30. Fallbacks Um mal necessário
  31. 31. Otimização! Vai fazer parte da sua vida
  32. 32. Estatísticas Baseadas no Skeleton Jigsaw
  33. 33. 1260 linhas de código Javascript no total (segundo sloc)
  34. 34. 4.0K analytics.js 1.2M game.min.js 4.0K index.html 2.6M media Tamanho total
  35. 35. Tempo investido
  36. 36. 26 * 4 = 104 horas Duas semanas de trabalho full time
  37. 37. Quase 1 ano desde o início
  38. 38. Considerações conheça seu jogo e sua tecnologia
  39. 39. Perguntas? https://goo.gl/w5Ch9i Willian Molinari @PotHix pothix@pothix.com http://pothix.com

×