Mekawar

Statistics

State of the art ?
- lot of units and tower
- only ajax, saturated network ?
- get on all platforms

Units and towers

At the same time :
- > 500 towers
- > 300 units

Saturated network ?

No real-time server side, juste apache server running PHP, and some AJAX query client-side

It's not Mekawar stats ._.

Get on all platforms

Works on all Browser running HTML5


Do an user interface/gesture for each platforms

Increase performance

Some tips to increase performances in your
heavy apps/games

• requestAnimationFrame
• Canvas buffering
• Img loader
• Multi canvas usage
• globalAlpha property
• Timestamp

requestAnimationFrame

When you use setInterval or setTimeout functions for animations

STOP IT NOW

The good way

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

function animationLoop()
{
  // call firstly the next frame
  requestAnimationFrame(animationLoop);
  
  // some function to animate some things
  animate();
  move();
  update();
}
						

Canvas buffering

Draw one time in a canvas and save the canvas as an image

function buffer()
{
  var cvs = document.createElement('canvas');
  var ctx = cvs.getContext('2d');

  mySuperFunctionToDrawSomething(ctx);

  return cvs;
}

var myImage = buffer();

// then you can draw myImage like an other classic image
						

Img loader

Load an image before use it

var myPicture = new Image();
  myPicture.src = "img/picture.png";
  myPicture.onload = function()
  {
    // image is now ready
  };
						

Multi canvas usage

Don't limit your apps to one canvas only

globalAlpha property

Example

ctx.globalAlpha = 0.5;

drawParticles();

ctx.globalAlpha = 1;
						

Timestamp

Create and check timestamps for your objects if you wan't the same animation everywhere !
Example without

var myObject = { "lastMove":Date.now(), "eachMove":80, "update":function(){}};
function loop()
{
  var time = Date.now();
  if (time - myObject.lastMove > myObject.eachMove)
  {
	myObject.lastMove = time;
	myObject.update();
  }
}
						

Now with