×
Namespaces

Variants
Actions
Revision as of 09:45, 31 July 2012 by izinin (Talk | contribs)

Rapid game development for Series 40 with NetBeans Visual Designer and Game Builder

From Nokia Developer Wiki
Jump to: navigation, search
{{{width}}}
08 Jul
2012

This article explains how to create a typical 2D adventure or quest game skeleton for Nokia Series 40 low-level and high-level devices: N1XX and N3XX

Article Metadata
Code ExampleTested with
Devices(s): Nokia N110, Nokia N310
Compatibility
Platform(s): Series 40 6th Edition Lite (or higher)
Series 40 6th Edition FP1
Device(s): All*
Article
Created: izinin (25 Jun 2012)
Last edited: izinin (31 Jul 2012)

Contents

Introduction

2D adventure games are different in game play, story and user interface but everyone presents to user a map of the game world where the game character can act. This tutorial is step-by-step guide on how to create a adventure game skeleton for Nokia Series 40 low-level (Nokia 112) and high-level (Nokia Asha 311) devices. By completing the article instructions you will have a game application consisted of two views: main menu and game view. Game view presents the game world map where user can control the game character with device keys. Please note the game does not support touch screen. Also the article does not explore many challenges you may face in your game development but instead it gives you step-by-step instruction how to build your game application skeleton which you can develop further to production quality. Missing game parts are listed at the end of the article and will be elaborated in the next articles of the wiki series.

NetBeans IDE is an alternative Eclipse development environment that is supported by Nokia Series 40 SDK. NetBeans Visual Designer and Game Builder provide the application skeleton, allowing developers to focus on game artworks and logic.

  • Visual Designer generates the application MIDlet which supports general UI flow and layout design.
  • Game Builder generates game resources manager that controls the following MIDP 2.0 Game API features:
    • GameCanvas. , a subclass of Canvas with game-related features
    • Sprite - class for animated sprites
    • TiledLayer - class for tiled game backgrounds, including animated tiles
    • LayerManager - class for managing Sprites and TiledLayers

Setup development environment

Please find step-by-step SDK installation instruction in the SDK documentation. To open documentation use eclipse document browser found by the path in your SDK installation folder: <drive>:\Nokia\Devices\Nokia_SDK_2_0_Java\doc\docbrowser\eclipse. In the opened documentation, please navigate to "Getting started" --> "Supported IDE". Then find link to "Configuring NetBeans for the SDK" article. Follow step-by-step instruction. While performing the article steps, make sure you are installing the latest NetBeans release that is 7.1.2 at the moment.

Game design

Common parts in game UI are the following screens:

  • Splash screen shown when application is started
  • Main menu screen. It usually contains the following options:
    1. Start Game
    2. High scores
    3. Settings
    4. About
    5. Exit
  • Each option in Main menu above, except “Exit”, launches its own screen. Thus to start your project you need to design those screens in advance in form of UI wire frame for example.

Game API we are going to use

Nokia Java Developer Library (JDL) is Java Platform, Micro Edition (Java ME) implementation on Nokia devices. Java ME can be seen as a set of standardized java interfaces that has to be implemented by mobile devices makers. Java application developer can abstract particular device implementation and focus only on the interface using. Mobile device specification lists supported java interfaces in form of JSR XXX referring to correspondent java interface standard. Nokia developer library for java describes how Nokia implements Java Me standards and provides recommendations for application design. It does not detail interfaces but rather tells you how to use it in Nokia devices. For a particular interface reference please use the original java standard document source : java.sun.com. We are going to use Game API Please get familiar yourself with how Game API should be used in Nokia mobile devices, what device capability are in user input and graphics supporting and what other libraries and tools are available on Nokia platforms (Series 40, S60) .

Device capability considerations

Use of scalable graphics is the best choice from point of view end result and required efforts. Unfortunately scalable vector graphics is not supported on all devices. The table below shows difference in low and high-level device capabilities in typical Series 40 device range:

Device capabilities N112 N311.png

Considering above, being able to support devices with different capabilities we need to use Java Reflection API that allows us to examine application runtime environment and choose appropriate class for instantiation.

Step-by-step game creation

Making application skeleton

  1. Go to main menu “File” -> “New project” on New project wizard dialog select application type “Java Me”, “Mobile application” and proceed until the master complete. Make sure you select Nokia SDK 1.1 for Java, CLDC 1.1 and MIDP 2.1 on "Default platform selection" step because the lowest device we are targeting is N110 that supports JSR 139 CLDC 1.1 and JSR 118 MIDP 2.1. On the last step please select Nokia SDK:S40 game creation step1.png
  2. Rename generated package and MIDlet. By default name is Hello because it generates Hello World example. You can easely alter name and all dependencies will be automatically updated. To rename right click on modified item. On pop-up menu select “Refactor” , then “rename”
  3. Add new project component “MIDP Canvas”.
  4. Change base class of new generated class from Canvas to GameCanvas. When altering the base class you will note Java compilation error. You can use hint next to the error to make fix by adding import, as it is show below:
    S40 game creation step4.png
    Still you will have error in the constructor because GameCanvas expects parameter that you have to provide.
  5. Adjust MIDPCanvas class creation with line in the constructor :
             super(false);
    that means you explicitly invoke base class, GameCanvas constructor, passing parameter false – for not suppressing Key Events -- details please find in GameCanvas javadoc. It should look like this:
         /**
    * constructor
    */

    public MIDPCanvas() {
    super(false);
    try {
    // Set up this canvas to listen to command events
    setCommandListener(this);
    // Add the Exit command
    addCommand(new Command("Exit", Command.EXIT, 1));
    } catch (Exception e) {
    e.printStackTrace();
    }
    }
  6. Build project make sure it builds successfully


Making GameCanvas accessible from the menu

That means when your application starts it will display some options to user. One of the options, for example, “Game start”, will instantiate and display GameCanvas. All game events will be happened on GameCanvas.

  1. Go to main menu “Tools” -> “Palette” and select “Mobility components”. On pop up dialog press “Add to palette” button. We are going to add GameCanvas to Visual Designer. Go through the Palette master and add you GameCanvas to the project palette.

    Note.pngNote: Perhaps you will stuck at this point because of a bug in NetBeans 7.1.2 : after adding custom component it does not appear on Palette pane. To avoid that problem just open “Tools” -> “Palette”, select “Mobility components” dialog once again and expand "Custom" component group. You should able to see you Canvas component in the group. After the grop content refreshing Canvas component appears in Palette pane under "Custom" category

  2. Open you MIDlet in Visual Designer and find GameCanvas under “Custom”. Drag and drop GameCanvas on the Flow diagram. Then drag and drop okCommand on “form”. Then connect “form” and GameCanvas. You should have the picture as it is shown below. On “Flow” diagram “form” represents main application form where you can place predefined commands from palette. When you connect command with GameCanvas that means on pressing Ok button or touching Ok button on touch screen will open GameCanvas.
    S40 game creation step2 2.png
  3. Add back command to GameCanvas view for user to be able to return back to main screen. Do it the same way as you dragged and dropped components in the previous step. At the end of this step you should see picture like it is shown below:
    S40 game creation step2 3.png
  4. Now you can try your app on device or emulator. To run on device you can find binaries in directory:
    <your_project>\dist

Taking out Game Builder on scene

On this document chapter we will create the game scene cover it tiled layer and create some sprite animation by using Game Builder. Game builder is very convenient tool to manage the application resources and composing artwork from already made pictures. Game Builder creation does not require coding so further you will see just series of screen shots. Let's start.

  1. Add Game Builder component to the project
    S40 rapid gamedev gamebuilder1.png
  2. In Game Builder create scene
    S40 rapid gamedev gamebuilder2.png
  3. On scene create layer:
    S40 rapid gamedev gamebuilder3.png S40 rapid gamedev gamebuilder4.png
    Just for start you can use already available resources in NetBeans installation, just press "Import image" button. That approach is acceptable for tutorial. Unleash your imagination and paint something nicer than i put on wiki.
  4. Add nice animation:
    S40 rapid gamedev gamebuilder5.png

Let's show something on device!

GameDesign objects initialization

GameDesign allows you visually create Scene, Layer, Sprites for your project as it is shown above in the document. It is nothing as a convenient class to keep art-work entities and provide interface for the object manipulation to client class LayerManager. To generate the objects initialization in the source code you need to build scene as it is shown on the picture below S40 scene building.png

Introducing LayerManager

Layer manager controls and draw game entities on screen. To do so it must instantiate GameDesign class and implement drawing method

    public void paint(Graphics g) {
try {
layoutManager.paint(g, 0, 0);
} catch (Exception ex) {
ex.printStackTrace();
}
}

That is all what you need to display your artwork on device. Please check "Game project STEP 1": File:S40 rapid gamedev step1.zip for the implementation details.

Adding game reacting on user input

Creating Thread for Game Loop

Note.pngNote:  GameCanvas makes its own thread. You do not need (and even shall not) create extra thread for game loop in your project. If you create separate game loop thread as it is suggested for Canvas , that will work but you end up with severe memory leaking. In java memory leaking means not releasing memory by garbage collector during application run time because references to objects that may be deleted are still reachable through new spawned objects. That is a nasty thing that makes your app broken after short time.

Note.pngNote: To watch for memory consumption during your application run, please use memory monitor available in Nokia emulator. It is reacheable in the emulator menu Tool --> Diagnostics.

Do it in several steps:

  1. Implement in your canvas class Runnable interface and provide public void run() method implementation.
  2. As it is mentioned game loop thread is created by GameCanvas and all you need here just to start and stop it. Use showNotify and hiddenNotify methods of Canvas base class to do so.

The whole implementation details please see in the project that corresponds this wiki article Game project STEP 2: File:S40 rapid gamedev step2.zip.

Note.pngNote: It is recommended to run the app on Nokia 110 or similar device that has navigation keys. So far the app does not support touch events

What is next?

A lot of things are left to do in the project to reach the product quality. You will need:

  1. Main menu implementation - check the wiki article in the series Game development for Series 40: Main menu implementation.
  2. Touch screen support - check the wiki article in the series "Game development for Series 40 : adding touch support"
  3. Different screen geometry support - is not relevant for selected game genre : adventure game can operate with fixed sized graphics on game play without quality loss because it is based on virtual game map that does not fit screen of any device.
  4. Different device capability support : by using the Reflection API we can obtain class instance information in run-time. If getting class information throws exception that means requested class does not exist in java environment, such way we can detect device capabilities. Please check "Supporting keypad-only devices" chapter in "Game development for Series 40 : adding touch support" article for details
  5. The game artificial intelligence that includes such common parts as :
    • Path finding algorithm -- commonly used A Star
    • Object collision algorithm

All listed above are too broad topics for one article. I hope i gave the idea and starting point for those who is newbie in Series 40 world. I am going to learn more and share my ideas with you next time.

Thanks for reading!

Summary

This wiki article is for those who has a creative idea, game story and wants to implement it right now not playing with technologies. By following this document step-by-step you can create application skeleton in one day. This article does not explain everything. Please consider it as a starting point and an approach in game development on Series 40 platform.

465 page views in the last 30 days.