HTML5 pour les jeux

Post mortem de 300 prods

HTML5 pour les jeux

Post mortem de 300 284 prods

Etat de l'art

W3C Game comunity group

Objectif (entre autre): Receuillir les avis des developpeurs de jeux et faire des propositions concernant les standarts ouverts.

PointerLock (W3C Editor Draft)

Ajout des methodes requestPointerLock et exitPointerLock

document.requestPointerLock();
// La sourie est lockee
document.exitPointerLock();
		

Ajouts au Mouse Event de movementX / movementY :

function onclick(event)
{
	event.movementX;
	event.movementY;
}

Joystick API (W3C Editor Draft)

Ajout de l'interface Gamepad a navigator

var gamepad = navigator.gamepads[0];
var id = gamepad.id;
var lastDataAccess = gamepad.timestamp; // Date des dernieres donnees
var axe0 = gamepad.axes[0]; // Contient une valeur de -1.0 a 1.0
var button0 = gamepad.buttons[0]; // Contient une valeur de 0 a 1.0
		

Ajouts des evenements gamepadconnected et gamepaddisconnected

document.addEventListener('gamepadconnected ', function(){alert('Le Gamepad est in')});
document.addEventListener('gamepaddisconnected ', function(){alert('Le Gamepad est out')});

Webworkers : Transferable objects (W3C Editor Draft optional)

Permet de transferer des ArrayBuffer vers et entre les Workers.
Demo

Vector/Matrix in Javascript (early early draft, Q3 2012?)

Ajout d'un type Matrix4x4 a Javascript

	// Note : se construit en passant une Matrix CSS :D
var m = new Matrix4x4('matrix3d(0.7109, 0, -0.703279, 0, 0, 1, 0, 0, 0.703279, 0, 0.7109, 0, 0, 0, 0, 1);');

m.invert(); 						// inverse la matrix
m.translate(x, y, z); 				// translate la matrix
m.scale(scaleX, scaleY, scaleZ);	// scale la matrix
m.rotate(rotX, rotY, rotZ);			// rotate la matrix

Web audio API (W3C Editor's Draft)

:-D

284 prods en 2 ans

284 prods en 2 ans

• Personelles : 37 (26 Desktop, 11 Mobile)
• Etudiants : 247 (47 en Jam, 70 em Exam, 130 autres)

Techniques Secretes

Global Alpha

Click Me !

function run()
{
	ctx.fillStyle = '#000';
	ctx.globalAlpha = 0.1;
	ctx.fillRect(0,0,800,200);
	ctx.globalAlpha = 1.0;
	ctx.fillStyle = '#fff';
	var i = 0;
	while (i++ < 10)
	{
		ctx.fillRect(
			(Math.random() * 80 | 0) * 10+ 1,
			(Math.random() * 20 | 0) * 10+ 1,
			8, 8);
	}
	setTimeout(run, 16);
}
				

Canvas Offscreen

function renderToCanvas(width, height, renderFunction)
{
    var buffer = document.createElement('canvas');
    buffer.width = width;
    buffer.height = height;
    renderFunction(buffer.getContext('2d'));
    return buffer;
};
var img = renderToCanvas(width, height, function(ctx){
	var i = 0;
	while (i < 10000)
	{
		ctx.fillRect(
		 Math.random() * 1000 | 0,
		 Math.random() * 1000,
		 1,1);
		++i;
	}
});
// on rend l'image chargee en offscreen
context.drawImage(img, 0, 0);

				

Utiliser Image Data pour les particles si no WebGl

Click Me !

image = ctx.getImageData(0, 0, 800, 600);

var imageData = image.data;

var j = 0;

while (j < 20000)
{
 var i = Math.random() * 800 * 200 | 0;
 imageData[i * 4+0] = 255; // Red value
 imageData[i * 4+1] = 255; // Green value
 imageData[i * 4+2] = 255; // Blue value
 imageData[i * 4+3] = 255; // Alpha value

 image.data = imageData;
 ++j;
}
ctx.putImageData(image, 0, 0);
				

MORE ?

By the way I'm soon unemployed...

Questions?

@hexapode

pierre@doulcet.fr

retrouvez ces slides sur : doulcet.fr/parisjs