J2ME Canvas遊戲菜單開發實戰：從佈局到交互完整指南

高級UI vs 低級UI：技術選型

MIDP提供兩類UI：

• 高級UI：List、Form等，易用、可移植，但佈局由系統控制，定制能力弱
• 低級UI：Canvas+Graphics，繪製控制力強，可實現Tab菜單、多級菜單等自定義效果

本文採用Canvas+Graphics實現通用遊戲菜單。

核心設計要點

1. 自適應佈局計算

拒絕硬編碼座標，動態計算：

• 項目高度 = 字體高度 + 上下padding
• 菜單寬度 = 最長項目文本寬度 + 左右padding
• 菜單總高度 = 項目高度 × 項目數
• 屏幕居中：x = (屏寬 - 菜單寬)/2, y = (屏高 - 菜單高)/2

2. 焦點管理機制

高級UI自動處理焦點，Canvas需手動實現：

• 用selected索引記錄當前焦點項目
• keyPressed()處理上下鍵循環切換
• 重繪時高亮顯示選中項

完整實現代碼

package com.j2medev.chapter3;
import javax.microedition.lcdui.*;

public class MenuCanvas extends Canvas {
    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", "Settings", "High Scores", "Exit"};

    public MenuCanvas() {
        // 計算項目尺寸
        Font font = Font.getDefaultFont();
        for (String label : LABELS) {
            int w = font.stringWidth(label);
            if (w > preferWidth) preferWidth = w;
        }
        preferWidth += 16;  // 左右padding 8+8
        preferHeight = font.getHeight() + 8; // 上下padding 4+4
    }

    protected void paint(Graphics g) {
        // 清屏
        int bgColor = 0xFFFFFF;
        g.setColor(bgColor);
        g.fillRect(0, 0, getWidth(), getHeight());
        
        // 計算菜單區域
        int menuWidth = preferWidth;
        int menuHeight = preferHeight * LABELS.length;
        int x = (getWidth() - menuWidth) / 2;
        int y = (getHeight() - menuHeight) / 2;
        
        // 繪製邊框與分隔線
        g.setColor(0x000000);
        g.drawRect(x, y, menuWidth, menuHeight);
        for (int i = 1; i < LABELS.length; i++) {
            g.drawLine(x, y + preferHeight * i, x + menuWidth, y + preferHeight * i);
        }
        
        // 繪製項目文本與選中高亮
        for (int i = 0; i < LABELS.length; i++) {
            if (selected == i) {
                g.setColor(0x6699CC); // 高亮背景色
                g.fillRect(x + 1, y + i * preferHeight + 1, menuWidth - 1, preferHeight - 1);
                g.setColor(0x000000);
            }
            g.drawString(LABELS[i], x + 8, y + i * preferHeight + 4, 
                        Graphics.LEFT | Graphics.TOP);
        }
    }

    protected void keyPressed(int keyCode) {
        int action = getGameAction(keyCode);
        switch (action) {
            case Canvas.FIRE:
                System.out.println("選中: " + LABELS[selected]);
                break;
            case Canvas.DOWN:
                selected = (selected + 1) % LABELS.length;
                break;
            case Canvas.UP:
                selected = (selected - 1 + LABELS.length) % LABELS.length;
                break;
        }
        repaint();
        serviceRepaints();
    }

    protected void showNotify() {
        System.out.println("showNotify() called");
    }
}

關鍵技術解析

擴展建議

• 動畫效果：選中項添加閃爍、滑動過渡
• 多級菜單：引入菜單棧管理子菜單進出
• 圖標支持：drawImage()繪製項目前圖標
• 觸屏適配：pointerPressed()處理點擊座標判斷

總結

Canvas菜單開發核心在於幾何計算自適應與狀態驅動繪製。掌握paint()繪製邏輯與keyPressed()交互邏輯的分離協作，即可構建專業級J2ME遊戲界面。