In this chapter we want to tell you how to program a leveleditor one can use in any arraybased game. An arraybased game might be a Breakout clon, Boulderdash, PacMan or a Nibbles clon like our game Snakin where we used this leveleditor too. Before you start reading this article you should know something about arrays in Java (just basics), maybe a little bit about applet parameters and of course you should download the sourcecode at the end of the chapter!
Why do we need a leveleditor?
Even though the answer to this question might be clear I want to write a few lines about it. To program a leveleditor and to make your game work with any level build with this editor is much harder and costs you much more time than to write a game that has one or two static levels. But this is worth the price if you want to program a game with many different levels. If you programmed the game that way, that it works with a leveleditor, then it costs you just a few minutes to add a new level. But if you programmed your game just for static levels it will be hard and maybe even impossible to add a new level. So the hard work at the start of your gamedesign was really worth the price! Well, let's start with the real problem!
The basic idea
Before we'll find a solution to the problem of where and how to define our levels we have to think about something else. We have to find a way, how we want to represent a level in our game.
Where and how will we define the levels?
We are programming applets so we have basicly three possibilities where we can define the levels:
The first and the second solution are for different reasons worse than the third one. To read in an extern file into an applet is possible but not that easy so we won't do it. To define the different levels in the sourcecode is a good solution if the player should not be able to take a look at a level before he has reached it, for example if the goal of the game is to find a way out of a labyrint. But you can't use this solution if the player should be able to write a level by himself. So there is just the third alternative left and we will use this idea now in our editor.
So we will use applet parameters to define our levels. Every applet parameter has a value and a name (for details see below) and we can get the value of a parameter by calling the getParameter(parametername) - method of the applet class. Then the value of the parameter with the specific name is returned as a string. Applet parameter can be defined between the opening and the closing applet tag and look always the same just like:
Well, now we know, where we will write our levels, but we still don't know what a level will look like. Ok, here comes my solution. Every level we'll write will consist of 11 parameters: 3 information parameters that hold information about the author of the level, the level description and the level name. The other 8 parameters will represent the 8 rows of the level array that represents our level in the example. The parameter names will always look like this: "Level" + "Levelnumber" + "_" + "Id". Id can have the values "Author", "Name", "Comment" or "Line" + "Rownumber". The value strings of the information parameters can have any lenght, the values of the level defining parameters have to consist of a string with length 10. Every character of the string represents one level element, in our case, stones with different colors. These colors/character pairs will be r = red, g = green, b = blue, y = yellow and another character ":" that represents grid fields in the level where no level element shall be placed. So the names of parameters of different levels will look all the same execpt for the levelnumber. Because of this structure of the parameter names it is really easy to read in the different levels using a while or a for loop, counting from 1 to the in the "Levels_in_total" defined integer (for details see readLevel - method further down this chapter). Now you can take a look at a level, which can be read by the leveleditor:
Class design of our editor
Now we'll start with the class design of our leveleditor, that will make it possible to read in a level.
The sourcecode of the most important methods.
As always I won't discuss every single line of code in detail, but I'll talk about the most important methods and classes. These are the class LevelReader and its method readLevels() and the class Level itself. The classes Main, Stone and C_LevelEditor are pretty simple and you should be able to understand them by yourself.
First of all we have to read all defined levels into the applet. This happens in the class LevelReader using the method readLevels(). The method is pretty simple and selfexplaining, the only special thing is, that we have to set a refference to the applet class in the class LevelReader. This refference to the Component = Applet is needed to use the getParameter() - method. Well, here comes the code:
public class LevelReader
private int levels_in_total;
// Array, stores all generated instances of the class Level
private Level  level_array;
private Component parent;
public LevelReader (Component parent)
this.parent = parent;
// Get number of levels in total
levels_in_total = Integer.parseInt (((Applet)parent).getParameter (C_LevelEditor.total_levels));
// Initialize level_array
level_array = new Level [levels_in_total];
/* This method reads every level in the HTML - Page, generates a
instance of the class Level (for every level) and stores it in the
public Level  readLevels ()
Level level = new Level ();
// get and set information parameters
level.setAuthor (((Applet)parent).getParameter ("Level" + i + "_" + C_LevelEditor.author));
level.setName (((Applet)parent).getParameter ("Level" + i + "_" + C_LevelEditor.name));
level.setComment (((Applet)parent).getParameter ("Level" + i + "_" + C_LevelEditor.comment));
// read in all the lines and store them in the level
for (int j = 0; j < C_LevelEditor.number_of_lines; j++)
// store level
level_array [i-1] = level;
The class Level
Now we are able to read in the levels and to store them in Level instances but we still don't know anything about the Level class in detail. Now we have to generate a real level mainly the stone_map which holds the different level elements out of the string information we get out of the level definition in the HTML - page. The stone_map 2D array stores the level elements at the same position where they appear in the level definition (for example a "r" occurs at line 3 as the third character of the string, then a red stone object is generated in the array in row 3 and column 3). First of all this class has some set and get methods to get and set the values of the level information parameters. Much more interesting is the method setLine. This method gets one line of the level definition (a string) and translates this string to stone objects and stores these stone instances in the stone_map. Last but not least the class has its own paint method.
public class Level
private String author;
private String name;
private String comment;
// Levelmatrix, stores the stone objects
private Stone   stone_map;
public Level ()
stone_map = new Stone [C_LevelEditor.number_of_lines]
// Method translates information of one line of the level definition to
public void setLine (String line, int line_index)
// go thourgh all chars and translate them to stone objects
for (int i = 0; i < C_LevelEditor.number_of_cols; i++)
// generate red stone if char equals "r"
if (entrys[i] == 'r')
// generate different coloured stones the same way
// If char is unknown, generate no stone, which means that this
// array field stays null
// store stone in array if it is not null
if (stone == null)
// set and get methods for the information strings
// Method paints level
public void paintLevel (Graphics g)
for (int i = 0; i < stone_map.length; i++)
// paint stone or do nothing if stone is null
if (stone == null)
// paint level information
g.drawString (comment, 50, 250);
g.drawString (name, 50, 270);
g.drawString (author, 50, 290);
In this chapter I showed you one way to define a level in a HTML - page, to read in this level using a LevelReader and one method to represent this level in our applet (2D array). As always there are many ways to do this maybe much better ones than mine and even though we might have helped you, because you can use the methods to read in and store the level in the applet in almost every arraybased game the much harder work is still in front of you. You have to make your game work with every level someone defined (which is really hard) and of course you have to generate your own level elements, change the number of level lines... . Ok, I hope I could help you a little bit, if you wrote a game using this editor, I would be glad if you would send it to me. Well, we are finished, here comes the link to download the sourcecode and the link to the working level editor applet (take a look a the sourcecode of the HTML - page to see what the levels look like).