HTML Tour - Programación de Videojuegos HTML5

Programación de videojuegos HTML5

¿Quién soy?
Jesús David García Gómez
UX Developer at Plain Concepts
dgarcia@plainconcepts.com
#htmltour

Proyectos destacados:

www.plainconcepts.com

¿Quién soy?
Fernando Oteros Pastrana
Desarrollador PHP
Desarrollador HTML5 / Javascript
Desarrollador Flash AS3

Proyectos destacados:

Twitter: @sh4wner
Project Prometheus The Hunger Games
foteros@plainconcepts.com

www.plainconcepts.com

Preguntas / Dudas / Sugerencias

#htmltour
http://sh4wn.net/htmltour/demos_html5.zip

SVG

• SVG son las siglas de Scalable Vector Graphics

• Es un lenguaje para describir gráficos en 2D en XML.

• Con HTML5, podemos agregar un SVG al DOM

• Acceso a sus elementos.

SVG - Sintaxis

<svg xmlns="http://www.w3.org/2000/svg" height="200px">
…
</svg>

SVG - Componentes

• Circle:
<circle cx="100" cy="100" r="40" fill="red" />

• Rect:
<rect x="50" y="140" width="100" height="20" fill="green" />

• Line:
<line x1="40" y1="40" x2="40" y2="170" style="stroke: red; stroke-width: 2" />

SVG – Más Componentes
• Ellipse
<ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#gradient)" />

• Polygon
<polygon points="50,140 150,140, 100,170" fill="blue" />

• Polyline
<polyline points="0,0 0,190 200,190 200,0 0,0" fill="transparent" style="stroke:
red; stroke-width: 3" />

Canvas

• El elemento <canvas> se utiliza para pintar gráficos.

• Es un contenedor, debemos usar scripts para pintar los gráficos en el.

• Podemos tener más de un <canvas> en nuestra web

Canvas – Modo de pintado

• Canvas utiliza “modo inmediato”

• SVG, Flash y Silverlight utilizan “modo retenido”

Canvas - Contexto

var canvas = document.getElementById("miCanvas");

var context = canvas.getContext("2d");

Canvas – Comprobar compatibilidad

function IsCanvasCompatible() {
var canvas = document.getElementById("miCanvas");
if (!canvas || !canvas.getContext)
return false;
else
return true;
}

Canvas – Elementos básicos
• Texto
context.fillText(today, 150, 10);
context.strokeText(today, 150, 10);

• Rectángulos
context.fillRect(0, 0, 150, 75);
context.strokeRect(0, 0, 150, 75);
context.clearRect(0, 0, 150, 75);

Canvas – Más elementos básicos

• Imágenes

context.drawImage(newImage, 200, 100);

• Paths
context.beginPath();
context.closePath();

Canvas - Path
• Lineas
context.moveTo(10, 10);
context.lineTo(20, 20);
context.stroke();

• Arcos
context.arc(100, 100, 50, 0, Math.PI);
context.fill();

Canvas - Formato
context.textAlign = "center";
context.measureText("texto").width;
context.font = "60px Arial";
context.fillStyle = "red";
context.strokeStyle = "red";
context.shadowBlur = 10;
context.shadowColor = "black";

Canvas – Más formatos

context.lineWidth = lineWidth * 2;
context.lineJoin = "round";
var gradient = context.createLinearGradient(x, y, dx, dy);
gradient.addColorStop(0, primaryColor);
gradient.addColorStop(1, secondaryColor);

Introducción
• <CANVAS></CANVAS>
• <SVG></SVG>
• <AUDIO></AUDIO>
• <VIDEO></VIDEO>
• Transiciones CSS
• LocalStorage
• WebSockets

Volviendo al Old School
• Limitaciones de los actuales navegadores

• Viejas técnicas y recursos cómo:
• Sprites para animaciones
• Repetición de fondos.

Estructura básica de los juegos html5
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Demo 01</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="demo01.js"></script>
</head>
<body onload="game.init()">
<canvas id="canvas" class="gameLayer" width=“700" height=“500"></canvas>
</body>
</html>

Elemento CANVAS Hoja de estilo JS

Game.js
var game = (function () {
var canvas,
canvasCtx;
//Initialize: Crea los objetos que vamos a usar en el juego.
function initialize() {
//Crear objetos
}
//Loop: Se ejecuta en cada ciclo actualizando objetos y pintando el canvas .
function loop() {
update();
draw();
}
//Update: Actualiza cada uno de los objetos de nuestro juego, su posición, disparos, etc…
function update() {
player.update();
}
//Draw: Pinta en el canvas nuestros objetos
function draw() {
ctx.drawImage(buffer, 0, 0);
}
return {
init: initialize
}
})();
.

GameLoop: setTimeOut vs RequestAnimationFrame

GameLoop o bucle principal
Llama a la función Update y Draw.

Antes: setTimeOut(function,time);

Con html5: requestAnimationFrame (function);
Hasta que no termina de realizar todas las operaciones no vuelve a ser
llamado, optimizando de esta manera la experiencia de usuario.

Uso de requestAnimationFrame
this.loop = function () {
this.update();
this.draw();
gameInterval = window.requestAnimationFrame(loop);
}
this.update = function () {
player.update();
}

gameInterval = window.requestAnimationFrame(loop);

Una vez inicializado el requestAnimationFrame, lo volvemos a
llamar desde el metodo update cuando finaliza cada ciclo.

Snippet incluído en la demo.

Pintando nuestro juego
Función “Draw” llamada desde el bucle principal.

this.draw = function () {
this.canvasCtx.clearRect(0, 0,
this.canvas.width, this.canvas.height);
this.canvasCtx.beginPath();
this.canvasCtx.rect(this.rectangulo.x,
this.rectangulo.y, this.rectangulo.w, this.rectangulo.h);
this.canvasCtx.fillStyle = "#000";
this.canvasCtx.closePath();
this.canvasCtx.fill();
}

Canvas buffer
Canvas oculto.
Lo copiamos al Canvas visible.

Evita la sensación de flickering (parpadeo).

this.bufferCtx.clearRect(0, 0, this.buffer.width, this.buffer.height);
this.bufferCtx.beginPath();
this.bufferCtx.rect(this.rectangulo.x, this.rectangulo.y,
this.rectangulo.w, this.rectangulo.h); this.bufferCtx.fillStyle = "#000";
this.bufferCtx.closePath();
this.bufferCtx.fill();
this.canvasCtx.clearRect(0, 0, this.buffer.width, this.buffer.height);
this.canvasCtx.drawImage(this.buffer, 0, 0);

Events && keyHandlers
window.addEventListener('keydown', doKeyDown, true);
function doKeyDown(evt) {
switch (evt.keyCode) {
case 38: /* Up arrow was pressed */
//acciones de salto;
player.salta();
break;
case 40: /* Down arrow was pressed */
//agacharse;
player.agacha();
break;
case 37: /* Left arrow was pressed */
//caminar;
player.move(1);
break;
case 39: /* Right arrow was pressed */
//caminar;
player.move(2);
break;
}
}

Animando Sprites
http://www.w3schools.com/html5/canvas_drawimage.asp

game.bufferCanvasCtx.drawImage( Función drawImage.
spriteObject, Permite desplazarnos a un punto de una imagen, y
posicionXdelPuntero, seleccionar una región a mostrar.
posicionYdelPuntero,
anchoSprite,
altoSprite,
posicionXenCanvas,
positionYenCanvas,
anchoEnCanvas,
altoEnCanvas);
}

Sonidos

var audio = document.createElement("audio"); //también sirve new Audio();
audio.oncanplaythrought=function(){
//sonidoCargado.
audio.play();
}
audio.src = “sound.mp3”;

Video en HTML5
<video loop controls id="thevideo" width="320" height="240" preload="auto">
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.webm"type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>

Video con canal Alpha
function processFrame() {
buffer.drawImage(video, 0, 0);
var image = buffer.getImageData(0, 0, width, height),
imageData = image.data,
alphaData = buffer.getImageData(0, height, width, height).data;
for (var i = 3, len = imageData.length; i < len; i = i + 4) {
imageData[i] = alphaData[i - 1];
}
output.putImageData(image, 0, 0, 0, 0, width, height);
}

http://jakearchibald.com/scratch/alphavid/
ImageData Structure:

Librerías 3D

WebGL:
three.js http://mrdoob.github.com/three.js/

Otras:
WaveJS http://www.plainconcepts.com/wavejs

PROJECT PROMETHEUS

http://www.projectprometheus.com/trainingcenter/

HTML Tour - Programación de Videojuegos HTML5

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a HTML Tour - Programación de Videojuegos HTML5

Similar a HTML Tour - Programación de Videojuegos HTML5 (20)

Más de Plain Concepts

Más de Plain Concepts (20)

Último

Último (20)

HTML Tour - Programación de Videojuegos HTML5