AndEngine 實現菜單滑動效果：SurfaceScrollDetector + 雙向箭頭導航

基於 AndEngine 的橫向滑動菜單完整實現

使用 SurfaceScrollDetector 捕獲觸摸滑動，ClickDetector 識別點擊，結合 Camera 偏移實現無限滑動菜單，含滾動條、左右箭頭導航、項目點擊 Toast 回饋。

核心組件

• Scene：掛載菜單精靈、滾動條、箭頭、註冊觸摸區域
• Camera：offsetCenter(-distanceX, 0) 實現視口跟隨手指滑動
• SurfaceScrollDetector：onScroll() 計算邊界、更新 Camera、同步滾動條/箭頭位置/可見性
• ClickDetector：區分點擊與滑動，點擊觸發 loadLevel()

關鍵邏輯

// 滑動邊界控制
if (mCurrentX - pDistanceX < mMinX) return;
if (mCurrentX - pDistanceX > mMaxX) return;
mCamera.offsetCenter(-pDistanceX, 0);
mCurrentX -= pDistanceX;

// 滾動條位置映射
float tempX = mCamera.getCenterX() - CAMERA_WIDTH/2;
tempX += (tempX / (mMaxX + CAMERA_WIDTH)) * CAMERA_WIDTH;
scrollBar.setPosition(tempX, scrollBar.getY());

// 箭頭顯示邏輯
menuleft.setVisible(mCamera.getMinX() > 15);
menuright.setVisible(mCamera.getMinX() < mMaxX - 15);

菜單項創建

for (int i = 0; i < MENUITEMS; i++) {
    BitmapTextureAtlas atlas = new BitmapTextureAtlas(256, 256, ...);
    TextureRegion region = BitmapTextureAtlasTextureRegionFactory.createFromAsset(atlas, this, "menu"+i+".png", 0, 0);
    columns.add(region);
    Sprite sprite = new Sprite(spriteX, spriteY, region) {
        public boolean onAreaTouched(TouchEvent e, float x, float y) {
            iItemClicked = itemToLoad; // 記錄點擊項
            return false; // 不消費事件，讓 ScrollDetector 繼續處理
        }
    };
    scene.attachChild(sprite);
    scene.registerTouchArea(sprite);
    spriteX += sprite.getWidth() + PADDING + 20;
}

資源管理

• 字體、菜單圖片、箭頭圖片分離載入，TextureManager 統一管理
• onLoadResources() 預載入所有纹理

適用場景與遷移建議

• AndEngine GLES1 時代產物，現代項目建議遷移至 LibGDX / Unity / 原生 ViewPager2 + RecyclerView
• 核心思想：視口偏移 + 觸摸分發 + 邊界裁剪 通用於所有 2D 滑動菜單實現