Game Development Reference
In-Depth Information
A link to the feedback page and a small Facebook “Like” button that is not used often enough by
visitors of the site.
Finally, a call to
webGLStart()
that occurs in response to the
onload
event of the page. This
function is called automatically when all of the resources listed on the page are fully loaded and
the code of the game is ready to be started.
Using two canvases one above the other is the simplest method of superimposing 2D graphics over a 3D
scene. It requires some basic knowledge of the 2D canvas graphics API, which is vastly different from
WebGL but rather simple to pick up. Tasks like selecting fonts for text, drawing curved lines, and stroking
them are quite a bit simpler with the 2D canvas API than using WebGL.
The converse option is, of course, to use just a single canvas with a WebGL context and to do both 2D
and 3D drawing exclusively with WebGL. Going this path would require using a viewport that is appropriate
for 2D drawing and an orthogonal projection transformation matrix that is naturally different from the one
used for 3D rendering. With this method, drawing text and menu buttons is done using WebGL vertices
buffers, triangles, and textures, which can take considerably more code and debugging effort than using
the 2D API. On the other hand, creating the menu and text elements in WebGL allows a more unified and
streamlined user experience, as well as better graphic quality for the 2D elements in case the browser
supports antialiasing for WebGL. You'll notice that suspiciously missing from the list of downloaded
resources are the 3D models used in the game. Adding the models as objects to be downloaded from the
HTML would mean that the browser would download them before
webGLStart()
is called. Since the
models are fairly big in comparison to the rest of the downloaded resources, downloading them before the
application starts would cause a significant delay before the user sees any UI element displayed.
Instead of adding them in the HTML, the 3D models are downloaded using
XmlHttpRequest
s in an
asynchronous manner by the JavaScript code in the initialization procedure. During their download, the
user can interact with the main menu of the game and even view the instructions screen.
The function
webGLStart()
resides in the file
main.js
in the non-minified source repository. It performs the
initialization of the game, as follows:
Accesses the two
<canvas>
elements in the HTML and creates the corresponding WebGL and 2D
contexts.
Sets a handler for the resize event of the page. The handler recalculates the projection
transformation and changes the size of 2D elements to fit the size of the canvas.
Compiles the single shader program used for all rendering.
Starts the download of static models—the bike model and the life bonus model. The download
proceeds asynchronously and the code receives a notification when the download is complete.
Generates the model of the explosion animation. The basic geometry elements of the explosion
are a concentric circle model and an exploding spark model. During the explosion animation,
these static models are scaled and colored but their vertices are not modified (see Figure 8-17).
