O'Reilly Network    
 Published on O'Reilly Network (http://www.oreillynet.com/)
 See this if you're having trouble printing code examples

Building A Game In Mozilla: Part Two

by David Boswell, Robert Watt and Brian King

In our previous article, Bleeding-edge early 80s technology: Part One, we outlined the first steps we were taking to build a game out of the new technologies that the Mozilla project is innovating. This article generated lots of feedback including a Slashdot article and a heap of e-mail. Most of the feedback was positive, but there were some concerns that we want to address.

Many people were concerned that Mozilla was turning into bloatware and that this game seemed to be just one more thing being thrown into this open source project. Many of those comments clearly stated that Mozilla should be a good fast browser instead of a gaming platform. We understand this concern, but we also believe we can clarify matters with a little more information about our gaming project.

PAGMAN will not be included in the Mozilla distribution. It's a stand-alone program that's being created by an independent third party (us!) as an exercise in writing an application to showcase some of the features of the new Mozilla technologies. There are several other organizations outside of Netscape that are exploring the same kind of possibilities. One of the best examples is the cross-platform Komodo Perl and Python IDE recently announced by ActiveState that is being developed out of Mozilla technologies.

Also this week:

Mindstorms in Education

Linux Gaming Resources

Get the Inside Scoop on the Mozilla Project

Open Source Roundtable: Where's That Lizard?!With audio

Previous Features

More from the Mozilla DevCenter

Mozilla is a development platform, as other browsers are. We've already begun to see a new breed of applications, such as Amazon, eBay, and Yahoo Mail, that are built to work on top of existing browsers. Many of the technologies that make up Mozilla will help this new application paradigm proliferate by allowing more fully functional applications to be built on the Web.

Lynx is a simple fast browser, but the Web is now capable of offering much more than just hyperlinked text. Most people want a content-rich multimedia interactive experience, and we want to show how Mozilla can be used to deliver just that.

Creating a community

The positive feedback we received showed us many people were interested in our project, so we set up an environment that would allow others to learn about what we are doing and allow them to contribute to the project as well.

We created a page about Building A Game In Mozilla that contains all relevant information about what we're doing. A mozilla-gaming mailing list was also created shortly after the first article was published to allow people to talk about the project. So far, about twenty people are discussing this Mozilla-based game as well as other Mozilla-based gaming topics.

While setting up our community, we learned that there was already a Mozilla-gaming project underway. Andrew Wooldridge, a developer at Netscape who works with the Mozilla code every day, is working on the Amoeba engine. This is a role-playing game (RPG) infrastructure that is being created to run on top of Mozilla and is designed to recreate games similar to those of the early Final Fantasy series. Although it's still in the early stages of development, he has provided us with a sneak preview screenshot.

Figure 1. A sneek peek at the Amoeba engine.

Figure 1. A sneak peek at the Amoeba engine.

We also received feedback that pointed out some flaws with our original XML grid code and suggested a better way to solve the problem of creating the foundation for our game. And that's what we've done.

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:

        <image class="horizontal-wall"/>
        <image class="horizontal-wall"/>
    <!-- more rows -->
    <image class="ghost1"></image>
    <-- more characters -->

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 <grid> element.

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

Figure 2. A grid written in XUL

There's some JavaScript hooked up to make the ghosts move around, but it is by no means a working game. It's flexible in that it can be opened in a browser window or launched as a separate window. The interface controls for each individual game will need to be bound in with the game, or it can be in a different file brought in as an XUL overlay.

To view this XUL grid in Mozilla:

  1. Get a current nightly build of Mozilla, at least newer than 7/10/00.
  2. Download the pagman.zip file.
  3. Unzip and open pagman.xul in Mozilla.
  4. Next steps

    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.

    David Boswell, Robert Watt has been involved in the Mozilla community for more than six years. He is also a coauthor of Creating Applications with Mozilla and helped launch mozdev.org.

    Also this week:

    Mindstorms in Education

    Linux Gaming Resources

    Get the Inside Scoop on the Mozilla Project

    Open Source Roundtable: Where's That Lizard?!With audio

    Discuss this article in the Browsers Forum.

    Return to the Mozilla DevCenter.

    Copyright © 2009 O'Reilly Media, Inc.