Game Development Reference
In-Depth Information
Of course, a better solution would be to prevent these delays in the first place, but most of the causes for
such delays are outside the control of the programmer. One can only hope that as browser technology
progresses and WebGL becomes more robustly supported, the guarantees on frame rate will become
more robust as well. Using
requestAnimationFrame()
to drive your animation holds a certain promise that
as these advances are made, your application stays on the front lines of achievable performance.
Code structure
A hobby project like CycleBlob, developed by a sole programmer, can quickly become a tangled mess of
functions that an outsider would find hard to penetrate. Two months of full-time work took the code base from
the bare minimum of the
learningwebgl.com
tutorials to a full and complete game with a well-established
concept, players, levels, menus, sounds, help page, error pages for non-supporting browsers, and a small
artificial intelligence module. Although maintaining order in the code was often a technical chore to be
delayed until late at night, the upside of refactoring code into proper OOP objects bore almost immediate
fruits in the form of greater convenience in navigating the code and understanding what fits where.
The final sections of this chapter contain brief descriptions of the different modules of the code and explain
how they interact with each other.
Starting up
Like anything else on the web, it all starts from an HTML page. The HTML page of CycleBlob is quite short
and straightforward:
The file starts with an
<!doctype html>
declaration, the standard for HTML5.
Two
<canvas>
elements, one on top of each other. The bottom canvas is for 3D content and is the
one initialized with a WebGL context. The top canvas is for 2D graphics, like menus and text, and
is initialized with a regular 2D context. The 2D canvas is mostly transparent so that the 3D
content under it is visible.
<audio>
tags to load the sound files along with the page.
<img>
tags made invisible using
style="display:none"
that pre-load the images used in the
menu system.
Some
<meta>
tags for search engine goodness.
A link to the minified JavaScript file that contains all of the code of the game and a link to the
jQuery minified source. jQuery is used sparingly for easy access to the HTML DOM.
Some boilerplate JavaScript code from Google Analytics that allows me to keep track of the
number of visitors to the site.
An
<iframe>
that contains the shaders code used by WebGL. The game uses only a single pair of
vertex-shader/fragment-shader for all rendering. These shaders are fairly standard and
implement the basic Phong lighting model with a single light source.
