Reference document
1. Cocos creator WeChat mini game loading remote resource startup page
https://blog.csdn.net/nihaoqlw/article/details/85139823
2. Teach you step by step how to make the download progress bar of WeChat mini game - applicable to cocos3D
https: //forum.cocos.org/t/cocos3d/89614
Text
1. Add loading-scene page content
. loading-scene.js is the main page code, other image files are progress bar resources, and loading-scene2.js is a reference file (can be deleted if it is no longer useful).
loading-scene.js code:
var createImage = function(sprite, url, cb) {
if(cc.sys.platform = cc.sys.WECHAT_GAME){
let image = wx.createImage();
image.src = url
image.onload = function(){
let texture = new cc.Texture2D();
texture.initWithElement(image)
texture.handleLoadedTexture();
sprite.spriteFrame = new cc.SpriteFrame(texture);
if(cb)
cb(sprite);
};
}
}
//设置分辨率
cc.view.setDesignResolutionSize(1280, 720, 0);
var scene = new cc.Scene();
let visibleSize = cc.view.getVisibleSize();
//1.新增Canvas组件
var root = new cc.Node();
root.name = 'Canvas';
var canvas = root.addComponent(cc.Canvas);
root.parent = scene;
var bgSprite = root.addComponent(cc.Sprite);
createImage(bgSprite, "loading-scene/startScene_bg.jpg");
// 进度条组件位置
let pos = cc.v2(0,-200);
let loadingBgNode = new cc.Node();
loadingBgNode.parent = root;
loadingBgNode.position = pos;
let loadingBgSprite = loadingBgNode.addComponent(cc.Sprite);
createImage(loadingBgSprite, 'loading-scene/loadingBg.png');
let loadingBarNode = new cc.Node();
loadingBarNode.parent = root;
loadingBarNode.position = pos;
let loadingBarSprite = loadingBarNode.addComponent(cc.Sprite);
createImage(loadingBarSprite, 'loading-scene/loadingBar.png', function (sprite){
sprite.type = cc.Sprite.Type.FILLED;
sprite.fillType = cc.Sprite.FillType.HORIZONTAL;
sprite.fillStart = 0;
sprite.fillRange = 0;
});
//新增进度条的label
var labelNode = new cc.Node();
var label = labelNode.addComponent(cc.Label);
label.fontSize = 25;
label.lineHeight = label.fontSize;
labelNode.position = pos;
label.color = cc.color(255,255,255,255);
label.string = '资源加载中...0%'
labelNode.parent = root;
//3.预加载场景
scene.loadinglaunchScene = function(launchScene) {
cc.director.preloadScene(launchScene, (completedCount, totalCount, item) => {
//todo 这个地方加载精度条
loadingBarSprite.fillRange = completedCount / totalCount;
label.string = ("资源加载中..." + parseInt((completedCount / totalCount) * 100) + "%")
}, (error) => {
if (error) {
//todo 这个地方提示网络环境不好，请检查网络后重试
console.log('==preloadScene error==', launchScene, error)
label.string = '加载失败,请检查网络';
return;
}
cc.director.loadScene(launchScene, null, function() {
if (cc.sys.isBrowser) {
// show canvas
var canvas = document.getElementById('GameCanvas');
canvas.style.visibility = '';
var div = document.getElementById('GameDiv');
if (div) {
div.style.backgroundImage = '';
}
}
cc.view.setDesignResolutionSize(640, 1136, 4);
cc.loader.onProgress = null;
console.log('Success to load scene: ' + launchScene);
});
})
}
module.exports = scene;
Note: If the package body is too large, you can put the background and progress bar image resources on the server and modify the loaded URL address as follows:
2. Modify the main.js onStart method
as follows:
var onStart = function () {
cc.loader.downloader._subpackages = settings.subpackages;
cc.view.enableRetina(true);
cc.view.resizeWithBrowserSize(true);
if (!true && !false) {
if (cc.sys.isBrowser) {
setLoadingDisplay();
}
if (cc.sys.isMobile) {
if (settings.orientation === 'landscape') {
cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
}
else if (settings.orientation === 'portrait') {
cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
}
cc.view.enableAutoFullScreen([
cc.sys.BROWSER_TYPE_BAIDU,
cc.sys.BROWSER_TYPE_WECHAT,
cc.sys.BROWSER_TYPE_MOBILE_QQ,
cc.sys.BROWSER_TYPE_MIUI,
].indexOf(cc.sys.browserType) < 0);
}
// Limit downloading max concurrent task to 2,
// more tasks simultaneously may cause performance draw back on some android system / browsers.
// You can adjust the number based on your own test result, you have to set it before any loading process to take effect.
if (cc.sys.isBrowser && cc.sys.os === cc.sys.OS_ANDROID) {
cc.macro.DOWNLOAD_MAX_CONCURRENT = 2;
}
}
//#region 注释掉的部分
// function loadScene(launchScene) {
// cc.director.loadScene(launchScene,
// function (err) {
// if (!err) {
// if (cc.sys.isBrowser) {
// // show canvas
// var canvas = document.getElementById('GameCanvas');
// canvas.style.visibility = '';
// var div = document.getElementById('GameDiv');
// if (div) {
// div.style.backgroundImage = '';
// }
// }
// cc.loader.onProgress = null;
// console.log('Success to load scene: ' + launchScene);
// }
// else if (CC_BUILD) {
// setTimeout(function () {
// loadScene(launchScene);
// }, 1000);
// }
// }
// );
// }
// var launchScene = settings.launchScene;
// load scene
// loadScene(launchScene);
//#endregion
//#region 新加代码部分
var launchScene = settings.launchScene;
//代码没分包
var loadingScene = require('loading-scene/loading-scene');
cc.director.runSceneImmediate(loadingScene);
loadingScene.loadinglaunchScene(launchScene);
//代码分包 先加载代码
// cc.loader.downloader.loadSubpackage('script',function(err){
// if(err){
// return console.error(err);
// }
// console.log('load subpackage successfuly.')
// var loadingScene = require('loading-scene/loading-scene');
// cc.director.runSceneImmediate(loadingScene);
// loadingScene.loadinglaunchScene(launchScene);
// })
//#endregion
};
Note: If you do code sub-package loading, load the sub-package code first and then load the page and make the following adjustments:
