Criando aplicativos para Windows 8 usando apenas HTML5 e Javascript
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
89
Desenvolvimento de jogos, Willian Molinari (a.k.a PotHix) Javascript e HTML5
-
Upload
willian-molinari -
Category
Technology
-
view
6.865 -
download
7
description
Desenvolvimento de jogos utilizando HTML5 e Javascript
Transcript of TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
Desenvolvimento de jogos,
Willian Molinari (a.k.a PotHix)
Javascript e HTML5
Grupo de usuários Ruby de São Paulo
Equipe de Cloud Computing
LinguagensVárias! :)
Frameworks e LibsVarios! \o/
Akihabara
Sou só um cara normal
Meu primeiro gameGame contest Itaú cultural
Criado por: @PotHix / @CrociDB
C++Allegro
Linux / Windows
Vencemos!
Mas depois...
Código difícil
Difícil distribuição
Difícil portabilidade
Malloc()
Claro que não!
HTML5*Canvas WebGL
WebSockets Offline cache
Audio
Local Storage
SVGfileSystem
Canvas<canvas width="100" height="100" id="game"></canvas>
var ctx = document.getElementById("game").getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
Canvas
Rect
arc()
Canvas
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
Linhas e curvas
Canvas
quadraticCurveTo(), belzierCurveTo(), lineTo(), moveTo()
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
Desenho a mão livre
Imagens
Canvas
drawImage(img,cropx,cropy,croptx,cropty,scalex,scaley,cordx,cordy)
image = new Image();image.src = "source/da/imagem.jpg";
// Sempre esperar a imagem carregar antes de colocar no canvasimage.onload = function(){ /* o código do canvas aqui */}
// Apenas a image e sua posiçãocanvas.drawImage(image, x, y);
// A imagem, suas posições e seu tamanhocanvas.drawImage(image, x, y, width, height);
/* A imagen, onde deve ser cortada, qual vai ser o tamanho do corte, o tamanho da imagem e onde ela deve ser colocada */canvas.drawImage(image, cropx, cropy, crop_tam_x, crop_tam_y, scalex, scaley, coordx, coordy);
Canvas
Exemplo de drawImage
SVGScalable Vector Graphics
Porque não é usado?Falta de editores, suporte e outras coisas
SVG
WebGLOpenGL rodando no browser
WebGL
Quake II GWT: http://code.google.com/p/quake2-gwt-port/
WebSonic: http://forums.sonicretro.org/index.php?showtopic=24965 WebGL Rage: http://code.google.com/p/webgl-ios-rage/
Acesso direto a GPU
WebGL
Drivers
WebGL
Segurança
WebGL
WebGL
http://people.opera.com/~emoller/stagedemohttp://people.opera.com/~emoller/demo2
Offline cache
Cache Manifest
Offline cache
<html manifest="/cache.manifest">
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
Offline cache
Exemplo.manifest
WebSockets
var connection = new WebSocket('ws://pothix.com/websocket');
connection.onopen = function () { connection.send('funciona!'); // Envia a mensagem para o servidor};
connection.onerror = function (error) { // Código para tratar erro de conexão};
connection.onmessage = function (e) { // Código para tratar o que fazer em cada mensagem};
connection.onclose = function (e) { // Código para tratar quando a conexão é encerrada};
WebSockets
Exemplo WebSocket
WebSockets
Tag Audio<audio><source src="test.mp3" type="audio/mpeg" /></audio>
Latencia
Audio
Velocidade de resposta não é boa em todos os casos.
Audio
Workaround?
Compatibilidade
Audio
Mobile ainda é um problema.
Local StorageChega de guardar informações em cookies
// 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 com outra Syntax. Tudo é armazenado como string.localStorage["myGame.stage"]# => "1"
localStorage
Exemplo localStorage
fileSystemQuase nenhum suporte ainda, mas vai ser muito útil!
Game frameworksPelo menos algumas delas.
http://impactjs.com
http://playbiolab.com/http://www.phoboslab.org/ztype/
Partículas
ImpactJS
Suporte
ImpactJS
Map editor
ImpactJS
Física basicaE exemplos de integração com a lib Box2D
ImpactJS
Documentação
ImpactJS
Bons exemplos
ImpactJS
Script para versão .min
ImpactJS
Paga :(US$ 99
ImpactJS
AkihabaraCriado por Francesco Cottone (KesieV Norimaki)
Akihabara
Vários demoshttps://github.com/akihabara
Akihabara
Capman
Leave me alone
Solitude TSpin
TloS
Open Source \o/https://github.com/akihabara/akihabara
Akihabara
Map editor
Akihabara
AkibaKa: Ainda em versão alpha
Documentação?
Akihabara
Precisa de várias melhorias, mas aceitamos ajuda! :)
Assets separados
Akihabara
gbox.addBundle({file: "bundle.js"})
{ addImage:[ ["enemy","resources/enemy01.png"] ], addTiles:[ {id:"enemy", image:"e1", tilew:16, tileh:32, tilerow:6, gapx:0, gapy:0} ], addFont:[ {id:"small", image:"font", tileh:8, tilew:8, tilerow:255, gapx:0, gapy:8} ]}
Akihabara
Arquivos organizados
Keymap page
Akihabara
Sim, no estilo daqueles emuladores :)
Modularizado
Akihabara
gbox.jsO núcleo da engine. Criação de objetos, blit, audio e etc.
Akihabara
Akihabara
O namespace principal// Objetos e gruposgbox.setGroups(["game_group","enemy"]);gbox.addObject({id:"e1", group:"enemy", x: 0, y: 0});
// Blit de objetosgbox.blitTile({tileset: this.tileset, ...});
// Assetsgbox.addBundle({file:"game-bundle.js"});
// Audiogbox.playAudio("title_screen");gbox.stopAudio("title_screen");
.
.
.
gamecycle.jsEstados e funcionalidades basicas dos jogos.
Akihabara
game = gamecycle.createMaingame("game_id", "game_group");
// Algumas funções para controlar alguns estados básicosgame.gameTitleIntroAnimationgame.pressStartIntroAnimationgame.gameIntroAnimationgame.gameMenu
// Controle de alguns objetos comunsgame.hud
.
.
.
Akihabara
Game basics
help.jsExtenções no Javascript e helpers para o game
Akihabara
help.akihabaraInit({ title:"Zero Wing", splash:{ // Algumas notas no footnote footnotes:["All this presentation are belong to us"],
// Utilizando um background customizado no splash background:["resources/my_awesome_image.jpg"] }, // Vamos utilizar offline cache offlinecache: true});
Akihabara
Helper de Inicialização
toys.jsHelpers para vários estilos de games
Akihabara
Akihabara
Snippets para jogos// Topviewtoys.topview.fireBullet("bullets_group", "bullet1", {power:1})
// Shoot'em uptoys.shmup.keepInBounds(this);toys.shmup.fireBullet("bullets_group", "bullet1", {power:1})toys.shmup.generateScroller("game_group", "game1", {power:1})
// Plataformertoys.platformer.jumpKeys(this, "a");
// UItoys.ui.hud("maingame_hud");
.
.
.
RECONQUESTGlobal Game Jam 2011
Plaev Team@PotHix @_bojak
@CrociDB@rmasoni
RECONQUESTGalaxy Tab e Motorola Milestone
RECONQUESTiPad e iPhone
Open source também!https://github.com/plaev/reconquest
Google Web ToolkitFeito em Java, mas exporta HTML5 e várias outras coisas!
Angry BirdsFeito com GWT e incluído na chrome web store
GWT
Outras enginesBox2D Aves
Canvex
ClanFX
bdgeCocos2D
Crafty
Effect games
GameQuery
Hydra
Hydrax
Isogenic Engine
Mibbu
https://gist.github.com/768272
Site interessante com jogos feitos com HTML5
Algumas conclusõesBoa! Agora já posso criar meu Gears of War com HTML5!!!!!11!!
![HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?](https://static.fdocumentos.tips/doc/165x107/5f9769938559bc0a406dee44/html5-w3c-html4-css-56-html5-futuro-da-web-futuro-da-web-html5-html.jpg)
