HTML and CSS Reference
In-Depth Information
}
#
ctrls
{
text-align
: center;
font-size
: 18px;
}
Step 3: Implement time-saving scripts
Next, create a folder called js to house all of your JavaScript files. Inside create a file called
run.js that will house all of your run code. Next to run.js create a folder called engine. In-
side of engine create another folder called assets. You'll fill up the assets folder with four
scripts that will save you time.
Getting your engine up and running requires several different external files. You'll need the
following:
• Paul Irish's
requestAnimationFrame()
inside animation.js
• A slightly modified version of John Resig's Class Extension script called classes.js
• A transformation matrix library called sylvester.js
• Helpers from webgl_util.js
We'll explain exactly what each component does and how it aids your engine's functional-
ity as we proceed.
Paul Irish's requestAnimationFrame
Our goal is to equip your engine with best animation practices similar to those we discussed
in
chapter 6
on 2D Canvas. When we say “best animation practices,” we mean
• Using
requestAnimationFrame()
instead of
setInterval
for mobile
compatibility, to prevent updates when in another tab, and to prevent frame rate
tearing
• Testing for the
requestAnimationFrame()
in other browsers with Paul
Irish's polyfill and guaranteeing support for older browsers like IE8
