歡迎來到第十八天！當遊戲平台的功能與安全架構齊備後，我們必須面對網頁遊戲最殘酷的考驗：效能優化（Performance Optimization）。門市顧客使用的手機型號落差極大，從最新的 iPhone 到多年前的中低階 Android 機型都有。我們必須確保：

1. 首頁載入速度 < 2 秒（避免顧客失去耐心跳出）。
2. 遊戲過程 FPS 穩定維持在 60 幀（避免操作延遲卡頓）。

1. 遊戲引擎理論：WebGL 繪圖管線與 DrawCall 批次渲染（Batching）

在 WebGL 中，CPU 向 GPU 發送一次繪製指令稱為一次 DrawCall。每一次發送 DrawCall，CPU 都要與 GPU 進行一次上下文切換（Context Switch），例如切換 Bind Texture 或 Shader Program。當畫面上家具與 UI 物件增多時，如果 DrawCall 飆高到 100 以上，CPU 就會成為效能瓶頸，導致畫面 drop frames。

DrawCall 合併的硬性條件：

• 物件必須使用 同一個 Texture（材質貼圖）。
• 物件必須使用 同一個 Shader（著色器）。
• 物件在 Cocos 的 Node Hierarchy（節點樹）中必須是 連續渲染順序（未被其他不同材質的渲染元件打斷）。

[未優化狀態：20 個家具獨立 PNG]
CPU ──> (DrawCall 1: FurnitureA) ──> GPU
CPU ──> (DrawCall 2: FurnitureB) ──> GPU  ===> 20 次 DrawCall (GPU Context 頻繁切換，卡頓!)
...

[優化後：使用 Auto Atlas 合併貼圖]
CPU ──> (DrawCall 1: 合併後的 Atlas 精靈圖集包含 20 個家具) ──> GPU ===> 僅需 1 次 DrawCall!

2. Cocos Creator Auto Atlas 與 SpriteSheet 打包組態

在 Cocos Creator 中，我們不需要手動用 PS 拼圖，直接利用選單中的 Auto Atlas（自動圖集） 資源：

1. 在資產目錄 assets/textures/lobby/ 下新增一個 AutoAtlas.pac 檔案。
2. 設定圖集尺寸上限為 2048 x 2048（相容於 99% 行動裝置 GPU）。
3. 勾選 Bleeding（擴充邊緣）：避免圖片縮放時產生黑邊（Tile Artifacts）。
4. 勾選 Trim（裁剪透明區域）：去除 2D 精靈圖四周的透明像素，大幅降低 GPU 的 Alpha Blending 計算負擔（減少 Overdraw）。

3. Nginx 靜態伺服器 Brotli 高度壓縮配置

Cocos 建置後輸出的 WebGL JavaScript 引擎核心包體（cocos2d-js.js）與 WebAssembly (.wasm) 通常高達數 MB。我們在 Nginx 伺服器端配置 Brotli 壓縮（比傳統 Gzip 壓縮率再提高 15-20%）：

# nginx.conf 設定檔
http {
    # 啟用 Brotli 靜態與動態壓縮
    brotli on;
    brotli_comp_level 6; # 壓縮比率 1-11，6 為效能與壓縮率黃金平衡點
    brotli_types text/plain text/css application/javascript application/json application/wasm image/svg+xml;

    server {
        listen 443 ssl http2;
        server_name game.yourstore.com;
        root /var/www/cocos-webgl-build;

        # 靜態資源檔 Cache-Control 優化 (檔案名稱帶有 Hash 雜湊值)
        location ~* \.(js|css|png|jpg|wasm|bin)$ {
            add_header Cache-Control "public, max-age=31536000, immutable";
            access_log off;
        }

        # index.html 絕不快取，確保版本更新即時生效
        location /index.html {
            add_header Cache-Control "no-cache, no-store, must-revalidate";
        }
    }
}

💡 鐵人賽小知識：什麼是 Overdraw（過度繪製）？如何透過 Alpha Test 優化？

Tech Tip：在 2D 遊戲中，當多張帶有透明通道的 PNG 圖片層層重疊時，GPU 必須針對同一個螢幕像素點反覆執行多次顏色混合（Alpha Blending），這稱為 Overdraw。 Overdraw 過高會導致手機劇烈發熱與降頻。在 Cocos 中，對於完全不透明的背景大圖，請將其改為 JPG 格式或關閉 Alpha 通道；對於透明區域極大的家具，勾選 Trim 裁剪透明邊界，能為 GPU 節省高達 30% 以上的無謂像素運算！