Introduction

In the previous articles, I've mentioned under most cases you have to seek help for some game map editors to accelerate your game development. The case is the same for the previous PushBox game I've introduced. In the PushBox game, I, with the help of a 2D game map editor, created the map arrays defined in the file MapList.Java (as well as MapList.cs). In this article, we are going to create our own game map editor using Java language. For simplicity, we are only to construct a 2D map editor, which will output a two-dimensional array as the result.

Set up the Project Sketch

Start up the Eclipse IDE, click the menu item 'File|New|Project...' to open the 'New Project' dialog, and select the 'SWT/JFace Java Project' template, as shown in Figure 1.

Figure 1: Create a Java project with SWT/JFace support

From the next wizard page input the project named MapEditor and click OK to exit the wizard.

Click the 'src' folder, and then click item 'Create new visual classes' from the toolbar. From the sub menu, select the item 'Swing | Application Window' to create a main Swing application, named MapEditor, as shown in Figure 2 below.

Figure 2: Create a main Swing application

Next, click the item 'Create new visual classes' from the toolbar and select the item 'Swing | JPanel' to create a custom JPanel component named SplitPanel. And then, from the toolbar select the item 'Swing | JFrame' to create two custom JFrame components named MapEditorMinor and ResultFrame, respectively.

Finally, let's look at the final Package Explorer corresponding to the sample project, as shown in Figure 3 below.

Figure 3: The simple folder architecture of the sample project

Next, let's further look at the main running-time snapshots in the simple map editor. Figure 4 illustrates the main interface of the map editor.

Figure 4: The main interface of the map editor

And then from the menu click the menu item 'File | Open' to open an image file, as shown in Figure 5 below.

Figure 5: Using the map editor to open a sample game image

Next, click the button 'OK' at the bottom right to open another window, as shown in Figure 6.

Figure 6: The true game map editor (the bottom provides the target image blocks and the top provides the final game scene with selected gadgets at appropriate positions)

Next, click the menu item File | Generate and you will see the snapshot in Figure 7.

Figure 7: Generate the final map data using the game map editor

Well, with the main screenshots in mind, let's next introduce how to construct the map editor tool in this article.

Create the Main Interface - the MapEditor Class

With the help of visual Swing UI designer, creating most of the user interface gadgets is easy enough. Figure 8 indicates the design-time screenshot of the MapEditor class.

Figure 8: The design-time screenshot of the MapEditor class

There are two parts (the menu and the placeholder to hold the image) in Figure 8 that will be dynamically added, so you will not see them. Since our main interests do not dwell upon the Java gadgets design, we will mainly pay attention to the most meaningful parts.

First, we've defined two important variables of types JScrollPane and SplitPanel respectively, by which we will show the image to be imported and facilitate the screen scroll.

In the above code, sp is a custom JPanel defined in another file SplitPanel.Java to be discussed later on. The JScrollPane instance jsp is used to render the image.

Next, we derive the MapEditor class from two interfacers, ActionListener and ChangeListener, with which we will subscribe to our interested action listeners. Since these action listeners can serve any gadgets in the class, this helps to simplify the application design.

The rather important method should be actionPerformed. First, when the user clicks the menu item 'Open' an open file dialog is shown. Next, we create an instance of SplitPanel and put it into an instance of a JScrollPane. At last, by invoking the method of getContentPane() of JFrame we show the scroll pane and accordingly show the contained image.

When the user clicks the button 'OK' at the bottom right, this form (MapEditor, a JFrame) will be closed and another window MapEditorMinor is created and opened, with the related parameters passed in.

Next, let's look into other related stuffs involved in the above story.

Create the Custom SplitPanel Class

The SplitPanel class is a custom JPanel with which to display the big image that generally contains a couple of small pictures. First of all, let's take a look at the related code.

The above code is easy to understand. On the whole, we render the big image that generally contains a couple of small pieces of pictures in the panel. And then, we draw numerous vertical and horizontal green lines to split the image (refer to Figure 5 above) with the help of data from the parent control (note the bold lines). That's all.

Next, let's research into another more important window MapEditorMinor.

Create the Custom MapEditorMinor Class- Design the Game Map

As described previously, as soon as we close the MapEditor we open another window MapEditorMinor. Still, with the help of the visual design support, MapEditorMinor is also easy to create. Figure 9 illustrates the design-time snapshot of this window.

Figure 9: The design-time snapshot of MapEditorMinor

MapEditorMinor also derives from a JFrame control, with a horizontal JSplitPane splitting the whole window into two JScrollPanes (each contains a JPanel). And also, since the menu will be generated dynamically, you can just visualize the root placeholder of it. Next, let's list all the code of the MapEditorMinor class.

There are several points worth noticing above. First, to grasp all the ideas here you have to make clear the meanings of all the variables defined at the beginning (especially the bold arrays), as well as refer to the running-time snapshots above mentioned. Next, we initialize the top part, the bottom part, build up the general interface, and then initialize the bottom part related mini image blocks using the imported image.

The most important part should be the method mouseClicked. According to the part the user clicks, we perform corresponding actions. If the user clicks the top JLabel then we show the mini image block at the clicked position and remember the coordinate position using the array result. However, if the user clicks the bottom JLabel then we remember the mini image block data using the variable tempii, and at the same time calculate the coordinate position and store it using the variable tempNumber.

Finally, in the method actionPerformed if the user clicks the men item 'Generate', we pop up a simple window to show the final map data with the data in the form of a two-dimensional array.

Create the Custom ResultFrame Class- the Code Interface

ResultFrame is a simple custom JFrame used to illustrate the finally generated two-dimensional map array. The complete code is shown below.

The above code is easy enough. As soon as accepting the two-dimensional array in the constructor, we grab the data in it and assign them in sequence to the Text property of a JTextArea instance. And then, we put the JTextArea instance inside an instance of JScrollPane. At last, we put the JScrollPane instance inside the mini JFrame ResultFrame. That's all!

Obviously, we only show the final map data using a two-dimensional array inside a JFrame. Interested readers can further better this module to persist the map data into some files (such as .txt, .xml, etc.) using I/O API in Java.

A Few Words about the PushBox Game Used Arrays

As you've seen, we generate the coordinate positions for the corresponding mini image blocks to be put in the final simulating game scene. However, the result array contains more info than the coordinate positions. In accordance with the arrays defined in the previous PushBox game, you can easily build up such arrays (more than one array) with the help of the two-dimensional array containing the coordinate positions. That's how the arrays come.

Summary

In this article, we created a simple 2D game map editor using Java in the Eclipse IDE. In developed using the Java environment, you can use it at many different platforms based 2D games. Apparently, this map editor is easy enough; there are many aspects required to be improved. In the later articles, I will introduce to you another more complex game map editor in the Silverlight environment, through which you can create your 2D and 2.5D game maps, as well as other extra plentiful functions.

About Xianzhong Zhu

I'm a college teacher and also a freelance developer and writer from WeiFang China, with more than fourteen years of experience in design, and development of various kinds of products and applications on Windows platform. My expertise is in Visual C++/Basic/C#, SQL Server 2000/2005/2008, PHP+MyS... This author has published 81 articles on DotNetSlackers. View other articles or the complete profile here.