引入脚本包 GScriptBN
我们知道，在微信小游戏平台，脚本是不能放在远程，所以脚本基本上是会以小游戏分包的形式存在。
所以我们在设计上，可以把脚本单独设计到一个脚本分包中。
有的朋友就会有疑问，这不就破坏独立性了？我更新的时候，变成整个脚本包都要更新，增加了更新的大小?这里只能说，还是要看情况，如果对用户更新大小有极致的要求，或者本身某个功能玩法是独立的。那可以根据情况单独分出去，也是完全支持的。
现在我们要引入脚本包： GScriptBN，并改造我们现有的一些流程：
新建 GScriptBN 脚本包
在 assets 目录下新建文件夹 GScript，勾选配置为Bundle，将 Bundle 名称更改为 GScriptBN，优先级设置为 9. （为什么是 9，这个从我个人长期的实践来看， 9 这个优先级是比较合适的，如果不明白，可以先用着）
编辑目标平台中的默认配置
点击平台设置，选中 Bundle 配置中的小游戏，将抖音小游戏、微信小游戏的压缩类型更改为小游戏分包（其它平台如果要上的，可自行同步更改）。
移动 fw 中的内容到 GScript 文件夹下的 core/modules 文件夹
请在 VSCode 中进行上述操作。注意各个文件夹都请重新新建，不要将文件夹拖拽到该目录，而应该新建完文件夹，再将脚本和对应的meta 文件进行拖拽。（举个例子：需要同时拖拽 ResConst.ts 和 ResConst.ts.meta 文件到 GScript/core/modules/res 文件夹下）VSCode 会自动修改引用的路径。
移动游戏逻辑到 GScript 文件夹下的 GamePlay/modules 文件夹
同样的，在 GScript 中新建 GamePlay/modules 文件夹，然后分别新建 Login 和 Match3 文件夹。
然后按之前的方式，在 VSCode 中，将各个脚本拖拽过来。然后删除 fw 及其相关的空文件夹和meta 文件
将 Boost.ts 和 Main.scene 移动到 assets 文件夹下
请注意
- 所有的脚本移动都要在 VSCode 中进行，需要同时移动脚本的 meta 文件。
- 所有的资源移动，需要在编辑器中进行。
在 GScript 中新增 GCtr.ts 脚本
将其内容修改如下：
import { _decorator, Canvas, Component, js, ResolutionPolicy, screen, Size, view } from 'cc';
import { ResManager } from './core/modules/res/ResManager';
import { UIManager } from './core/modules/ui/UIManager';
const { ccclass } = _decorator;
/**
* 画布的标准化尺寸，就是之前说的
* iPad 设备中的画布尺寸 = 1001 x 1334 (其中 1001 ≈ 1668/1.6672)
* iPhone16设备中的画布尺寸 = 750 x1626（其中 1626 = 2556/1.572）
*/
export const G_VIEW_SIZE = new Size(0, 0);
@ccclass('GCtr')
class GCtr extends Component {
async init(param: {
canvas2d: Canvas,
}) {
this.adapterScreen()
UIManager.getInstance().init(param.canvas2d);
ResManager.getInstance().loadBundle("LoginBN", _ => {
const loginEntryClass = js.getClassByName("LoginEntry") as typeof Component;
this.node.addComponent(loginEntryClass)
})
}
adapterScreen() {
let resolutionPolicy: ResolutionPolicy = view.getResolutionPolicy();
let designSize = view.getDesignResolutionSize();
let frameSize = screen.windowSize;
let frameW = frameSize.width;
let frameH = frameSize.height;
/** 是否是屏幕更宽 */
const isScreenWidthLarger = (frameW / frameH) > (designSize.width / designSize.height);
let targetResolutionPolicy = isScreenWidthLarger ? ResolutionPolicy.FIXED_HEIGHT : ResolutionPolicy.FIXED_WIDTH;
if (targetResolutionPolicy !== resolutionPolicy.getContentStrategy().strategy) {
/** 保证设计分辨率的内容都能显示出来 */
view.setDesignResolutionSize(designSize.width, designSize.height, targetResolutionPolicy);
view.emit("canvas-resize")
}
/** 实际的尺寸会和设计分辨率在一个维度，但是宽或高更大 */
if (isScreenWidthLarger) {
G_VIEW_SIZE.width = Math.ceil(designSize.height * frameSize.width / frameSize.height);
G_VIEW_SIZE.height = designSize.height;
} else {
G_VIEW_SIZE.width = designSize.width;
G_VIEW_SIZE.height = Math.ceil(designSize.width * frameSize.height / frameSize.width);
}
console.log(`屏幕${isScreenWidthLarger ? "更宽, 高度适配" : "更高, 宽度适配"} 设计分辨率比例下的屏幕尺寸: ${G_VIEW_SIZE.width}x${G_VIEW_SIZE.height}`);
return isScreenWidthLarger;
}
}
其逻辑基本是从 Boost.ts 中迁移过去的。这里注意 GCtr 类需要使用 @ccclass('GCtr') 进行装饰，这样 Boost.ts 中加载完脚本包，使用 addComponent(‘GCtr’) 的方式是，才能正确添加该组件。
改造 Boost.ts 脚本中的内容
将 Boost.ts 中的内容改造如下
import { _decorator, AssetManager, assetManager, Canvas, Component, Size } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Boost')
export class Boost extends Component {
@property(Canvas) private canvas2d: Canvas = null;
private loadBundle(bundleName: string): Promise<AssetManager.Bundle> {
return new Promise<AssetManager.Bundle>(rs => {
assetManager.loadBundle(bundleName, (e, asset) => {
if (e) {
console.error(e);
rs(null)
return;
}
rs(asset);
});
})
}
async start() {
/** 加载全局脚本包 */
await this.loadBundle("GScriptBN");
const gCtr: any = this.node.addComponent("GCtr");
await gCtr.init({
canvas2d: this.canvas2d,
})
}
}
这样改造的目的是，为了解耦 Boost.ts 启动逻辑，这样 Boost.ts 中没有从 GScript 中的 import 任何脚本，这样 Cocos Creator 打包的时候，就不会将 GScriptBN 中的脚本打包到其自带的一个称之为 main 的 AssetBundle。
这样，我们完成初步的重构逻辑。启动后，控制流程从 Boost 组件转移到了 GCtr 组件
