J2ME Canvas 自繪遊戲選單完整實作指南

高階 vs 低階 UI 選擇

MIDP GUI 分為高階（Form、List、TextBox）與低階（Canvas、Graphics）。高階易用、跨平台一致，但外觀受系統控制；低階掌控力強、可自訂繪圖邏輯，適合遊戲選單、特效介面。

Canvas 選單設計兩大核心課題

1. 相對座標計算：適配多解析度

• 項目高度 = 字體高度 + 上下內距
• 選單寬度 = 最長項目文字寬度 + 左右內距
• 選單總高 = 項目高 × 項目數
• 選單置中座標：x = (螢幕寬 - 選單寬) / 2、y = (螢幕高 - 選單高) / 2

2. 焦點管理：自行處理選中狀態

• 用 int selected 記錄當前選中索引
• keyPressed() 判斷方向鍵，更新 selected 並 repaint()
• 繪製時依 selected 繪製高亮背景

完整 MenuCanvas 原始碼

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 String[] LABELS = {"新遊戲", "設定", "排行榜", "離開"};

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

    protected void paint(Graphics g) {
        // 保存原顏色
        int oldColor = g.getColor();

        // 清屏
        g.setColor(0xFFFFFF);
        g.fillRect(0, 0, getWidth(), getHeight());
        g.setColor(oldColor);

        // 計算選單矩形區域
        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);
        }

        // 繪製項目文字與高亮
        for (int j = 0; j < LABELS.length; j++) {
            int itemY = y + j * preferHeight;
            if (selected == j) {
                // 高亮背景
                g.setColor(0x6699CC);
                g.fillRect(x + 1, itemY + 1, rectWidth - 1, preferHeight - 1);
                g.setColor(oldColor);
            }
            // 文字置中偏左繪製
            g.drawString(LABELS[j], x + 8, itemY + 4, Graphics.LEFT | Graphics.TOP);
        }
    }

    protected void keyPressed(int keyCode) {
        int action = getGameAction(keyCode);
        switch (action) {
            case Canvas.FIRE:
                handleSelection(selected);
                break;
            case Canvas.DOWN:
                selected = (selected + 1) % LABELS.length;
                break;
            case Canvas.UP:
                selected = (selected - 1 + LABELS.length) % LABELS.length;
                break;
        }
        repaint();
        serviceRepaints(); // 立即刷新
    }

    private void handleSelection(int index) {
        System.out.println("選擇: " + LABELS[index]);
        // 實際專案中轉場至對應畫面
    }

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

關鍵 API 對照表

進階擴展建議

• 動畫效果：高亮背景漸變、項目滑入/滑出、選中項目縮放
• 觸控支援：實作 pointerPressed(x, y) 判斷點擊區域
• 主題系統：將顏色、字體、內距抽離為 Theme 物件，支援換膚
• 資源預載：背景圖、字型在建構子或 showNotify() 載入
• 無障礙：提供語音提示、高對比度模式