Desenvolvimento de jogos com HTML5 e javascript
-
Upload
willian-molinari -
Category
Technology
-
view
350 -
download
3
description
Transcript of Desenvolvimento de jogos com HTML5 e javascript
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
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
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
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
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! :)