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)
■ Crafty (craftyjs.com)
■ Impact (impactjs.com)
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 _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 });
Á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