Midlet and GameConvas 2

Tutorial 8: Midlet and GameConvas 2

Overview on this Tutorial:

1. Displaying image in the screen (ImageMIDlet.java)

2. Printing a board of squares (SquareMIDlet.java)

3. Handling key Events (KeyEvent.java)

Displaying image in the screen (ImageMIDlet.java):

1. In the example, to define an image object, we have:

private Image ustLogo;

2. In the example, to create the image object, we have:

ustLogo = Image.createImage("/logo.png");

3. In the example, to display the image which is simlar to draw a string, we have:

g.drawImage(ustLogo, getWidth()/2, getHeight()/2, g.VCENTER | g.HCENTER );

where "g" is an object of "Graphics".

4. To run the program, you have to download the image logo.png and store in the same directory with the .class files (such as C:\WTK22\apps\ImageMIDlet\classes).

Printing a board of squares (SquareMIDlet.java):

1. Recall the function "fillRect" of class "Graphics":

fillRect(<x-coordinate>, <y-coordinate>, <width>, <height>);

2. We now want to print a board of squares with length 12 pixels. The squares are seperated by space is size 2 pixels.

3. Recall the coorinate system used in Java is as follows:

-------->x
|
|
|
|
v
y

4. The following codes can give you the number of horizontal blocks in a row and the number of vertical blocks a column:

int hTemp=bWidth-SPACE-MIN_MARGIN;
int vTemp=bHeight-SPACE-MIN_MARGIN;

numOfHBlock = hTemp / (BLK_SIZE+SPACE);
numOfVBlock= vTemp / (BLK_SIZE+SPACE);

5. So the total number of squares to be displace is: "numOfHBlock" times "numOfVBlock".

6. We have to use a nested for-loop to draw the squares:

posY = SPACE + vMargin;
for(int i=0; i<numOfVBlock; i++) {
    posX = SPACE + hMargin;
    for(int j=0; j<numOfHBlock; j++) {
        g.fillRect(posX,posY,BLK_SIZE,BLK_SIZE);
        posX += BLK_SIZE+SPACE;
    }
    posY += BLK_SIZE+SPACE;
}

Handling key Events (KeyEvent.java):

1. The GameConvas class is already designed to listen "key Events", to handle the event, we have to implement the funtion "keyPressed(keyCode)".

2. A key event is drawn when the user presses a key, the function "keyPressed" will be called.

3. The information of which key the user pressed is passed by the parameter "keyCode".

4. The example have shown how to distinguish the key pressed:

message="";

switch(keyCode) {
    case KEY_NUM1: message+="Key 1 is pressed. "; break;
    case KEY_NUM2: message+="Key 2 is pressed. "; break;
    case KEY_NUM3: message+="Key 3 is pressed. "; break;
    case KEY_NUM4: message+="Key 4 is pressed. "; break;
    case KEY_NUM5: message+="Key 5 is pressed. "; break;
    case KEY_NUM6: message+="Key 6 is pressed. "; break;
    case KEY_NUM7: message+="Key 7 is pressed. "; break;
    case KEY_NUM8: message+="Key 8 is pressed. "; break;
    case KEY_NUM9: message+="Key 9 is pressed. "; break;
}

switch(getGameAction(keyCode)) {
    case Canvas.FIRE: message+="Key \"FIRE\" is pressed. "; break;
    case Canvas.UP: message+="Key \"UP\" is pressed. "; break;
    case Canvas.DOWN: message+="Key \"Down\" is pressed. "; break;
    case Canvas.RIGHT: message+="Key \"Right\" is pressed. "; break;
    case Canvas.LEFT: message+="Key \"LEFT\" is pressed. "; break;
}
repaint();

5. In order to force the system to call the paint function, we have to call "repaint()".