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

2019-11-18 16:15:14

字體：大中小

來源：轉載

供稿：網友

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

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

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

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

我們應該計算菜單的每個條目的高度，這些可以有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.LEFTGraphics.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.LEFTGraphics.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]);
    }

}