I've finally hacked out the XML maze loading. If you view source for the wad2.html in the iframe, you'll notice that there's now a src parameter to the applet. This points to the JMazeML file to load. I've posted a sample JMazeML that you can play around with. The source XML file for this maze is available here.
Of course, the plan is to allow users to edit their own mazes. There will be an editor at some point. But 3D is definitely a higher priority right now.
Also, I've moved to a different versioning system: it's now (major).(minor).(minorer).(etc). So don't be surprised if the next major version is 0.10 rather than 1.0.
Enjoy!
Friday, October 24, 2008
Saturday, October 11, 2008
JMazeML Tutorial
Until I get time to work on the editor, board loading will be accomplished through XML files. I've tried to make it as painless as possible. The editor will still be a lot easier though.
Anyway, here's a short how-to on the XML files. For a more formal spec, check out the DTD.
A good prerequisite to this is a little knowledge of XML, or at least HTML. If you have neither, you may want to read W3Schools' XML Tutorial first.
The root element in JMazeML is the jmaze element. It has a title and motif attribute. The title is just your title of the current maze, while the motif is the URL of the motif to load for the current maze. Currently the only value used for motif is default.jmtf. Both title and motif are required.
Next comes the info. This element contains three subelements: author, website, and message. None of these are required, although an info tag is required. Here's an example:
As you can see, the author and website are purely informational. If there is a message, the game will display it at the beginning of the maze.
Next is the big part: the layout tag. This tag contains all the information about the actual maze. The layout tag attributes, width and height, define how many squares the maze has. So for a 5x5 maze, i would do
Under a layout tag, we have 3 different things: definitions, rowFills, and the maze itself. The rowFills and the maze required the definitions to be made first.
A definitions tag contains a palette of sorts. It has all the different kinds of squares you will use in your rowFills and the maze definition. Each square should have an id element, which is used later.
I'll publish another tutorial that contains all the different kinds of squares you can define. For now, just look at the following example.
I know it's a lot. Let's break this down a little.
The normal, red, green, blue, and orange squares are pretty simple; they just put one of these kinds of squares down. The normal corresponds to a square that allows you to walk over it and doesn't require a key. The color squares require the same color key. Similarly, the wall and water squares are self-explanatory, but I'll explaing them anyway. They define a square with a wall or water. Both stop the player from moving, but the wall also stops boats from moving whereas water does not.
The arrow square is a little different - it requires a direction. This defines a square that pushes the player in the direction specified. Directions can be up, down, left or right.
The tport square is similar. It is a teleporter which teleports the player to a certain location, as specified by x and y. Note that these are 0-based, with the (0, 0) point being in the top-right corner of the maze.
After the arrow square, we have another normal square. This one is slightly different, though; it has an item. This particular square has a GreenKey item, which is simply the green key. Some other items include Boat, Treasure, and the other color keys. You can define an item for any of the squares, as you can see with the next few squares.
Finally, we have the switch square. I'll get more into square actions and events in another post; suffice it to say that this defines a switch that when pressed, places the red and orange keys on the board.
Now that the definitions are finished, we can finally define the actual board. If you do single-character ID's for your square definitions like I've done above, the board can be defined as simply as this:
This lays out each element from my palette above into the maze. Note that whitespace doesn't matter here; it simply lays out the squares from left to right, top to bottom until they're all laid out. (Extra squares would result in an error.) Actually, I could have just as easily done
and it would have resulted in the same maze.
So the first 'n' in the top-right corner says to put the square with id 'n' in the top-right corner of the maze. Looking back to our definitions, this is
- simply a normal square. Continuing on, each character in my maze turns into the square with the matching id. So the next 4 n's turn into normal squares, then the 'g' turns into a green square. (and on and on and on.)
I'll go over what to do if you want to use multiple-character id's in another post.
Finally, close the layout and jmaze tags.
When I post the new version of the game that actually does the maze loading, I'll post this maze and link from here to the source JMML of the maze.
Anyway, here's a short how-to on the XML files. For a more formal spec, check out the DTD.
A good prerequisite to this is a little knowledge of XML, or at least HTML. If you have neither, you may want to read W3Schools' XML Tutorial first.
The root element in JMazeML is the jmaze element. It has a title and motif attribute. The title is just your title of the current maze, while the motif is the URL of the motif to load for the current maze. Currently the only value used for motif is default.jmtf. Both title and motif are required.
<jmaze title="This Maze" motif="default.jmtf">
Next comes the info. This element contains three subelements: author, website, and message. None of these are required, although an info tag is required. Here's an example:
<info>
<author>Jesse Bahr</author>
<website>http://students.cs.byu.edu/~jbahr/</website>
<message>Try to find the hidden treasure room!</message>
</info>
As you can see, the author and website are purely informational. If there is a message, the game will display it at the beginning of the maze.
Next is the big part: the layout tag. This tag contains all the information about the actual maze. The layout tag attributes, width and height, define how many squares the maze has. So for a 5x5 maze, i would do
<layout width="5" height="5">
Under a layout tag, we have 3 different things: definitions, rowFills, and the maze itself. The rowFills and the maze required the definitions to be made first.
A definitions tag contains a palette of sorts. It has all the different kinds of squares you will use in your rowFills and the maze definition. Each square should have an id element, which is used later.
I'll publish another tutorial that contains all the different kinds of squares you can define. For now, just look at the following example.
<definitions>
<normal id="n"/>
<blue id="b"/>
<end id="e">
<green id="g"/>
<orange id="o"/>
<red id="r"/>
<tport id="t" x="0" y="0"/>
<wall id="w"/>
<water id="W"/>
<arrow id="d" direction="down"/>
<normal id="q">
<item>GreenKey</item>
</normal>
<water id="B">
<item>boat</item>
</water>
<green id="G">
<item>BlueKey</item>
</green>
<switch id="s">
<pressAction>
<eventList>
<changeSquareEvent x="0" y="0">
<normal>
<item>OrangeKey</item>
</normal>
</changeSquareEvent>
<changeSquareEvent x="1" y="0">
<normal>
<item>RedKey</item>
</normal>
</changeSquareEvent>
</eventList>
</pressAction>
</switch>
</definitions>
I know it's a lot. Let's break this down a little.
The normal, red, green, blue, and orange squares are pretty simple; they just put one of these kinds of squares down. The normal corresponds to a square that allows you to walk over it and doesn't require a key. The color squares require the same color key. Similarly, the wall and water squares are self-explanatory, but I'll explaing them anyway. They define a square with a wall or water. Both stop the player from moving, but the wall also stops boats from moving whereas water does not.
The arrow square is a little different - it requires a direction. This defines a square that pushes the player in the direction specified. Directions can be up, down, left or right.
<arrow id="d" direction="down"/>
The tport square is similar. It is a teleporter which teleports the player to a certain location, as specified by x and y. Note that these are 0-based, with the (0, 0) point being in the top-right corner of the maze.
<tport id="t" x="0" y="0"/>
After the arrow square, we have another normal square. This one is slightly different, though; it has an item. This particular square has a GreenKey item, which is simply the green key. Some other items include Boat, Treasure, and the other color keys. You can define an item for any of the squares, as you can see with the next few squares.
<normal id="q">
<item>GreenKey</item>
</normal>
Finally, we have the switch square. I'll get more into square actions and events in another post; suffice it to say that this defines a switch that when pressed, places the red and orange keys on the board.
Now that the definitions are finished, we can finally define the actual board. If you do single-character ID's for your square definitions like I've done above, the board can be defined as simply as this:
nnnnn
gBbdo
GWsdr
WWwde
qnwnt
This lays out each element from my palette above into the maze. Note that whitespace doesn't matter here; it simply lays out the squares from left to right, top to bottom until they're all laid out. (Extra squares would result in an error.) Actually, I could have just as easily done
nnnnngBbdoGWsdrWWwdeqnwnt
and it would have resulted in the same maze.
So the first 'n' in the top-right corner says to put the square with id 'n' in the top-right corner of the maze. Looking back to our definitions, this is
<normal id="n"/>
- simply a normal square. Continuing on, each character in my maze turns into the square with the matching id. So the next 4 n's turn into normal squares, then the 'g' turns into a green square. (and on and on and on.)
I'll go over what to do if you want to use multiple-character id's in another post.
Finally, close the layout and jmaze tags.
</layout>
</jmaze>
When I post the new version of the game that actually does the maze loading, I'll post this maze and link from here to the source JMML of the maze.
Big News - Expect Progress Soon!
That's right, I'm de-stagnating this project for a very good reason: getting a good grade in my graphics class. The final project for that class is to make a 3D game. As part of the project, I'll make the game 3D. It will essentially be a top-back view of the character. Moving left or right will rotate, while up will move forward.
I'll be using JOGL for the 3D. This is basically a mapping from Java to OpenGL, so it has huge speed benefits. It should run faster than the current game!
Also, I'll be adding the ability to read XML files, adding an actual END to the game, and some other smaller things.
But don't take my word for it. (buh duh-duh*) Here's my proposal that I actually turned in:
*Yes, that's a Reading Rainbow reference. Ha.
I'll be using JOGL for the 3D. This is basically a mapping from Java to OpenGL, so it has huge speed benefits. It should run faster than the current game!
Also, I'll be adding the ability to read XML files, adding an actual END to the game, and some other smaller things.
But don't take my word for it. (buh duh-duh*) Here's my proposal that I actually turned in:
CS 455
Semester Project Proposal
Jesse Bahr
For my Semester Project, I would like to work on a Java Applet game that I have been developing over the past several years.
The game is a basic maze game. A maze is made up of a matrix of squares. There are many different kinds of squares, including:
Normal squares, which allow the player to pass through,
Colored squares, which require a matching key in order to pass through,
Arrow squares, which push the player in the direction they point
Boat squares, which allow the character to move in one direction until he hits a non-water square,
Water squares, which block the player unless he is on a boat,
Wall squares, which completely block player movement, and
Switch squares, which allow the player to trigger an action in the maze.
What's Done
Although I have been developing this game for a few years, there is very little done. The player is limited to left, right, up, or down movement – no diagonal movement is currently allowed. Clipping works, but only with this unidimensional movement. When the game loads, a hard-coded test board creates itself. The player can then navigate this test board (although he will be disappointed to find out that there is not yet the idea of an end to the maze)
The current graphics consist of a top-down view of tiles. The player image is a yellow “happy face” circle.
What I Will Do for the Semester Project
For the Semester Project, I have many plans. Since I am not yet familiar enough with OpenGL to know how long to expect a project to take, I will over-plan my project, and do the graphical items first. Here is my prioritized list of things I will do for this project:
Add board-loading. I will develop an XML DTD for mazes to be loaded into the applet. I will add loading code for these files, to load mazes into the applet. The src parameter to the applet will point to the XML maze file to be loaded.
Convert the 2D interface to 3D. Using OpenGL and JOGL, I will make the interface 3D. Mazes will be allowed to set their light level, and to add extra lights around the maze. To replace the current top-down interface, the perspective will follow behind and slightly above the player. I will also need to link in Sun's JOGL Loader Applet, which automatically installs OpenGL and JOGL on a user's machine.
Create an End Square! The end square will be the object for the maze. Once the player reaches it, the game will display the his time and allow him to play it again to try beating that time.
Allow Diagonal Movement. Currently, the player controls the main character by using the up, down, left, and right arrow keys to move the player in the associated direction. I will change this so that up means forward, down means back and rotate the camera backwards, left means rotate left, and right means rotate right.
Give the Squares Individual Heights. Instead of having the maze be flat, each square will have its own height. This will allow stairs and cliffs. The player will be able to move from one square to another only if the new square's height is less than or equal to the old square's height + 1. The player will still not be able to move into walls or water, or into the wrong way of an arrow.
Make an Editor Program. I will create a Java application for creating, editing, and saving mazes. The application will have a point-and-click user interface for creating mazes.
I won't consider the project finished unless at least #1-#4 are complete. If I cannot complete #5, I will give different heights to different aspects of the game instead. For example, I might make the boat floating up and down in the water.
Plans for the Future
The idea is to publish this applet to the web. Eventually, I'll build a website around it. I will give others the ability to build their own mazes. This is the reason for the square architecture of the mazes; this makes it easy to design a maze. The mazes will be user-ranked on difficulty and fun, and the funnest-ranked mazes will be featured on the home page.
*Yes, that's a Reading Rainbow reference. Ha.
Saturday, August 9, 2008
Version 0.82
I recently took a Design Patterns class, which motivated a large redesign of the background code. This should make it easier to work with in the future, but won't affect it much from what you'll see.
This is a minor version, right in the middle of the redesign. You'll notice that I introduced some bugs and quirks. These will all be ironed out when the redesign is over.
This is a minor version, right in the middle of the redesign. You'll notice that I introduced some bugs and quirks. These will all be ironed out when the redesign is over.
Welcome
This will be my new page for development of Jesse's Maze Game. This is a maze game that will allow users to create and upload their own mazes. The title is, of course, tentative; I'll come up with something better once I complete it.
I've been developing this game for about 4 years in between school. I hope to have it finished within 2 years, but we'll see.
To try the maze game out, just click the Show Maze Game button above.
I've been developing this game for about 4 years in between school. I hope to have it finished within 2 years, but we'll see.
To try the maze game out, just click the Show Maze Game button above.
Thursday, August 7, 2008
History
Here are the announcements and history from the old page for Jesse's Maze Game.
v. 1.0 - the official release!
Editor - The downloadable maze editor. I plan to release it after v. 1.0 comes out.
v. 1.1 - improve graphics and animation
v. 1.2 - status bar and mini map
5/20/06: Version 0.3 - Put in restricted areas that you need a key to get into.
5/24/06: Version 0.4 - Put in arrows.
6/6/06: Version 0.5 - Put in the boats, but created a bug with the arrows.
6/10/06: Version 0.51 - Fixed the arrows bug as well as a bug with the boat (it would let you move after it stopped - it should only start moving when you step onto it from another square ie. pushing off)
7/14/06: Version 0.6 - Put in invisible ground switches as well as pressable switches. Press the switches with the space bar.
8/7/06: Version 0.7 - Made the images editable with - they are packaged in what I call a Motif. Also made a Motif editor. I have used a new motif to emphasize what it does. Notice that animation is now possible.
8/31/06: Version 0.71 - Status bar. Whoo. 1/18/07: Version 0.8 - More with the status bar, treasure, green and orange keys/areas, and press "m" for map ("m" again to exit)
Version 0.8 1/18/07: More with the status bar, treasure, green and orange keys/areas, and press "m" for map ("m" again to exit)
Here is my plan for the future of making the maze game:
Version 0.9 - add more mazesv. 1.0 - the official release!
Editor - The downloadable maze editor. I plan to release it after v. 1.0 comes out.
v. 1.1 - improve graphics and animation
v. 1.2 - status bar and mini map
Subscribe to:
Posts (Atom)