# Lab-5502: Your First Mobile Game

Expected Duration: 100 minutes
Contacts: Andrey Korostelev and Ivan Sidorkin

Introduction | Exercise 0 | Exercise 1 | Exercise 2 | Exercise 3 | Exercise 4 | Exercise 5 | Summary
Introduction Background Information Steps to Follow Summary ## 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. Close the `MobileGame` we project created in Exercise 1. Open the existing lab project by choosing `File > Open Project`. A filechooser dialog appears. Select the `MobileGame` project in the `/exercises/exercise3/` folder. The opened project appears in Projects tab of the IDE. Step 2: Create a new Visual Game Design file Expand Project and Source Packages nodes. Right-click and choose `New > Game Builder...` on the `game` package node. In the `New File` dialog accept the default MIDP Class Name `GameDesign` and click Finish. 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. Click on the `Create Sprite...` link and the New Sprite dialog is opened. 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. The newly created sprite is opened in Sprite Editor of the Game Builder. 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. 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 Use the Drop Down menu in the editor toolbar and switch to the `Game Design` view. Click `Create Sprite...` to create another sprite. Name the new Sprite `JamesG` and select the `/images/james.png` images. Adjust the tile size to the width and height of 25px. 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 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. 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. 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. 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 Switch back to the Game Design view and click `Create scene...` and the New Scene dialog is opened. Name the scene `level1`. 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. Add the tiled layer, `border`, to scene by repeating the step above and choosing `border` from the contextual menu. 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. 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