Adding a Title Screen to a MIDlet

In a polished application, you usually want to display a title screen or splash screen before the user sees the main screen of the game or application. In this tutorial, we will build a simple application that demonstrates how to display a title screen.

First, we will create a Canvas class for our title screen. In the constructor, we will create an exit command, and save a reference to the MIDlet class, so that we can call into it when the exit command is invoked. We will also save a reference to the game screen, which will be the next screen to be displayed after the title screen.

In the paint() method, put the commands that will be used to draw the title screen. For this example, we will simply clear the background of the canvas, and display a centered string.

Lastly, we will add code to the keyPressed() method that will switch the display to the game screen when the fire button is pressed.

/*
 * TitleCanvas.java
 */

import javax.microedition.lcdui.*;

/**
 * The Canvas class for the title screen.
 */
public class TitleCanvas extends Canvas implements CommandListener {

    /**
     * Creates a new instance of TitleCanvas
     */
    public TitleCanvas(MyMIDlet midlet, Displayable next) {

        // Save a reference to the calling MIDlet for call-backs
        this.midlet = midlet;

        // Save a reference to the next screen, so that we can
        // show it after the title screen.
        this.next = next;

        // Create an Exit command
        exit = new Command("Exit", Command.EXIT, 1);
        addCommand(exit);
        setCommandListener(this);

    }

    public void commandAction(Command command, Displayable screen) {

        // Check for exit command
        if (command == exit) {
            midlet.destroyApp(false);
            midlet.notifyDestroyed();
        }

    }

    public void paint(Graphics g) {

        // Get dimensions
        int canvasWidth = getWidth();
        int canvasHeight = getHeight();

        // Clear background
        g.setColor(0x000000);
        g.fillRect(0, 0, canvasWidth, canvasHeight);

        // Draw title text
        Font titleFont = Font.getFont(
            Font.FACE_SYSTEM,
            Font.STYLE_BOLD,
            Font.SIZE_LARGE);

        g.setFont(titleFont);
        g.setColor(0xCC0000);
        g.drawString(
        "My Title Screen",
        canvasWidth / 2,
        canvasHeight / 4,
        Graphics.BASELINE | Graphics.HCENTER);

    }

    public void keyPressed(int keyCode) {

        // Get game action associated with key pressed
        int gameAction = getGameAction(keyCode);

        // Change from title screen to game screen
        if(gameAction == FIRE) {
            Display.getDisplay(midlet).setCurrent(next);
            return;
        }

    }

    // The calling MIDlet, for call-backs
    private static MyMIDlet midlet;

    // Screen to display after the title screen
    private static Displayable next;

    // Exit command
    private static Command exit;

}

Next, we’ll create the Canvas class for the game screen. For the purposes of this tutorial, we will use a placeholder canvas that simply displays a new string. I added stubs for the showNotify() and hideNotify() to demonstrate where, using this title-to-game screen model, you could conveniently put the start and stop logic for your main game thread.

/*
* GameCanvas.java
*/

import javax.microedition.lcdui.*;

/**
* The Canvas class for the main game screen.
*/
public class GameCanvas extends Canvas implements CommandListener {

    /** Creates a new instance of GameCanvas */
    public GameCanvas(MyMIDlet midlet) {
        // Save a reference to the calling MIDlet for call-backs
        this.midlet = midlet;

        // Create an Exit command
        exit = new Command("Exit", Command.EXIT, 1);
        addCommand(exit);
        setCommandListener(this);

    }

    public void commandAction(Command command, Displayable screen) {

        // Check for exit command
            if (command == exit) {
            midlet.destroyApp(false);
            midlet.notifyDestroyed();
        }

    }

    public void paint(Graphics g) {

        // Get dimensions
        int canvasWidth = getWidth();
        int canvasHeight = getHeight();

        // Clear background
        g.setColor(0x0000FF);
        g.fillRect(0, 0, canvasWidth, canvasHeight);

        // Draw title text
        Font titleFont = Font.getFont(
        Font.FACE_SYSTEM,
        Font.STYLE_BOLD,
        Font.SIZE_LARGE);

        g.setFont(titleFont);
        g.setColor(0xFFFFFF);
        g.drawString(
        "My Game Screen",
        canvasWidth / 2,
        canvasHeight / 4,
        Graphics.BASELINE | Graphics.HCENTER);

    }

    public void showNotify() {

        // This is where you could start a new game thread

    }

    public void hideNotify() {

        // This is where you would stop the game thread

    }

    private static MyMIDlet midlet;
    private static Command exit;

}

Lastly, we will create our MIDlet class. For the purposes of this demo, the MIDlet class simply creates and initializes the game canvas and title canvas.

/*
* MyMIDlet.java
*/

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

/**
* The MIDlet class.
*/
public class MyMIDlet extends MIDlet {

    public void startApp() {

        // Only initialize the first time the MIDlet is started
        if(display == null) {

            // Get display
            display = Display.getDisplay(this);

            // Initialize game canvas
            GameCanvas gameCanvas = new GameCanvas(this);

            // Initialize title canvas
            TitleCanvas titleCanvas = new TitleCanvas(this, gameCanvas);

            // Show title screen
            display.setCurrent(titleCanvas);

        }

    }

    public void pauseApp() {
    }

    public void destroyApp(boolean unconditional) {
    }

    // Data members
    private Display display;

}

Now compile and run the project. You should see the title screen, followed by the placehold game screen. You can now use this model as a starting point for your own projects.

The complete source code for the project described in this tutorial can be downloaded here: Source Code

Bookmark this Post

Leave a Reply