Os desafios de desenvolver o demo do skeleton jigsaw com html5

Desafios de fazer o demo do

skeleton jigsaw com HTML5

Willian Molinaria.k.a. PotHix

Slides em: goo.gl/w5Ch9i

Willian Molinarimais conhecido como PotHix

GuruSP.org

Histórico

Cadê o Ruby?

Quase lá! ;)

WarOS

https://github.com/pothix/waros

RECONQUESThttps://pothix.github.io/RECONQUESThttps://github.com/pothix/reconquest

Jogando e aprendendohttp://jogandoeaprendendo.com.br

https://github.com/pothix/jogando_e_aprendendo

Desenvolvimento Jogos casuais com HTML5

http://goo.gl/t5zLEJ

Skeleton Jigsawhttp://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

Engineshttps://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 editorhttp://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 celularesSó tristeza

Mobile

Mobile Safarihttp://youtu.be/aPYeNaR5ps0

Android BrowserVários problemas

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

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

19% -> 12%

Muitos devicescom muitos browsers

FallbacksUm mal necessário

Otimização!Vai fazer parte da sua vida

EstatísticasBaseadas no Skeleton Jigsaw

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

4.0K analytics.js1.2M game.min.js4.0K index.html2.6M media

Tamanho total

Tempo investido

26 * 4 = 104 horasDuas semanas de trabalho full time

Quase 1 anodesde o início

Consideraçõesconheça seu jogo e sua tecnologia

Perguntas?

https://goo.gl/w5Ch9i

Willian Molinari

@PotHix

[email protected]://pothix.com