desenvolvimento de jogos com html5
DESCRIPTION
Palestra apresentada na USC durante a 3ª Jornada de InformáticaTRANSCRIPT
DESENVOLVIMENTO DE JOGOS COM
<HTML5 /> Talita Pagani - @talitapagani
SOBRE
Formação
Atuação Profissional
Comunidade
HTML5 E SUA PARAFERNÁLIA*...
* sim, é assim que se escreve. “Parafernalha” é outra coisa.
HTML5
Canvas
Audio & Video
Media Capture
Web Sockets e
Web Storage
Seletores e Validadores
Offline Applications
PORQUÊ? • Ubiquidade: mobile, web, TV, geladeira (?)
• Independência de plataforma
• Acessibilidade
HTML5 + JAVASCRIPT + CSS + SVG + ...?
Jogos em HTML5:
Anatomia de jogos
Lógica
Gráficos
Input
Áudio
Multiplayer
Assets
JS Comportamentos, eventos, lógica, mecânica
SVG Gráficos, cenários
(vetoriais), animações
CSS Transições, controles, formatação e apresentação
HTML5 <canvas>, <audio>, <video>, conteúdo
textual
VIESES Ll
FAMILIARIDADE Você já conhece a tecnologia
COMPLEXIDADE JavaScript é uma linguagem de propósito geral
CROSS-PLATFORM Um único código, múltiplos dispositivos
SUPORTE Diferentes features, diferentes navegadores
(IN)CONSISTÊNCIA Implementações distintas
SOCIAL Possibilidade de integração com APIs e features
de redes sociais
SEGURANÇA Proteção de código
PERFORMANCE Aceleração de hardware, GPU e etc.
O INTERNET EXPLORER (9 E 10) POSSUI UMA BOA ACELERAÇÃO DE HARDWARE?
Você sabia que...
HATERS GONNA HATE ≠
CÓDIGOS E MELHORES PRÁTICAS %
<canvas id=“canvas" width="150" height="150"> Desculpe, seu navegador não suporta canvas. </canvas>
Tudo começa aqui...
<script type="text/javascript"> function gameloop() { var canvas = document.getElementById(canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); } } </script>
PRIMITIVAS
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
PRIMITIVAS + IMAGENS function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
};
img.src = '/files/4531/backdrop.png';
}
MAIS FUNÇÕES...
• save();
• translate(x, y);
• rotate(d);
• scale(x, y);
• restore();
• bezierCurve, quadraticCurve, rect, fillText, strokeText, beginPath/closePath
GRÁFICOS COM SPRITE SHEETS
var sprites = new Image();
sprites.src = “sprites.png”;
ctx.drawImage(
sprites,
sx, sy, início do recorte
sw, sh, tamanho do recorte
dx, dy, coord. de destino
dw, dh tamanho de destino
);
sx = 25 sy = 50
sw = 25 sh = 25
”
“ 1 Game != 1 Canvas
http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games
#ficadica
USING MULTIPLE HTML5 CANVASES AS LAYERS http://html5.litten.com/layers/canvaslayers.html
http://html5.litten.com/using-multiple-html5-canvases-as-layers/
Canvas
DOM
CAMADAS DRAW REGIONS MELHOR MANIPULAÇÃO DE ELEMENTOS DO JOGO
Múltiplos canvas permitem
DESENVOLVER UM JOGO
Tudo isso pra
em HTML5???
CALMA Tá tudo bem agora
DEMOS >
ONDE APRENDER B
https://developer.mozilla.org/pt-BR/demos/?menu
http://www.html5rocks.com/en/tutorials/canvas/notearsgame/?redirect_from_locale=pt
CONCLUSÕES !
USAR OU NÃO USAR HTML5 PARA JOGOS?
• JS: linguagem robusta
• Frameworks para auxiliar no desenvolvimento
• Independente de plataforma, dependente de suporte do navegador
• Manutenção e disponibilidade em diferentes dispositivos
CADA COISA EM SEU LUGAR
• JS para lógica / mecânica
• Controles, inputs, textos, transições: CSS
• SVG: pode ser usado para algumas animações e cenários vetoriais
• Você precisa mesmo desenhar tudo no canvas?
ARQUITETURAS HÍBRIDAS DE JOGOS 7
come to the dark Web side
REFERÊNCIAS
• Gil Megidish. Game Development With HTML5. http://www.slideshare.net/gawd/game-development-with-html5
• LimeJS. Is HTML5 the future of (mobile) gaming? http://www.limejs.com/2011/03/18/is-html5-the-future-of-mobile-gaming
• Facebook Developers. Making a Speedy HTML5 Game. https://developers.facebook.com/blog/post/2012/04/17/making-a-speedy-html5-game/
• Ernesto Jiménez. 5 tips for your HTML5 games. http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games
• MDN. Canvas Tutorial. https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial
FRAMEWORKS • http://www.limejs.com/
• http://impactjs.com/
• http://www.gameclosure.com/
• http://craftyjs.com/
• http://www.melonjs.org/
• http://phonegap.com/
• http://joyjs.org/
IMAGENS
• http://rawkes.com/articles/mashing-up-the-html5-logo
• http://crieseumeme.com/media/created/o5lmld.jpg
• http://fc03.deviantart.net/fs70/i/2010/005/2/0/Sonic_Sprite_Sheet_WIP_by_Derek_the_Hedgehog87.png
• http://fc02.deviantart.net/fs71/i/2011/086/9/b/darth_vader_by_sila92-d3cmlgq.png
• https://www.dropbox.com/sh/m5efumhdr4quhqv/zXDKgTnrOg#/
Obrigada! twitter.com/talitapagani | facebook.com/talitapagani | github.com/talitapagani
Perguntas?