Lab-5502: Your First Mobile Game

Exercise 3: Creating the game (30 minutes)

 

In this exercise we will create a mobile game based on the MIDP 2.0 Game API. NetBeans Java ME support provides the Game Builder module to help us create a the game framwork with the essential visual elements such as TiledLayers, Sprites, and Scenes so that we can concentrate our efforts on creating the game logic.

---

Background Information

 

Visual editing support for the MIDP 2.0 Game API (JSR 178) including the creation and editing of Sprites, TiledLayers and their arrangement into scenes. The main objective of the Game Builder module is to reduce the effort involved in creating common game components.

• Sprite – The Game Builder treats sprites as a collection of animated sequences where each sprite can be contain a number of sequences. The Sprite Editor enables editing and previewing of multiple animated sequences.
• TiledLayer – Game backgrounds are made up of TiledLayers which are a grid of cells painted with images for each frame. When a new TiledLayer is created it can be edited with the Game Builder's visual editor. This allows the game producer to modify the contents of the TiledLayer and receive instant visual feedback on the changes they made. The TiledLayer editor also includes support for animated tiles.
• Scene - Scenes are locations within a game environment that have distinctive visual and even audio characteristics that help to define the game's look and feel. Each level in a game can have several different scenes. Conversely, a simple game may have only one scene for all of its levels.

---

Steps to Follow

 

Step 1: Open the existing project

In this exercise you will need some additional files we have prepared. To use these files we are going to start by opening a project that contains them.

1. Close the MobileGame we project created in Exercise 1.
2. Open the existing lab project by choosing File > Open Project. A filechooser dialog appears.
3. Select the MobileGame project in the /exercises/exercise3/ folder.
4. The opened project appears in Projects tab of the IDE.

Step 2: Create a new Visual Game Design file

1. Expand Project and Source Packages nodes.

2. Right-click and choose New > Game Builder... on the game package node.

   

3. In the New File dialog accept the default MIDP Class Name GameDesign and click Finish.

4. The newly created Game Design file is opened in the Game Builder with the Game Design view opened by default.

   

Step 3: Create a new Sprite

Now we are going to create an animated sprite of Duke walking.

1. Click on the Create Sprite... link and the New Sprite dialog is opened.

   

2. Type dukeWhite in the Sprite Name textfield and select the images/duke.png from the Select Image list.

   The list contains all images of the supported type available in the current project. Move the sliders to adjust the tile height and width to 25px and click OK.

   

3. The newly created sprite is opened in Sprite Editor of the Game Builder.

   

4. You can drag image tiles from the list on the bottom to specific frames of a sequence. Drag images to the first four frames to get the sequence seen in the below screenshot.

   

5. Four tiles in enough to create the appearance of Duke walking, so let's remove the final, 5th frame, from the sequence.

   Right-click on the 5th frame and choose Remove frame from the contextual menu.

   

Step 4: Create the second Sprite

1. Use the Drop Down menu in the editor toolbar and switch to the Game Design view.

2. Click Create Sprite... to create another sprite.

   

3. Name the new Sprite JamesG and select the /images/james.png images.

   Adjust the tile size to the width and height of 25px.

   

4. Change the sprite sequence as we did for the white Duke sequence by dragging the images into positions to look like the screenshot below. Again, we want to remove the unused 5th frame.

   

Step 5: Create a new Tiled Layer

1. Switch back to Game Design view using the drop down menu in the toolbar and click Create tiled layer... to create add a new tiled layer to our game. The New tiled layer dialog opens.

   

2. Type bricks as the tiled layer name and select the /images/brick.png image and verify that the tile size is 25x25 px.

   

   Click OK and the Tiled Layer editor opens.

3. In the Tiled Layer editor select paint mode by clicking the far left button on the editor toolbar. .

   Select the brick.png image from the tiles list at the bottom.

   Add the image into the table cells by clicking or dragging the mouse with the left mouse button pressed and held down.

   Don't worry too much about which cells you put bricks in for now.

   Note: Leave the perimeter cells empty, we will create a border layer later on and need this area to be available.

   

   The Tiled Layer with bricks to collect is ready.

4. Create one more Tiled Layer using the /images/bord.png image and name it border.

   

   In the opened Tiled Layer editor click once on the Enable layer auto-resizing toggle button. This switches off the rows and columns auto add feature when you drag the mouse out of an existing layer.

   

   Draw a evenly square border as shown in the screenshot.

   

Step 6: Create Game Scene

1. Switch back to the Game Design view and click Create scene... and the New Scene dialog is opened.

   Name the scene level1.

   

2. Add the tiled layer with bricks to the scene by right-clicking and choosing Add tiled layer > bricks from the contextual menu. When the tiled layer is added move it to the top-left corner of the design canvas.

   

3. Add the tiled layer, border, to scene by repeating the step above and choosing border from the contextual menu.

4. Add the Duke sprite to the scene by right-clicking the canvas and choosing Add sprite > dukeWhite from the contextual menu. When the sprite is added, move it to the top-left corner of the canvas.

   

5. Add the James sprite to the scene using the same steps above and choosing JamesG from the contextual menu. Move the JamesG sprite to the bottom-left corner of the canvas as shown in the below screenshot.

   

The solution of this exercise is provided as a "ready to build and run" NetBeans project, <lab_root>/solutions/exercise3/MobileGame.

 

Back to top
Next exercise