Game Development Reference
In-Depth Information
Open the
webgl-utils.js
file from the
js
folder in your editor. The function that
we have used the most in our code is listed in the following code:
window.requestAnimFrame = (function() {
returnwindow.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement
Element */ element) {
window.setTimeout(callback, 1000/300);
};
})();
The preceding code heavily relies on the
requestAnimationFrame
function. Let's read
the definition of the function from the following link:
http://msdn.microsoft.com/
en-us/library/windows/apps/hh453391.aspx
. It states the following:
The
RequestAnimationFrame
method registers a function to call when the
system is ready to update (repaint) the display. This provides smoother animations
and optimal power efficiency by allowing the system to determine when the
animation occurs. The visibility of the web application and the display refresh rate
are used to determine the appropriate speed of the animations for example, the
number of frames per second supported by the system.
In a nutshell, the speed at which it will fire will vary from system to system. Now,
let's look at how we implemented it:
function initScene(){
...
tick();
}
function tick(){
requestAnimFrame(tick);
drawScene();
}
We invoke
tick
when the page loads, and
tick
invokes
drawScene
and invokes itself
when the system is ready to update. Now, let's understand from the viewpoint of a
multiplayer game where two users are in the same scene. You fire a bullet and you
expect to hit because your system is fast but the other guy has not even reached the
hit point (visually) as his system is slow; the scene is being drawn at a constant frame
rate which varies from system to system. Even in a single user game, the timing of two
events is very important. We want more of a time-based animation not frame-based,
which means that if your system is slow, you should reach the hit point by
dropping frames.
