前端analysis | 知其所以然

cocos to weixin game

2026-01-18

1️⃣ 分包打通原理(核心概念)

微信小游戏的分包机制:

  • 主包:启动包,必须轻量,只放核心逻辑和主界面
  • 子包:按世界/章节拆分。
  • 加载方式:运行时通过 wx.loadSubpackage({name: '包名'}) 异步加载。

💡 原则

  1. 主包只存核心管理器

    • 游戏入口(主菜单、主角信息)
    • 核心模块:LevelManager, PlayerController, UIManager
    • 共用资源(主角、基础UI、共用音效)
  2. 子包存放具体关卡和大资源

    • 关卡场景(Scene)
    • 特定怪物、Boss prefab
    • 特殊音效、贴图

2️⃣ 分包之间通信与打通

核心问题:分包之间不能直接引用 JS 文件(微信限制),需要通过 主包的管理器 来统一调度。

方式 1:通过主包的 LevelManager 调度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// LevelManager.js (主包)
const levels = {
chishui: {
packageName: 'world_chishui',
startScene: 'level1'
},
wumeng: {
packageName: 'world_wumeng',
startScene: 'level1'
}
};

function loadLevel(worldKey, sceneName) {
const pkg = levels[worldKey];

wx.loadSubpackage({
name: pkg.packageName,
success: () => {
cc.director.loadScene(sceneName); // 加载子包内关卡
},
fail: (err) => {
console.error('加载分包失败', err);
}
});
}

module.exports = { loadLevel };
  • 主包只知道 关卡名称 + 分包名
  • 子包内部可以自由管理关卡逻辑和 prefab

方式 2:分包内关卡自动注册(可选)

在每个子包入口场景中做注册:

1
2
3
4
5
6
7
8
9
// world_chishui/level1.js
const LevelManager = require('LevelManager');

cc.Class({
extends: cc.Component,
onLoad() {
LevelManager.registerLevel('chishui_level1', this.node);
}
});

这样可以让 主包统一调用 分包里的关卡,便于关卡跳转和存档管理。


3️⃣ 关卡设计与管理

你的目标是 “先搭框架,后续只更新资源”,所以建议:

3.1 关卡数据化

使用 JSON 来管理关卡数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
// world_chishui/level1.json
{
"name": "月面断桥",
"background": "chishui_bg.png",
"platforms": [
{ "x": 100, "y": 50, "type": "stone" },
{ "x": 300, "y": 100, "type": "floating" }
],
"enemies": [
{ "type": "river_spirit", "x": 400, "y": 60 }
],
"goal": { "x": 500, "y": 120 }
}
  • 好处

    1. 不用每次改关卡都改 JS
    2. 支持后期热更新 JSON + prefab
    3. 支持一键生成新关卡

3.2 LevelManager 调度关卡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// LevelManager.js
function enterLevel(worldKey, levelIndex) {
const pkg = levels[worldKey];

wx.loadSubpackage({
name: pkg.packageName,
success: () => {
const levelData = require(`./${pkg.packageName}/level${levelIndex}.json`);
cc.director.loadScene(levelData.name, () => {
// 加载完成后初始化
cc.find('Canvas').getComponent('LevelController').init(levelData);
});
}
});
}
  • 统一入口:主包的 LevelManager.enterLevel('chishui', 1)
  • 子包只负责 具体关卡实现 + prefab
  • 未来新增关卡只需 更新 JSON + prefab,不动主包

4️⃣ 分包内关卡结构建议

1
2
3
4
5
6
7
8
9
10
11
12
13
world_chishui/
├── scenes/
│ ├── level1.fire
│ ├── level2.fire
├── prefabs/
│ ├── enemy_riverspirit.prefab
│ ├── platform_floating.prefab
├── audio/
│ ├── water_flow.mp3
├── textures/
│ ├── background_chishui.png
└── level1.json
└── level2.json
  • scenes → Cocos 场景
  • prefabs → 可复用对象
  • json → 配置关卡
  • audio/textures → 大资源

✅ 分包只存放 大资源 + 特定关卡逻辑,主包轻量管理


5️⃣ 关卡切换逻辑

  1. 玩家完成关卡 → 调用 LevelManager.enterLevel(nextWorld, nextLevel)
  2. LevelManager 自动加载子包 → 加载关卡 JSON → spawn prefab
  3. 游戏状态(角色、道具)统一保存在主包 GameData
  4. 完成新关卡 → 可以触发 分包热更新新关卡下载

这样,你的游戏就可以做到:

  • 主包不变
  • 后续只更新关卡资源或新分包
  • 玩家无需重新下载安装就能玩新世界

6️⃣ 技术实现注意点

  • 资源路径

    • 子包内资源路径不能直接跨包引用
    • 都由 关卡 JSON + prefab 管理
  • 内存管理

    • 子包卸载资源:cc.loader.releaseAll()cc.assetManager.releaseAsset
  • 异步加载

    • 关卡 prefab / 资源全部异步加载,避免卡顿

总结架构思路

1
2
3
4
5
主包:LevelManager + PlayerController + UI + 核心逻辑
子包:具体关卡 + 大资源(prefab/audio/texture)
数据化关卡:JSON配置关卡信息
关卡切换:主包统一调度,子包异步加载
热更新/扩展:只更新子包或资源,不动主包

这样就可以满足:

  • “先搭框架,后续只更新资源”
  • 支持分包扩关
  • 支持文化/地域元素的多世界玩法
Tags: game
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏