《遠古帝國 2》片頭圖片抖動特效代碼解析

前言

經典 J2ME 遊戲《遠古帝國 2》片頭呈現的一種圖片抖動/波動特效，核心邏輯極其精簡。本文整理並註釋關鍵代碼片段，供圖形特效學習參考。

核心代碼

public static final void drawEffect(Graphics g, int current, 
    int x, int y, int width, int height, Image img, 
    int moveX, int halfWidth, int currentWidth, int angle) {

    // 設置裁剪區域並繪製圖片，產生波動/抖動視覺效果
    if (current % 2 == 0) {
        g.setClip(((x + halfWidth) - currentWidth / 2) + moveX, y + i * 1, currentWidth, 1);
        g.drawImage(img, x + moveX, y, 20);
    } else {
        g.setClip(x + i * 1, ((y + halfWidth) - currentWidth / 2) + moveX, 1, currentWidth);
        g.drawImage(img, x, y + moveX, 20);
    }
    currentAngle += angle;
}

原理解析

1. 交替裁剪方向：偶數幀水平條狀裁剪，奇數幀垂直條狀裁剪，形成十字交錯抖動感。
2. 動態偏移：moveX、currentWidth、halfWidth 共同控制裁剪窗口位置與大小，隨 current（幀計數）變化產生波動。
3. 角度累加：currentAngle += angle 可驅動旋轉或更複雜的軌跡變化。
4. drawImage 錨點 20：對應 Graphics.HCENTER | Graphics.VCENTER，圖片居中繪製，配合裁剪區域移動產生「圖片在抖動中顯現」效果。

應用場景擴展

• 片頭 Logo 進場動畫
• 場景轉場特效
• 受擊/爆炸畫面抖動
• UI 元素進入動畫

優化建議

• 預計算裁剪矩形陣列，運行時直接索引，避免重複運算。
• 結合 Graphics.setColor 疊加半透明色塊，增強視覺層次。
• 針對低端機型，降低幀率或簡化裁剪邏輯。

總結

僅用 setClip + drawImage + 簡單數學運算，即可實現極具視覺衝擊力的抖動特效。這體現了 J2ME 時代「在極度受限資源下榨乾硬件性能」的開發智慧，對現代 Canvas/WebGL 特效開發同樣有啟發。