iT邦幫忙

2026 iThome 鐵人賽

DAY 26
0
Vibe Coding

上岸用AI,看小白如何從無到有的用Vibe Codeing開發遊戲系列 第 26 篇

Day 26:Cocos Creator 網頁發布與輕量化打包 —— Asset Bundle 分包、WebP 轉換與 CDN 快取

  • 分享至 

  • xImage
  •  

歡迎來到第二十六天!為了讓門市顧客在 4G/5G 弱網環境下也能 seconds 載入遊戲,我們實作 Asset Bundle 動態分包與載入。


1. Cocos Asset Bundle 動態載入腳本實作

我們將「大廳」放在 Main Bundle,將「青花瓷遊戲」與「雪花冰遊戲」設定為獨立的 Asset Bundle(如 game_ice):

// BundleManager.ts
import { assetManager, AssetManager } from 'cc';

export class BundleManager {
    private static loadedBundles: Map<string, AssetManager.Bundle> = new Map();

    public static loadSubGameBundle(bundleName: string, onProgress: (completed: number, total: number) => void): Promise<AssetManager.Bundle> {
        return new Promise((resolve, reject) => {
            // 若已載入則直接回傳
            if (this.loadedBundles.has(bundleName)) {
                resolve(this.loadedBundles.get(bundleName)!);
                return;
            }

            // 非同步下載 CDN 上的 Bundle 子包
            assetManager.loadBundle(bundleName, { onFileProgress: onProgress }, (err, bundle) => {
                if (err) {
                    console.error(`Bundle ${bundleName} 載入失敗:`, err);
                    reject(err);
                } else {
                    this.loadedBundles.set(bundleName, bundle);
                    console.log(`Bundle ${bundleName} 下載完成!`);
                    resolve(bundle);
                }
            });
        });
    }
}

💡 鐵人賽小知識:Cocos Asset Bundle 的動態載入與記憶體釋放策略

Tech Tip:分包(Asset Bundle)能讓首頁包體從 15MB 降至 2.5MB。當玩家玩完「雪花冰遊戲」返回大廳時,可以呼叫 assetManager.removeBundle(bundle),將該小遊戲佔用的 VRAM 貼圖完全卸載,避免 iOS 設備因記憶體過高而閃退!



上一篇
Day 25:LINE Developer 平台正式發布與 LIFF 綁定維護 —— ShareTargetPicker 社交裂變行銷
下一篇
Day 27:系統資安強化與滲透防禦 —— CORS 限制、Rate Limiting 限流與 Redis Nonce 防重放
系列文
上岸用AI,看小白如何從無到有的用Vibe Codeing開發遊戲 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言