Building A Game In Mozilla: Part Two
Pages: 1, 2
Rethinking the grid structure
We rethought the implementation of the grid based on reader feedback. Initially, we liked the idea of having an XML grid, but it became clear that this was not the way to go, and we have since discovered that building the grid in XUL makes more sense. XUL is an XML-based language, so it was not a big leap to change our code, plus we get the benefit of being able to take advantage of existing layout built into XUL elements. The new grid structure looks like:
<stack> <grid> <columns> <column/> <column/> </columns> <rows> <row> <image class="horizontal-wall"/> <image class="horizontal-wall"/> </row> </rows> <!-- more rows --> </grid> <bulletinboard> <image class="ghost1"></image> <-- more characters --> </bulletinboard> </stack>
See the full code for the XUL grid.
This code needs some explanation. The
<stack> element makes it possible
to place content on top of other content. In this instance we created a
number of columns and rows for the ghosts and chomper to wander around. Columns and rows can be expanded or reduced depending on what size you want the
game grid to be. Each row contains a set of images that piece the grid
together. These are placed inside the aptly named
Layered on top of the XUL grid, a new XUL widget is placed. This
<bulletinboard> feature's functionality was written only days
before this implementation. XUL is still an evolving language, so it
presents surprises like this almost every day. The bulletin board can
best be described as a content container. Each child element in the
bulletin board can be positioned at any given left and top offsets. From
that position, they can be moved around. This is ideal for the PAGMAN
characters to be moved around on top of the grid.
The new bulletin board feature was brought to our attention by a member of the XPFE team, Eric Vaughan. Eric sent us an example of a grid written in XUL that worked in the most recent nightly builds of Mozilla.
Figure 2. A grid written in XUL
To view this XUL grid in Mozilla:
- Get a current nightly build of Mozilla, at least newer than 7/10/00.
- Download the
- Unzip and open
To turn this file into a game, we'll need to program some functionality into this framework, including collision detection, score keeping, intelligence for ghosts, and controls for moving the character. In the next article, we'll go over how we were able to get this in place and what problems we ran into during this process.
After this game is finished, we hope to be able to provide a general framework that will allow others to write Mozilla-based games more easily so we will be able to play more than just PAGMAN. This might involve working with the Amoeba project to create a general purpose gaming environment for Mozilla. Before we can do any of this though, we'll need to get the first game working. Read our next article to see how we managed to do this.
Also this week:
Open Source Roundtable: Where's That Lizard?!
Discuss this article in the Browsers Forum.
Return to the Mozilla DevCenter.