The Splash Screen

To add that finishing touch to your game, you'll add what's called a splash screen. This screen really just serves to reinforce to the user what they've done (selected your game) and to get some hype going.

The splash screen is the first thing the player sees in your game, so make it pretty flashy. In fact, I recommend you spend quite a bit of time and resources on making the splash screen look downright sexy. Players have learned that good games start with really cool splash screens; it's just a sign of quality. If you put up a good front image, players will be willing to spend more time getting to know your game. The splash screen is also the strongest image you'll present of your game in any promotional activity (such as on a Web site).

For Star Assault you'll make an animated splash screen by drawing a title graphic and then scrolling your star field in the background. To do this, you need much of the functionality you've already seen in the GameScreen class. In fact, you can think of the splash screen as a mini-game in itself.

The Splash class needs to initialize the graphics and then, using a thread, render it and the star field until a key is pressed.

public class Splash extends Canvas implements Runnable
{
    private boolean running = true;
    private Image osb;   // Off screen buffer image
    private Graphics osg;   // graphics context for the off screen buffer
    private StarAssault theMidlet;
    private int starFieldViewY;
    private Image title;
    private int fontHeight;
    private Font font;

    public Splash(StarAssault midlet)
    {
        theMidlet = midlet;
        initResources();

        // create the timer thread
        Thread t = new Thread(this);
        t.start();
    }

The initResources method creates an off-screen buffer for rendering and then loads up the splash screen image.

private void initResources()
{
    // set up the screen
    osb = Image.createImage(getWidth(), getHeight());
    osg = osb.getGraphics();

    title = ImageSet.loadClippedImage("/splash.png", 0, 0);
    font = Font.getFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_SMALL);
    fontHeight = font.getHeight() + 2;

    osg.setFont(font);
}

private static final int MAX_CPS = 100;
private static final int MS_PER_FRAME = 1000 / MAX_CPS;

public void run()
{
    try
    {
        while (running)
        {
            // remember the starting time
            long cycleStartTime = System.currentTimeMillis();
            // do our work
            repaint();

            // sleep if we've finished our work early
            long timeSinceStart = (cycleStartTime - System.currentTimeMillis());
            if (timeSinceStart < MS_PER_FRAME)
            {
                try
                {        
                    Thread.sleep(MS_PER_FRAME - timeSinceStart);
                }
                catch (java.lang.InterruptedException e)
                {
                }
            }
        }

        // fall back to the splash form at the end of our loop
        theMidlet.activateMenu();
    }
    catch (Exception e)
    {
        System.out.println("App exception: " + e);
        e.printStackTrace();
    }

}

This method renders the splash screen graphics to the screen. You can easily customize this to suit your own game requirements.

    private void renderSplash()
    {
        // clear the background
        osg.setColor(0);
        osg.fillRect(0, 0, getWidth(), getHeight());

        // draw a moving star field
        if (starFieldViewY++ > 128) starFieldViewY = 0;
        Tools.drawStarField(osg, 0, starFieldViewY, getWidth(), getHeight());

        osg.drawImage(title, getWidth() / 2, getHeight() / 2 - 10, Graphics.HCENTER |
Graphics.VCENTER);
        // draw text
        osg.setColor(0x00888888);
        osg.drawString("(C) 2003", getWidth() / 2, getHeight() - fontHeight * 3,
                        Graphics.HCENTER | Graphics.TOP);
        osg.drawString("Martin J. Wells", getWidth() / 2, getHeight() - fontHeight * 2,
                        Graphics.HCENTER | Graphics.TOP);
        // draw the copy line
        osg.setColor(0x00ffffff);
        osg.drawString("Press any key", getWidth() / 2, getHeight() - fontHeight * 1,
                        Graphics.HCENTER | Graphics.TOP);
    }

    protected void paint(Graphics graphics)
    {
        renderSplash();
        graphics.drawImage(osb, 0, 0, Graphics.LEFT | Graphics.TOP);
    }

    protected void keyPressed(int keyCode)
    {
        running = false;
    }
}

To use this class you need to change the MIDlet, so the first thing you do is construct the splash screen and set the currentDisplay field.

public StarAssault()
{
    ...

    currentDisplay = new Splash(this);

Keep in mind that it's the startApp method that gets the game going. You might recall this method; you use it to switch the display to whatever currentDisplay is pointing at. This will now be the splash screen.

public void startApp() throws MIDletStateChangeException
{
    activateDisplayable(currentDisplay);

    ...
}

You can easily add a timer as well as multiple screens without too much trouble. Often you can use the first screen to promote your company (or yourself) and then, after a few seconds, flip to the game graphics. I'll leave implementing that one up to you.