Game Programming Crash Course (for J2ME): Background

Koder & Ko logo
 
 
Home | Tools Setup | MIDlet | Background | Sprites | Collision Detection | User Input | Artificial Intelligence | Optimization
 
 
Koder & Ko

J2ME Tutorial
 

Since this course is based around a Pong game, it should be no surprise that painting the background is quite easy. We want it all black. If you run the MIDlet as it is right now, you'll probably just see a white empty space in the emulator.

To paint the background black, we must add the following code snippets to the PongCanvas class.

import javax.microedition.lcdui.Graphics;

This imports the Graphics class. The official documentation says: "The Graphics class is the abstract base class for all graphics contexts that allow an application to draw onto components that are realized on various devices, as well as onto off-screen images." This sounds like just what we need.

private void createBackground(Graphics g) { g.setColor(0x000000); g.fillRect(0, 0, getWidth(), getHeight()); }

This new method is used to paint the background black. It requires a Graphics object (g). It then takes g and sets the color to black (0x000000), and then it use fillRect to "Fill Rectangle". The parameters are fillRect(startX, startY, Width, Height). We want it to paint from the top left corner of the screen (0, 0), and to fill it all we use getWidth() and getHeight() to get the width and the height of the canvas.

public void updateScreen(Graphics g) { createBackground(g); flushGraphics(); }

The updateScreen method is also a new method. It will be used for updating various items on the screen in the game. For now all it does it to call the createBackground() method and the flushGraphics() method. We use flushGraphics() to tell J2ME that it should paint the current Graphics on the screen (as you might recall, J2ME handles all double-buffering for us).

while(true) { updateScreen(getGraphics()); // Added try { Thread.sleep(sleepTime); } catch (Exception e) { } }

Finally we add a call to the updateScreen() method in the run() method. The parameter used is getGraphics() which return the context of the current Graphics, that is, our game canvas. As you can see, the updateScreen is called continuously, which is exactly what we want since it is then continously updated (which makes sense when we add objects to the screen).

With these changes, our code should now look something like this.

package dk.koderko.games.pong; import javax.microedition.lcdui.game.GameCanvas; import javax.microedition.lcdui.Graphics; public class PongCanvas extends GameCanvas implements Runnable { public PongCanvas() { super(false); } public void run() { while(true) { updateScreen(getGraphics()); try { Thread.sleep(sleepTime); } catch (Exception e) { } } } public void start() { Thread runner = new Thread(this); runner.start(); } private void createBackground(Graphics g) { g.setColor(0x000000); g.fillRect(0, 0, getWidth(), getHeight()); } private void updateScreen(Graphics g) { createBackground(g); flushGraphics(); } private int sleepTime = 30; }

The Result

I suggest you try to run the code in an emulator, to see the screen is black when you launch the game. Go to the "Run" menu and press "Run". If you get a dialog box where it asks you to "Select a way to run Pong", press "Cancel", and click the "Pong.java" document tab (so it becomes active) and then go to "Run" > "Run" again. You will have to remember this every time you want to run the emulator.

Emulator Background

Next Page: We get to move something (sprites) on the screen

 
 
 

Call +45 2078 7221 or write ave at koderko.dk

Koder & Ko | Nordre Fasanvej 166 | 2000 Frederiksberg | Denmark