Desenvolvimento de Jogos com HTML5

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

• Facebook

• 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

http://impactjs.com/

http://www.limejs.com

http://www.gameclosure.com/

http://craftyjs.com/

http://melonjs.org/

http://joyjs.org/

http://threejs.org/

http://phonegap.com/

http://html5gameengine.com/

DEMOS >

http://talitapagani.github.io/DamnAliens/

http://phoboslab.org/ztype/

http://www.currantcat.com/convergence/

http://canvasdefense.appspot.com/

http://wordsquared.com/

http://playtankworld.com/level/air_strike

http://html5games.com/

BÔNUS

http://www.html5games.net/

BÔNUS

ONDE APRENDER B

http://www.html5gamedevelopment.com/

http://www.html5canvastutorials.com/

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?