J2ME 遊戲角色移動實現：Canvas、Thread 與關鍵幀動畫完整解析

核心架構概覽

本範例展示 J2ME 遊戲中角色移動的經典實現：MIDlet 主類 + Canvas 繪製介面 + Thread 動畫執行緒 + 關鍵幀圖片切換。完整代碼約 150 行，涵蓋按鍵處理、狀態機、雙緩衝繪製等核心技巧。

關鍵類別職責

核心代碼解析

1. 圖片載入與資源管理

Image actor = Image.createImage("/actor.png"); // 從 JAR 內載入精靈圖

使用 try-catch 包裹，防止資源遺失導致崩潰。精靈圖為單張大圖，包含四個方向 × 多幀動作。

2. 按鍵映射與狀態機

int gameKey = getGameAction(keyCode);
switch (gameKey) {
    case UP:    walkActor = 1; break; // 向上
    case DOWN:  walkActor = 2; break; // 向下
    case LEFT:  walkActor = 3; break; // 向左
    case RIGHT: walkActor = 4; break; // 向右
}
goactor = new goActor();
goactor.start();

walkActor 作為方向狀態碼，啟動動畫執行緒 goActor。

3. 關鍵幀繪製邏輯 (paint 方法)

g.setColor(0xffffff);
g.fillRect(0, 0, 180, 177); // 清背景
for (int j = 0; j < 4; j++) {
    g.translate(getWidth()/2 - 16 + goX - moveX, getHeight()/2 + goY + j*2 - 64);
    g.setClip(moveX, j*32, 32, 32); // 裁剪單一幀
    g.drawImage(actor, 0, 0, Graphics.LEFT | Graphics.TOP);
    g.translate(-getWidth()/2 + 16 - goX + moveX, -getHeight()/2 - goY - j*2 + 64);
    g.setClip(0, 0, 180, 177);
}

• translate：移動繪圖原點，實現角色位置偏移
• setClip：裁剪區域，從精靈圖截取 32×32 單一幀
• 迴圈 j < 4：依方向繪製四組動作序列（視覺上呈現動畫）

4. 動畫執行緒逐幀邏輯 (goActor.run)

for (int i = 0; i < 3; i++) {
    if (walkActor == 1) { goY -= 10; moveX = 5*32; }      // 上
    else if (walkActor == 2) { goY += 10; moveX = 0; }    // 下
    else if (walkActor == 3) { goX -= 10; moveX = (i==2)?0:(i+1)*32; } // 左
    else if (walkActor == 4) { goX += 10; moveX = (i==2)?0:(i+3)*32; } // 右
    repaint();
    Thread.sleep(500);
}
goX = goY = moveX = 0;
repaint(); // 歸位

三幀循環（i=0,1,2），每幀位移 10 像素，moveX 控制精靈圖水平裁剪位置，實現腳步動畫。結束時重置座標。

效能優化建議

• 物件池：避免頻繁 new Thread()，重用動畫執行緒
• 雙緩衝：Canvas 預設雙緩衝，但大量繪製時可手動管理 Image 緩衝
• 精靈圖合併：減少 createImage 呼叫，降低記憶體碎片
• 固定時間步長：使用 System.currentTimeMillis() 計算 delta time，替代固定 sleep

結語

此範例雖簡單，卻蘊含 J2ME 遊戲開發的精髓：有限資源下的狀態管理、繪圖管線控制、執行緒同步。掌握此模式，可輕鬆擴展至複雜角色、敵人 AI、場景切換等進階系統。