原先进入微信小游戏的时候会直接加载游戏场景,首包过大会导致游戏启动慢。该范例中,在进入微信小游戏之前加入了一个 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.js
到build-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 图片。