Karel Herink

Using Game Builder for Java ME development

This tutorial provides information about developing Java ME games using the Netbeans Mobility Pack 6.0 and the Game Builder tool. The key task in this tutorial is creating a new game level. This document is designed to get you going as quickly as possible. For more information on working with NetBeans IDE, see the Support and Docs page on the NetBeans website.

Prerequisites

This tutorial assumes you have knowledge of, or programming experience with, the following technologies.

• MIDP 2.0 / CLDC
• Netbeans IDE

Software Needed for the Tutorial

• JDK
• Latest release of Netbeans 6 with Mobility Pack

Open the sample Game Builder project

To create new project from samples select: Samples -> Mobile -> MIDP 2.0 Samples -> Simple Game created with Game Builder

Open the game design and browse through it's elements. A game design can contain a number of Scenes, Sprites, and Tiled Layers. The current game design contains a single scene called “forest” which is constructed from 6 layers (2 sprites and 4 tiled layers). Conceptually a scene can be thought of as a game level in our sample game.

In the above image we can see the scene editor which offers several important features.

• In the center is the scene editor itself.
  • The Editor panel takes up most of the space. We can drag layers to change their positions in the scene using the mouse. By right-clicking the mouse in the editor panel a number of other options become available to add and remove layers as well as to change various layer attributes.
• On top of the Editor Panel we see a toolbar containing a number of elements.
  • Source button switches to source editor and allows us to preview the generated Java code
  • Game Builder button switches back to graphical view
  • Component combo box which contains all existing game components and allows navigation between them
  • Create new Scene button
  • Create new TiledLayer button
  • Create new Sprite button
• In the left bottom part of the IDE is the Game Builder navigator. When the Scene Editor is open, the navigator lists all of the layers used in the scene as well as their attributes as they relate to the scene:
  • Layer type (either Sprite or Tiled Layer) icon
  • Z order also known as stacking order shows which layer is on top and which is on the bottom. Note that 0 denotes the top-most layer.
  • View determines is the layer is shown or hidden
  • Lock determines if layer can be moved around the scene or if it must remain stationary
  • Name of the layer
  • X position of the layer relative to the scene
  • Y position of the layer relative to the scene

Adding a new level to the existing game

Create a new Scene

To add another level we can create a new scene by clicking the “New Scene” button on the scene editor toolbar. Call the scene “Desert” and hit the OK button. This creates an empty scene that contains no layers.

Add existing Sprites

You can add existing layers by right clicking inside the scene editor and adding either a sprite or a tiled layer. Add the two existing sprites namely “Karel” and “Thomas” to the scene. Notice that the Game Builder navigator reflects the additions by displaying the Z order of the sprites, their positions, visibility, and lock status.

Create a new Tiled Layer

This scene is a little empty so lets create a new Tiled Layer to act as a sandy backdrop. To do this click the 'Create new TiledLayer' button on the scene editor toolbar.

In the resulting dialog enter 'Sand' as TiledLayer name and select the '/topviewtiles.png' image. The tile size is 16x16 pixels so the preset tile width tile height should be fine. Press OK.

The Tiled Layer editor appears.

The editor contains several components:

• Toolbar on top which contains the following:
  • Paint mode button
  • Selection mode button
  • Information about the currently displayed Tiled Layer
• Editor panel in the center
• Animated tile list on the right, the list already contains a single animated tile which is used in the Forest scene in the Water tiled layer
• Image resource panel on the bottom which allows us to select a tile either for painting or dropping onto the editor panel

Click the 'Paint mode' button on the toolbar and select the 'sand' tile (index 1) in the image resource panel. Then drag the mouse across the editor panel to 'paint' with the selected tile. Notice that the editor panel automatically expands if you paint past the edges. Then select another fitting tile (index 2 or 3) and paint some grassy or rocky patches. When you are done the tiled layer editor may look similar to the image below.

Add new tiled layer to scene

Lets add the new tiled layer 'Sand' that we've just created to the 'Desert' scene. To do this select scene 'Desert' in the combo box above the editor. Right click inside the scene editor and select Add TiledLayer -> Sand. Drag the tiled layer Sand to X,Y position 0, 0. When you drag the 'Sand' tiled layer over the sprites 'Karel' and 'Thomas', notice that it covers both of them like a cloud above them. To fix this use the Game Builder Navigator to drag the tiled layer sand and drop it on the bottom of the sprite list. This pushes 'Sand' down in the stacking order and ensures that both sprites are visible. The resulting scene may look similar to the image below. In order to get things working nicely with emulator place the two sprites in the top-right corner of the 'Sand' layer.

At this point we have created a new and very simple game level. To get the newly created level to activate during game play we need to do some coding. Luckily you can just download DemoGameCanvas.java and use it to replace the one in your project. The updated code will switch the game to the 'Desert' level when main sprite 'Karel' walks to the bottom-right corner of the 'Forest' level.

Finishing up

This tutorial is not designed to show you how to create a commercial quality game as walking a sprite around with nothing much to do can get pretty boring. However, you now have a good starting place to get started with basic MIDP game development.

More information about the technologies used in this tutorial are available on following pages:

• MIDP Profile API JavaDoc (especially package javax.microedition.lcdui.game) - http://java.sun.com/javame/reference/apis/jsr118/index.html
• More Mobility Tutorial Drafts http://wiki.netbeans.org/wiki/view/DraftTutorials

Attachments