微信小游戏开发之场景切换和常驻节点传递数据

主题

  1. 场景切换
  2. 场景间数据传递方式
  3. 小游戏全局背景音效

特别说明

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. 小游戏全局背景音效

全局背景音乐的播放,看完上面的内容应当知道怎么实现了吧,如果还不知道做的,你可以再仔细往上看一看。

  1. 创建常驻节点AudioNode

  2. 编写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;
      }
  },

});
  1. 把AudioManager.js脚本挂载到AudioNode节点上
挂载AudioManager.js

如果在属性面板没有设置bgMusic播放的音频资源,则动态播放默认音频资源。

结尾

既然您看到这了,说明文章对你还有用,帮忙点个赞再走吧,谢谢!

关注我的公众号「掉队程序员」,持续输出更多内容!

自己动手写,分解项目中的各个模块需求,通过查文档和搜索Cocos社区,解决碰到的问题,最终在微信上线了下面这款微信小游戏《成语锦衣卫》,欢迎大家扫码体验,并作为参考项目模版,开发出属于自己的小游戏

欢迎大家扫码体验

预告

下一节和朋友们说一说:微信登录功能的实现,CocosCreator第三方服务腾讯TCB云开发踩坑和微信云开发

你可能感兴趣的:(微信小游戏开发之场景切换和常驻节点传递数据)