通过加载界面优化微信小游戏启动速度

原先进入微信小游戏的时候会直接加载游戏场景,首包过大会导致游戏启动慢。该范例中,在进入微信小游戏之前加入了一个 loading 界面,这样子在微信小游戏首包中只需要放入 loading 界面所需要的资源,首包将会减少到最小,微信小游戏的启动速度也会变快。

操作步骤

  • 建立一个 HelloWorld 工程

  • 在项目目录下建立 build-templates/wechatgame/src/ 目录

  • 在 src 目录中添加一个 loading-scene.js 脚本

  • 在这个脚本中创建一个 Scene,在场景中添加一个空节点并挂载 Canvas 组件,在空节点上添加一个子节点,Canvas 组件会将子节点自动定位到屏幕中央。在子节点上挂载一个 Label 组件,设置内容为 “Loading…”。最后用 module.exports 导出这个场景对象。代码如下:

    var scene = new cc.Scene();
    
    var root = new cc.Node();
    var canvas = root.addComponent(cc.Canvas);
    root.parent = scene;
    
    var node = new cc.Node();
    var label = node.addComponent(cc.Label);
    label.string = "Loading...";
    node.parent = root;
    
    module.exports = scene;
    
  • 发布项目到微信小游戏平台

  • 拷贝 build/wechatgame/main.jsbuild-templates/wechatgame/main.js

  • 修改 build-templates/wechatgame/main.js,在 onStart 函数开头添加代码:

    var loadingScene = require('src/loading-scene');
    cc.director.runSceneImmediate(loadingScene);
    
  • 再次发布项目到小游戏平台,可以看到首先会加载一个 “Loading…” 的加载页面,再进入到 helloworld 界面

范例quick-loading.zip (545.4 KB)

备注:开发者可根据需要扩展加载场景,实现更多功能,比如加载一张图片作为 loading 图片。

49赞

厉害,除了微信小游戏普通h5 可以这样用吗?

也可以,这样可以在加载游戏场景的过程中有一个 splash screen

不错,手长了

666,学习下

抓紧发版本啊 BUG太多 不能回退 马上就要上天台了

panda大大问个问题 在微信小游戏中 跳转场景会突然卡顿一下 现在场均的draw call 在70左右 是不是小游戏渲染机制不太友好还是其他原因导致的

下载demo编译后,在微信开发者工具上报错误

creator 是什么版本?

1.9.0

mark

mark

+1 V1.9.0

你把 build-templates/wechatgame/main.js 删除再重新执行一下后面4个步骤就可以了~

嗯,可以了…膜拜大大:pray:

1.9.2版本,微信小游戏,在开发者工具模拟器中可以稳定60fps,真机上(华为M9)卡成狗,fps只有20-30,开了调试模式看也没有看到有报错,真机调试貌似只有小程序可以,小游戏找不到可以调试的方法。有大神可以指导一下么

mark

v1.10

可以可以