J2ME 運行時圖片分割：將大圖切割為精靈陣列的工具類實作

遊戲開發常需將一張包含多個精靈的大圖（Sprite Sheet）在運行時切割為獨立 Image 陣列。本文提供通用 ImageUtil.splitImage() 工具方法，利用 Graphics.translate() 與 drawImage() 實現高效分割。

核心工具類

package com.j2medev.image;

import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;

public class ImageUtil {
    /**
     * 將圖片分割為 rows x cols 陣列（一維儲存，行優先）
     * @param img 來源圖片
     * @param rows 行數
     * @param cols 列數
     * @return Image[] 長度為 rows*cols，若輸入無效回傳 null
     */
    public static Image[] splitImage(Image img, int rows, int cols) {
        if (img == null) return null;

        Image[] result = new Image[rows * cols];
        int tileW = img.getWidth() / cols;
        int tileH = img.getHeight() / rows;

        for (int i = 0; i < result.length; i++) {
            result[i] = Image.createImage(tileW, tileH);
            Graphics g = result[i].getGraphics();
            // 平移座標系：將來源圖片對應區域移至 (0,0)
            g.translate(-(i % cols) * tileW, -(i / cols) * tileH);
            g.drawImage(img, 0, 0, Graphics.LEFT | Graphics.TOP);
        }
        return result;
    }
}

原理解析

1. 計算單元尺寸：tileW = 總寬/cols、tileH = 總高/rows
2. 建立目標 Image：每個小圖建立對應尺寸的可變動 Image
3. 座標平移：translate(-col*tileW, -row*tileH) 將來源圖片的目標區域對齊到 (0,0)
4. 繪製截取：drawImage(img, 0, 0, ...) 在新座標系下相當於截取對應區域

測試 MIDlet

public class ImageMIDlet extends MIDlet {
    protected void startApp() {
        Display display = Display.getDisplay(this);
        Image img = null;
        try { img = Image.createImage("/test.png"); }
        catch (IOException ex) {
            display.setCurrent(new Form("錯誤").append("無法載入圖片"));
            return;
        }
        display.setCurrent(new ImageCanvas(img));
    }
    // pauseApp, destroyApp 略...
}

class ImageCanvas extends Canvas {
    private Image img;

    public ImageCanvas(Image img) { this.img = img; }

    public void paint(Graphics g) {
        // 白底
        g.setColor(0xFFFFFF);
        g.fillRect(0, 0, getWidth(), getHeight());

        // 原圖顯示
        g.drawImage(img, 0, 0, Graphics.LEFT | Graphics.TOP);

        // 分割後顯示（加間距方便觀察）
        int gap = 2;
        int distance = img.getHeight() + 6;
        Image[] sprites = ImageUtil.splitImage(img, 3, 4);  // 3行4列

        if (sprites != null) {
            for (int r = 0; r < 3; r++) {
                for (int c = 0; c < 4; c++) {
                    Image sprite = sprites[r * 4 + c];
                    int x = c * (sprite.getWidth() + gap);
                    int y = distance + r * (sprite.getHeight() + gap);
                    g.drawImage(sprite, x, y, Graphics.LEFT | Graphics.TOP);
                }
            }
        }
    }
}

使用建議

• 圖片尺寸：寬度應能被 cols 整除，高度應能被 rows 整除，否則邊緣會被截斷
• 記憶體：分割會產生 rows*cols 個新 Image 物件，大圖片需評估堆疊壓力
• 二維陣列：若邏輯需要，可自行轉換為 Image[][]：tiles[r][c] = result[r*cols + c]
• 預處理替代：若圖片固定，建議打包時預先分割好，減少啟動運算與記憶體峰值

這個工具類簡潔高效，是 J2ME 遊戲精靈管理的基礎建設，掌握 translate 技巧更能舉一反三應用於其他繪圖場景。