V7投稿 | XForge - 微信小游戏平台分包策略最佳实践

概念介绍

  • 小游戏主包:是指加载小游戏时下载的第一个资源包,需要包含游戏的启动逻辑。
  • 小游戏分包:类似于CDN的概念,不同的是小游戏平台不允许执行CDN中的代码,但是可以执行小游戏分包中的代码。
  • Asset Bundle:Cocos中用于分割代码等资源的能力。简单来说,不使用Asset Bundle代码会构建成一个文件,使用Asset Bundle可以把代码构建成多个文件,自由控制按需加载,小游戏平台的分包策略就靠它了!

当前的问题

CocosCreator3.x的引擎体积越来越大(以下数据基于3.8.2版本):

  • 2D游戏开启全部功能(除了龙骨和物理引擎),引擎基础资源占用2.5M左右空间
  • 3D游戏在不启用物理引擎的情况下,引擎基础资源占用3M左右空间

而小游戏平台对于分包体积有以下限制:
整个小游戏所有主包+分包大小不超过 20M(开通虚拟支付后的小游戏不超过30M)

  • 主包不超过 4M
  • 单个普通分包不限制大小
  • 单个独立分包不超过 4M

开发2D游戏剩余1.5M左右的空间,而3D游戏更是仅剩1M。

Asset Bundle登场

从 v2.4 开始,Creator 正式支持 Asset Bundle 功能。Asset Bundle 作为资源模块化工具,允许开发者按照项目需求将贴图、脚本、场景等资源划分在多个 Asset Bundle 中,然后在游戏运行过程中,按照需求去加载不同的 Asset Bundle,以减少启动时需要加载的资源数量,从而减少首次下载和加载游戏时所需的时间。
Asset Bundle 可以按需求放置在不同地方,比如可以放在远程服务器、本地、或者小游戏平台的分包中。

以上的官方文档中的介绍,我们这里关注两个个关键词远程服务器小游戏平台的分包

Asset Bunlde允许你将代码、图片、音频等等资源设置为远程分包小游戏平台的分包,而且设置也不算麻烦,这里以小游戏平台的分包为例。
iShot_2024-03-21_20.58.06
iShot_2024-03-21_21.00.32
( 还可以设置Bundle名称和优先级,我们这里就用默认的 )
iShot_2024-03-21_21.04.32

设置完毕后,最终在构建之后folder这个目录就会出现在subpackages目录里面,这里是不会占用小游戏主包空间的。
iShot_2024-03-21_21.09.27

远程分包也是同理,不同的是最终资源会构建到remote文件夹内。在构建面板配置正确的CDN(资源服务器)地址,并将remote文件夹整个放到服务器上就可以了。

微信小游戏不允许运行远程js脚本,所以远程分包中不要放置js代码。

我们刚才也说了,脚本、图片等资源都被独立到了这个所谓的分包下,那如何加载资源、如何让我们的代码运行?
答:使用assetManager.loadBundle 其它可以看官方文档

(PS:CocosCreator中加载远程资源分为两套方案,「Asset Bundle方案」和「单资源方案」(比如直接通过url加载图片)。Asset Bundle方案是通过使用assetManager.loadBundle ,单资源方案使用assetManager.loadRemote。可以看官方文档 )

// folder 为我们刚才默认的Bundle名
assetManager.loadBundle('folder', (err, bundle) => {
    // Bundle中的代码是自动执行的,而加载Bundle中的其它资源,使用bundle.load
    bundle.load('xxx');
});

这里不得不说一下,Asset Bundle设计的很好用,让开发者可以不关心平台,不关心是远程包还是小游戏分包,仅仅一个assetManager.loadBundle统统搞定。


以上介绍了控制小游戏主包体积在Cocos中应该怎么做,但其实还有一些细节问题:

  • UI的脚本、预置体、资源具体应该怎么配置
  • 开发3D游戏,需要创建多个场景,场景该怎么处理
  • 音频、配置、工具等通用脚本放在哪里
  • 如何控制加载流程
  • 看起来好麻烦,不想干了

XForge登场

XForge 是一个基于 CocosCreator 的开源免费的前端2D/3D开发框架。
它还同时支持2D界面/3D场景管理,并且2D/3D的管理设计的就像Asset Bundle一样简单好用。
wiki
CocosStore

相对于目前其它的框架,它最大的一个优点是入门及其简单(小伙伴们一致认同)。
iShot_2024-03-21_21.44.56
虽然入门简单,但不代表它只能干点UI管理的活,相反 XForge 这个名字代表它无所不能!!
iShot_2024-03-21_22.03.13
写过web前端或者nodejs的同学都知道,开发一个功能,可能引入一个npm包就搞定了。
CocosCreator中也可以引入npm包,但是无法完整使用CocosCreator中的能力,比如Asset Bundle等。

为此,我特意为 XForge 开发了扩展包的能力,一个独属于 XForge 的生态。

通过扩展包快速的集成游戏开发中常用的功能,包括但不限于:ECS架构、状态管理、巡路、定点数、碰撞检测等等。

我最近在基于此来开发帧同步游戏,由于只能业余时间搞,所以预计要到10月份才能完成。
感兴趣的同学可以关注下

XForge中的最佳实践

  • XForge 提供了自动化的方式帮助开发者创建资源目录,包括UI、音频、数据、管理器和控制器。
    除了你自己定义的Asset Bundleresources(引擎内置Bundle)外,配置和加载问题你都完全不需要关心
  • 构建时将 「主包压缩类型」 修改为 「小游戏分包」,这样可以将框架和扩展包的代码也放到小游戏分包中(甚至你已经完全不需要自定义Asset Bundle了)。
    iShot_2024-03-21_22.26.04

小tip: 如果你是个人开发者没有自己的资源服务器,并且确定你的总包体积<20M,那可以在Bundle配置中将app-res的小游戏配置改为使用「小游戏分包」

XForge交流群

WechatIMG143

3赞

顶个一楼,框架长长久久

正在学习中,顶起~

踩一个~~~

:+1: :+1: :+1:

顶一个比我写的好就是图片太小了不方便看