GameCanvas 實戰：高性能星空滾動特效與雙緩衝渲染管線解析

效果預覽

利用 Graphics.copyArea() 實現垂直方向無限星空滾動，支持上下鍵動態調整滾動速度，展示 GameCanvas 雙緩衝、離屏渲染、showNotify/hideNotify 生命週期管理的最佳實踐。

核心技術點

1. copyArea 滾動：將離屏緩衝內容向下平移 1 像素，僅需繪製新增的頂行像素，極低 CPU 佔用
2. 隨機星點生成：每幀頂行以 5% 概率生成白色像素，模擬星星閃爍
3. 速度自適應：上下鍵調整 sleepTime (幀間隔)，實現滾動加速/減速
4. 生命週期綁定：showNotify 啟動線程，hideNotify 安全停止，避免資源洩漏

完整源碼解析

1. 星空畫布類 (StarField)

public class StarField extends GameCanvas implements Runnable {
    // 配置常量
    private static final int SLEEP_INITIAL = 150; // 初始幀間隔 ms
    private static final int SLEEP_INCREMENT = 10; // 調速步長
    private static final int SLEEP_MAX = 300;      // 最大間隔 (最慢)
    
    // 運行時狀態
    private Graphics graphics;      // 離屏緩衝 Graphics
    private Random random;          // 隨機數生成器
    private int sleepTime = SLEEP_INITIAL;
    private volatile Thread thread; // 遊戲線程引用
    
    public StarField() {
        super(true); // 啟用雙緩衝，抑制系統按鍵事件
        graphics = getGraphics();
        // 初始化全黑背景
        graphics.setColor(0, 0, 0);
        graphics.fillRect(0, 0, getWidth(), getHeight());
    }
    
    // 遊戲主循環
    public void run() {
        int w = getWidth();
        int h = getHeight() - 1; // 留 1 像素給 copyArea 目標區
        
        while (thread == Thread.currentThread()) {
            // 1. 輸入處理：上下鍵調速
            int state = getKeyStates();
            if ((state & DOWN_PRESSED) != 0) { // 加速 (縮短間隔)
                sleepTime -= SLEEP_INCREMENT;
                if (sleepTime < 0) sleepTime = 0;
            } else if ((state & UP_PRESSED) != 0) { // 減速 (延長間隔)
                sleepTime += SLEEP_INCREMENT;
                if (sleepTime > SLEEP_MAX) sleepTime = SLEEP_MAX;
            }
            
            // 2. 滾動渲染核心
            // 將 (0,0) 到 (w, h) 區域向下平移 1 像素
            graphics.copyArea(0, 0, w, h, 0, 1, Graphics.TOP | Graphics.LEFT);
            
            // 清空新增的頂行 (y=0)
            graphics.setColor(0, 0, 0);
            graphics.drawLine(0, 0, w, 0);
            
            // 在頂行隨機繪製白色星點
            graphics.setColor(255, 255, 255);
            for (int i = 0; i < w; i++) {
                if ((Math.abs(random.nextInt()) % 100) < 5) { // 5% 概率
                    graphics.drawLine(i, 0, i, 0); // 單像素點
                }
            }
            
            // 3. 翻屏顯示 (阻塞等待 VSync)
            flushGraphics();
            
            // 4. 幀率控制
            try {
                Thread.sleep(sleepTime);
            } catch (InterruptedException e) {
                // 線程被中斷 (hideNotify 設置 thread=null) 自然退出循環
                break;
            }
        }
    }
    
    // Canvas 顯示時自動調用：啟動遊戲線程
    protected void showNotify() {
        random = new Random();
        thread = new Thread(this);
        thread.start();
    }
    
    // Canvas 隱藏時自動調用：安全停止線程
    protected void hideNotify() {
        thread = null; // run() 循環條件失效，線程自然結束
    }
}

2. MIDlet 啟動類

public class GameCanvasTest extends MIDlet implements CommandListener {
    private Display display;
    private static final Command EXIT_CMD = new Command("Exit", Command.EXIT, 1);
    
    public GameCanvasTest() {}
    
    public void commandAction(Command c, Displayable d) {
        if (c == EXIT_CMD) exitMIDlet();
    }
    
    protected void destroyApp(boolean unconditional) throws MIDletStateChangeException {
        exitMIDlet();
    }
    
    public void exitMIDlet() {
        notifyDestroyed();
    }
    
    public Display getDisplay() { return display; }
    
    protected void initMIDlet() {
        GameCanvas canvas = new StarField();
        canvas.addCommand(EXIT_CMD);
        canvas.setCommandListener(this);
        getDisplay().setCurrent(canvas);
    }
    
    protected void pauseApp() {}
    
    protected void startApp() throws MIDletStateChangeException {
        if (display == null) {
            display = Display.getDisplay(this);
            initMIDlet();
        }
    }
}

關鍵 API 深度解析

Graphics.copyArea(int srcX, int srcY, int w, int h, int dx, int dy, int anchor)

• 將離屏緩衝中 (srcX, srcY) 寬 w 高 h 的矩形區域，平移 (dx, dy) 像素繪製到同一緩衝區
• anchor 定義源矩形參考點：TOP|LEFT 表示源矩形左上角對齊
• **硬件加速**：多數 MIDP 2.0 實現會映射到顯存 Blit 操作，極快 (單幀 < 1ms)
• **注意**：源區域與目標區域重疊時行為未定義，本例源 y=0..h-1 目標 y=1..h 重疊，但向下平移通常安全

showNotify() / hideNotify() 生命週期

**優於 MIDlet pauseApp/startApp**：針對單個 Canvas，精準控制該畫面資源生命週期。

性能分析與優化

CPU 佔用估算

• copyArea：~0.5ms (硬件 Blit)
• 頂行清空 + 星點繪製：~0.2ms (176 寬度 × 5% ≈ 9 次 drawLine)
• flushGraphics：~1-2ms (等待 VSync)
• 總計 < 3ms/幀，在 20ms 幀預算中佔比 < 15%，極其輕量

優化建議

1. 星點預生成：離線生成多幀星點位圖，運行時直接 drawImage 批次繪製，消除循環分支
2. 多層視差：創建 2-3 個 StarField 實例，不同 sleepTime、不同顏色/大小，疊加渲染
3. 自適應幀率：根據 flushGraphics 返回耗時動態調整 sleepTime，維持穩定 FPS
4. 內存復用：Random、Graphics 單例復用，零 GC

擴展應用場景

總結

StarField 示例以 < 50 行核心代碼展示了 GameCanvas 的精髓：

• 離屏緩衝 + copyArea 實現極低成本大區域位移
• 隨機程序生成 替代美術資源，包體極小
• 生命週期綁定 保證資源隨畫面啟停，零洩漏
• 輸入驅動參數 讓玩家感知「可控的技術演示」

這種「算法特效」思維在 J2ME 受限環境下尤為寶貴，同樣適用於現代 WebGL/Canvas 2D/小遊戲引擎的特效層開發。