HTML5 for Particles



By Pierre-Loïc Doulcet (@hexapode)
DISCLAIMER


Cedric just did an awesome presentation about Particles

so

I will NOT talk about Particles (or not so much)

HTML5 for 2D Particles Games



By Pierre-Loïc Doulcet (@hexapode)
You can now SELL HTML5 Games

There is Zillion of stores



But most HTML5 games (including mine) SUCKS



How to become an HTML5 GAME DEVELOPER?

(in 10 minutes)

GAMEPLAY loop
  1. Check user INPUT
  2. ANIMATE your game
  3. RENDER your game
  4. GOTO 1
GAMEPLAY loop

function run()
{
    input();
     animate();
     render();
     requestAnimFrame(run);
}

requestAnimFrame (not my code)

requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
window.setTimeout(callback, 1000/60);
}; })();

Check INPUT

Game are Synchronous
Javascript is Asynchronous
KEYBOARD example

<body
onkeydown='keyIsDown(event)'
onkeyup='keyIsUp(event)'>


KEYBOARD example

var keyBoard =
{
     left : 0,
     right :0,
     fire : 0
}


KEYBOARD example

function keyIsDown(event)
{
     if(event.keyCode == 65)
     {
         keyBoard.left = 1;
     }
     if(event.keyCode == 68)
     {
         keyBoard.right = 1;
     }
     if(event.keyCode == 32)
     {
         keyBoard.fire = 1;
     }
}


KEYBOARD example

function input()
{
     if (keyBoard.left)
     {
          if (SHIP.X > 15)
          {
               SHIP.X -= 10;
          }
     }
     (...)
}


ANIMATE your game

ANIMATE your game
  1. Animate Sprites
  2. Animate Particles
  3. Animate ???
SPRITES

Browser support up to 2000 Canvas 2d sprites.
Demo
Animate SPRITES

{
     X : 10,
     Y : 10,
     XB : 1,
     YB : 1,
     KEY : 3,
}

Animate SPRITES

function animateBob(bob)
{
     bob.KEY--;
     if (bob.KEY == 0)
     {
          bob.KEY = 5;
          bob.XB = (bob.XB + 1) % 3;
     }
     if (keyBoard.left)
     {
          bob.X++;
          bob.YB = 1;
     }
     (...)
}

Render SPRITES

function renderBob(bob)
{
    ctx.drawImage(
        bobImage,
        bob.XB * 48,
         bob.YB * 64,
         48,
         64,
         bob.X,
         bob.Y,
         48,
        64
    );
}

PARTICLES


Browser support up to
5000
Draw operation by frame.
Demo
PARTICLES Tips #1


Use globalAlpha to draw less particles.

ctx.globalAlpha = 0.5;
PARTICLES Tips #2


If you need to draw a crazy amount of particles (~20k) use :

var imageData = ctx.getImageData();

And then get imageData data properties

var data = imageData.data;

You then get a RGBA image buffer.
MIX all an do a game


It's easy, REALLY
Demo
HTML5 2D Game / Demo are Easy

Come to HTML5 Game Jam
(http://j.mp/HTML5GameJam2012)
10-12 February, Free 48 hours hackathon

We also seek sponsors / help for organisation

Questions ?