主题
- 场景切换
- 场景间数据传递方式
- 小游戏全局背景音效
特别说明
CocosCreator微信小游戏开发系列文章，是我在逐步开发过程中，基于官方文档之上，记录一些重点内容，以及对官方文档中有些知识点的补充和分析。
正文
引擎同时只会运行一个场景，当切换新场景时，默认会将当前场景内所有节点和其他实例销毁。
1. 场景切换
假设从场景A切换到新场景B，中间会经历那些过程呢？
场景B预加载preloadScene -> 场景B的onLoad -> 场景B的onStart -> 跳转到场景B -> 场景A资源释放
//后台静默预加载新场景，
cc.director.preloadScene("table", function () {
cc.log("Next scene preloaded");
});
//预加载没完成，也可以调用
cc.director.loadScene("MyScene");
1.1 预加载阶段做了什么？
会加载场景B中引用的静态资源，即属性检查器中引用的资源
场景B中cc.resources和cc.assetManager加载的资源属于动态加载，不会在preloadScene阶段预加载
1.2 在onLoad和onStart方法中执行了过于耗时的操作，会导致页面黑屏或者跳转到场景B的速度很慢，造成无响应的假象。
1.3 场景A资源释放
场景A中引用的静态资源会被自动释放，但是动态加载的资源则需要开发者自己手动释放。
- 对场景内单个资源的释放，可以使用release函数：
//cc.resources.load加载的单个资源释放，可以调用cc.resources.release
cc.resources.release("test assets/image", cc.SpriteFrame);
cc.resources.release("test assets/anim");
//也可以使用 cc.assetManager.releaseAsset 来释放特定的 Asset 实例。
cc.assetManager.releaseAsset(spriteFrame);
- 单个资源出现被多个节点或者组件复用时，Asset Manager提供了一套基于引用计数的资源释放机制：
//每个组件加载资源时addRef()增加一个资源引用
cc.resources.load('image', cc.SpriteFrame, (err, spriteFrame) => {
this.spriteFrame = spriteFrame;
spriteFrame.addRef();
});
//每个组件destroy时，对应的调用decRef()减少一个资源引用
this.spriteFrame.decRef();
this.spriteFrame = null;
问题场景：
场景A在onLoad中动态加载了资源D，切到场景B中也动态加载了资源D，而根据引用计数的资源释放机制用法，在场景A中加载资源D时要addRef = 1，场景A销毁时要decRef = 0，资源D被释放了，但是这时候场景B中又动态加载了资源D要addRef + 1，就会出现场景B中资源D的isValid=false，导致资源无法显示了。而如果不decRef，场景B中的资源D会因为refCount不为0，而不会被释放。
结论：
从这个问题理解，引用计数的资源释放机制，应当是针对单个场景中多个组件引用相同资源D，才适合引用计数，在场景销毁时用来控制资源是否销毁的。
释放资源，要根据资源在各场景中的实际使用情形，结合release和引用计数来使用。
2. 场景间数据传递方式
2.1 常驻节点传递数据
场景A跳转场景B时，如何传递参数数据给场景B使用呢？
“cc.director.loadScene”方法没有携带参数启动场景的功能，CocosCreator是通过“常驻节点”进行场景资源管理和参数传递。“常驻节点”怎么理解呢？
当切换新场景时，默认会将当前场景内所有节点和其他实例销毁，而所谓“常驻节点”，是指在场景切换时不被自动销毁，常驻内存中的节点组件。那这个常驻节点应当建在哪里呢？
首先CocosCreator是推荐使用Canvas节点作为渲染根节点的，并且微信小游戏强制要求渲染根节点必须是Canvas。常驻节点创建的位置是和Canvas节点平级，即不能作为Canvas节点的子节点，而是应当在场景的根节点下，如下图所示。分析原因可能有两种：
- 如果常驻节点在Canvas内，因为节点不会被销毁，会导致Canvas节点也不能销毁，多切换几个场景，内存可能就已经满了；
- 从节点功能上看，常驻节点只是空节点，而Canvas属于渲染节点，它的子节点都是用于渲染UI使用，所以也不应该放到Canvas节点下。
将StartData节点设置成常驻节点：
//添加dataNode为常驻节点
cc.game.addPersistRootNode(this.dataNode);
//设置dataNode要传递的数据
this.dataNode.data = {data : "123"}
在新场景中获取传递的数据：
onLoad() {
//从上一个场景的常驻节点上获取当前场景需要使用的参数
var startData = cc.director.getScene().getChildByName('StartData');
if (startData) {
this.data = startData.data;
// cc.log('页面传递的参数，从常驻节点中获得data：', this.data);
//取消一个节点的常驻属性
cc.game.removePersistRootNode(startData);
}
...
},
注意: cc.game.removePersistRootNode 并不会立即销毁指定节点，只是将节点还原为可在场景切换时销毁的节点。
2.2 使用全局变量
定义全局变量 window.Global：
window.Global = {
data: null
};
由于所有脚本都强制声明为 "use strict"，因此定义全局变量时的 window. 不可省略。
接着在需要使用的地方可直接初始化 Global 并访问它:
// home.js
cc.Class({
extends: cc.Component,
onLoad: function () {
Global.data = { data : "123"};
},
// start 会在 onLoad 之后执行，所以这时 Global 已经初始化过了
start: function () {
this.txtLabel.string = Global.data.data;
}
});
注意：
- 不推荐滥用全局变量；
- 访问全局变量时，需确保全局变量已初始化和赋值，否则将会抛出异常；
- 定义全局变量时，不能和系统已有的全局变量重名；
- 你需要小心确保全局变量使用之前都已初始化和赋值。
3. 小游戏全局背景音效
全局背景音乐的播放，看完上面的内容应当知道怎么实现了吧，如果还不知道做的，你可以再仔细往上看一看。
创建常驻节点AudioNode
编写AudioManager.js音乐播放脚本
cc.Class({
extends: cc.Component,
properties: {
bgMusic: {
url: cc.AudioClip,
default: null
},
},
onLoad() {
cc.game.addPersistRootNode(this.node);
if (!this.bgMusic) {
cc.assetManager.loadRemote('https://www.test.com/game_bgm.mp3', function(err, audio) {
if (err) {
console.log("加载失败：" + err);
}
if (audio instanceof cc.AudioClip) {
this.bgMusic = audio;
//停止再开启背景音乐
this.playBgMusic();
}
}.bind(this));
} else {
this.playBgMusic();
}
},
playBgMusic() {
if (this.bgMusic) {
this.bgMusicChannel = cc.audioEngine.play(this.bgMusic, true, 0.3)
}
},
stopBgMusic: function () {
if (this.bgMusicChannel !== undefined) {
cc.audioEngine.stop(this.bgMusicChannel);
this.bgMusicChannel = undefined;
}
},
});
- 把AudioManager.js脚本挂载到AudioNode节点上
如果在属性面板没有设置bgMusic播放的音频资源，则动态播放默认音频资源。
结尾
既然您看到这了，说明文章对你还有用，帮忙点个赞再走吧，谢谢！
关注我的公众号「掉队程序员」，持续输出更多内容！
自己动手写，分解项目中的各个模块需求，通过查文档和搜索Cocos社区，解决碰到的问题，最终在微信上线了下面这款微信小游戏《成语锦衣卫》，欢迎大家扫码体验，并作为参考项目模版，开发出属于自己的小游戏
预告
下一节和朋友们说一说：微信登录功能的实现，CocosCreator第三方服务腾讯TCB云开发踩坑和微信云开发