J2ME中使用Canvas制作簡單的游戲菜單

我們知道MIDP的圖形用戶界面分為兩類，分別是高級圖形用戶界面和低級用戶界面。一般來講高級圖形用戶界面類使用起來比較方便，可移植性強，但是程序員對他的控制能力也很低，因為它們的界面表現是由底層控制的，而不是我們控制的。相比高級UI類，低級UI類則使用起來更難一些，但是控制能力更強，可以做出自己需要的界面。

Canvas和Graphics是我們必須熟練使用的兩個類，分別代表了畫布和畫筆（事實上更豐富，姑且這麼比喻）。而我們則是畫畫的人，而指導我們如何下筆的就是java doc了，再加上勤奮努力一定可以畫出不錯的界面。比如tabbed菜單，二級菜單等。這裡我們講述一個簡單菜單的制作方式。

在畫菜單的時候，需要考慮兩面的問題，第一是計算相對位置，讓菜單能夠盡可能適應更多的機型，盡量少使用絕對值。例如畫下面的菜單的時候

我們應該計算菜單的每個條目的高度，這些可以有Font的高度算出，當然你可以給條目留一些padding的距離。還應該計算條目的最寬值，畢竟每個條目的字數不一樣。這樣基本知道了整個菜單占的空間。最後還需要計算菜單在屏幕的位置。菜單的繪制如下所示：

public void paint(Graphics g){
//清除屏幕
int color = g.getColor();
g.setColor(0xFFFFFF);
g.fillRect(0,0,getWidth(),getHeight());
g.setColor(color);
//計算整個菜單的高度，寬度和（x,y）
int rectWidth = preferWidth;
int rectHeight = preferHeight * LABELS.length;
int x = (getWidth()-rectWidth)/2;
int y = (getHeight()-rectHeight)/2;
//畫矩形
g.drawRect(x,y,rectWidth,rectHeight);
for(int i = 1;i<LABELS.length;i++){
g.drawLine(x,y+preferHeight*i,x+rectWidth,y+preferHeight*i);
}
//畫菜單選項，並根據selected的值判斷焦點
for(int j = 0;j<LABELS.length;j++){
if(selected == j){
g.setColor(0x6699cc);
g.fillRect(x+1,y+j*preferHeight+1,rectWidth-1,preferHeight-1);
g.setColor(color);
}
g.drawString(LABELS[j],x+8,y+j*preferHeight+4,Graphics.LEFT|Graphics.TOP);
}
}

第二個重要的問題是：焦點的切換，在高級UI類中，這是不需要我們處理的。但是使用Canvas制作菜單需要自己來處理焦點的移動，這裡我們定義一個int類型變量selected，來記錄焦點所在的菜單條目位置,也就是選擇的索引。當用戶按鍵的時候，我們在keyPressed()方法中判斷用戶的移動方向，對selected進行相關的加減運算，然後repaint()整個屏幕即可。

public void keyPressed(int keyCode){
//根據用戶輸入更新selected的值，並重新繪制屏幕
int action = this.getGameAction(keyCode);
switch(action){
case Canvas.FIRE:
printLabel(selected);
break;
case Canvas.DOWN:
selected = (selected+1)%4;
break;
case Canvas.UP:{
if(--selected < 0){
selected+=4;
}
break;
}
default:
break;
}
repaint();
serviceRepaints();
}

這樣我們就制作出了一個基本的菜單，你還可以發揮想象給被選中的菜單增加動畫效果。MenuCanvas的代碼如下所示：

package com.j2medev.chapter3;
import javax.microedition.lcdui.*;
public class MenuCanvas extends Canvas{
//selected變量標記了焦點位置
private int selected = 0;
private int preferWidth = -1;
private int preferHeight = -1;
public static final int[] OPTIONS = {0,1,2,3};
public static final String[] LABELS={"New Game","Setttings","High Scores","Exit"};
public MenuCanvas() {
selected = OPTIONS[0];
//計算菜單選項的長度和高度值
Font f = Font.getDefaultFont();
for(int i = 0;i<LABELS.length;i++){
int temp = f.stringWidth(LABELS[i]);
if(temp > preferWidth){
preferWidth = temp;
}
}
preferWidth = preferWidth + 2*8;
preferHeight = f.getHeight()+2*4;
}
public void paint(Graphics g){
//清除屏幕
int color = g.getColor();
g.setColor(0xFFFFFF);
g.fillRect(0,0,getWidth(),getHeight());
g.setColor(color);
//計算整個菜單的高度，寬度和（x,y）
int rectWidth = preferWidth;
int rectHeight = preferHeight * LABELS.length;
int x = (getWidth()-rectWidth)/2;
int y = (getHeight()-rectHeight)/2;
//畫矩形
g.drawRect(x,y,rectWidth,rectHeight);
for(int i = 1;i<LABELS.length;i++){
g.drawLine(x,y+preferHeight*i,x+rectWidth,y+preferHeight*i);
}
//畫菜單選項，並根據selected的值判斷焦點
for(int j = 0;j<LABELS.length;j++){
if(selected == j){
g.setColor(0x6699cc);
g.fillRect(x+1,y+j*preferHeight+1,rectWidth-1,preferHeight-1);
g.setColor(color);
}
g.drawString(LABELS[j],x+8,y+j*preferHeight+4,Graphics.LEFT|Graphics.TOP);
}
}
public void keyPressed(int keyCode){
//根據用戶輸入更新selected的值，並重新繪制屏幕
int action = this.getGameAction(keyCode);
switch(action){
case Canvas.FIRE:
printLabel(selected);
break;
case Canvas.DOWN:
selected = (selected+1)%4;
break;
case Canvas.UP:{
if(--selected < 0){
selected+=4;
}
break;
}
default:
break;
}
repaint();
serviceRepaints();
}
//showNotify()在paint()之前被調用
public void showNotify(){
System.out.println("showNotify() is called");
}
private void printLabel(int selected){
System.out.println(LABELS[selected]);
}
}