Desenvolvimento de jogos com

Javascript e HTML5por

Willian Molinaria.k.a. PotHix

Slides em: goo.gl/wfaZ3n

Delivery Engineering

?

≠

?

Linguagens

¯\_(“.)_/¯

Histórico

by @pothix e @crocidb

Robotz Warehousehttps://github.com/PotHix/RobotzWarehouse

Quase lá! ;)

WarOShttps://github.com/pothix/waros

@pothix, @rmasoni, @_bojak, @crocidb

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

Jogando e Aprendendohttp://jogandoeaprendendo.com.br

https://github.com/pothix/jogando_e_aprendendo

Skeleton Jigsawhttp://plaev.github.io/skel

https://github.com/plaev/skeleton-jigsaw

@pothix e @rmasoni

Desenv. de Jogos casuais com HTML5

http://goo.gl/t5zLEJ

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 e suporte de cada device

■ Testes em vários navegadores

■ Debug ainda é difícil

HTML5*

Canvas

WebGL

WebSockets

Offline cache

Audio

gamepad api

localStorage

Canvas

ctx.beginPath();

// Circulo maiorctx.arc(75,75,50,0,Math.PI*2,true); ctx.moveTo(110,75);

// Bocactx.arc(75,75,35,0,Math.PI,false);ctx.moveTo(65,65);

// Olho direitoctx.arc(60,65,5,0,Math.PI*2,true);ctx.moveTo(95,65);

// Olho esquerdoctx.arc(90,65,5,0,Math.PI*2,true);ctx.stroke();

canvas.drawImage()

drawImage( img, // image 0, // onde no x começar cortar 0, // onde no y começar cortar 0, // tamanho para corte do x 0, // tamanho para corte do y 0, // onde no x colocar no canvas 0, // onde no y colocar no canvas 14, // largura 20, // altura

)

drawImage( img, // image 0, // onde no x começar cortar 0, // onde no y começar cortar 0, // tamanho para corte do x 0, // tamanho para corte do y 0, // onde no x colocar no canvas 0, // onde no y colocar no canvas 14, // largura 20, // altura

)

0,0

0,20

drawImage(img, 0, 20, 15, 20, 0, 0, 15, 20)

drawImage(img, 15, 20, 15, 20, 0, 0, 15, 20)

drawImage(img, 30, 20, 15, 20, 0, 0, 15, 20)

Áudio

// pegando o elemento audiovar audio = document.getElementById('audiotagid')

// tocaraudio.play()

// pausaraudio.pause()

// aumentar / diminuir o volumeaudio.volume+=0.1audio.volume-=0.1

// vários outros...

Áudio

Latencia

Mobile

Web Audio API

Tempos exatos

Fonte: html5 rocks

Fonte: caniuse.com

WebGL

Quake

iOS Rage

http://blog.tojicode.com/

http://middle-earth.thehobbit.com/

The hobbit Experiment

Emscripten

Banana Breadhttps://developer.mozilla.org/en/demos/detail/bananabread

Websockets

// criando a conexãovar url = “ws://pothix.com/websocket”var connection = new WebSocket(url);

// funções para executar assim que acontecer// o dado estadoconnection.onopen = function () {}; connection.onerror = function (error) {};connection.onmessage = function (e) {};connection.onclose = function (e) {};

Websockets

Swarmationhttp://swarmation.com

Offline Cache

CACHE MANIFEST# revision 1

NETWORK:http://www.google-analytics.com

FALLBACK:resources/audio resources/audio/silence.mp3

CACHE:src/maingame_packaged.jsresources/audio/silence.mp3resources/sprites.png

cache.manifest

localStorage

// Criando um novo item no localStoragelocalStorage.setItem("myGame","The amazing HTML5 programmer")

// Retornando um item do localStoragelocalStorage.getItem("myGame")# => "The amazing HTML5 programmer"

// Criando com outra SyntaxlocalStorage["myGame.stage"] = 1

// Retornando. Tudo é armazenado como string.localStorage["myGame.stage"]# => "1"

localStorage

Gamepad API

Vários controleshttp://www.html5rocks.com/en/tutorials/doodles/gamepad

https://hacks.mozilla.org/2013/12/the-gamepad-api/

id: "PLAYSTATION(R)3 Controller (STANDARD GAMEPAD Vend …) "index: 1timestamp: 18395424738498buttons: Array[8] 0: 0 1: 0, … 6: 0.03291, 7: 0axes: Array[4] 0: -0.01176 1: 0.01961 2: -0.00392 3: -0.01176

Gamepad API

Engines

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

https://github.com/bebraw/jswiki/wiki/Game-engine-feature-matrix

Destaques■ MelonJS (melonjs.org)

■ LimeJS (limejs.com)

■ Akihabara (github.com/akihabara)

■ PandaJS (pandajs.net) new!

■ Crafty (craftyjs.com)

■ Impact (impactjs.com)

EnginesAkihabara

Akihabara

ImpactJS

Desenho e fases

Map editorhttp://impactjs.com/documentation/weltmeister

Entity system

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 inicial em multiplos formatos

Otimização!Vai fazer parte da sua vida

Audio otimizado

Antes 2.5MB

Depois 1.0MB

Compressão

*aproximado

Mobile

Mobile Safarihttp://youtu.be/aPYeNaR5ps0

Android BrowserVários problemas

Muitos devicescom muitos browsers

FallbacksUm mal necessário

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 investidodemo de 4 fases com intro, final e créditos

26 * 4 = 104 horasDuas semanas de trabalho full time

Quase 1 anodesde o início

ConclusãoÉ difícil mas vale a pena! :)

Perguntas?

http://goo.gl/wfaZ3n

Willian Molinari

@PotHix

pothix@pothix.comhttp://pothix.com