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

这里怎么作进度条、进度条、进度条!!! 在main。js里面做onprogress收到的参数completeCount和totalCount都是1、1。

求回复,@jare @panda @yufang.wu

mark

请问 Creator 的版本是什么?具体的操作过程是什么?有报错信息吗?可以把代码贴上来吗或者提供一个小 demo?

2.0.2最新版,没有报错信息

cc.loader.onProgress = function(cur, num, itme) {
console.log(‘第’ + cur + ‘已加载完毕’);
};
//预加载
cc.director.preloadScene(‘main’, function() {
cc.loader.onProgress = null;
//跳转场景
cc.director.loadScene(‘main’);
});

main.js start函数最后加载主场景的方法,换成上面的预加载,显示进度。cur和num一直都是1,没法做进度条。

如果你可以实现,希望在这个帖子补充下显示进度的demo,或者教大家使用的代码片段也行。
@yufang.wu

我先记下来哦,这两天有一丢丢忙,我会跟进的!

@yufang.wu 能搞吗,会动的进度条别一个静态页友好100倍啊,但我真的弄不出来,求个范例

走个假的进度条,最多走到99%就等待

示例都下载下来了 但是并没有出现loading的加载页面,费解。。。

用户很烦这种99%不动的

正需要

1.loading-scene.js文件内容:

var loadingBg = "https://laixiao.github.io/gamebox/doc/bg.png";

var scene = new cc.Scene();
//1.新增Canvas组件
var root = new cc.Node();
var canvas = root.addComponent(cc.Canvas);
root.parent = scene;

//2.新增Sprite组件:显示loading图片
var bgSprite = root.addComponent(cc.Sprite);
var createImage = function(sprite, url) {
    if (cc.sys.platform === cc.sys.WECHAT_GAME) {
        let image = wx.createImage();
        image.onload = function () {
            let texture = new cc.Texture2D();
            texture.initWithElement(image);
            texture.handleLoadedTexture();
            sprite.spriteFrame = new cc.SpriteFrame(texture);
        };
        image.src = url;
    }
}
createImage(bgSprite, loadingBg);

//3.预加载场景
scene.loadinglaunchScene = function(launchScene){
    cc.director.preloadScene(launchScene, (completedCount, totalCount, item)=>{
        // label.string = "加载中..."+ parseInt((completedCount/totalCount)*100)  + "%";
        console.log("加载中..."+ parseInt((completedCount/totalCount)*100) + "%")
    }, (error)=>{
        if(error){
            console.log('==preloadScene error==', launchScene, error)
        }
        cc.director.loadScene(launchScene, null,function () {
                cc.loader.onProgress = null;
                console.log('Success to load scene: ' + launchScene);
            }
        );
    })
}

module.exports = scene;

2.main.js核心代码:

    var onStart = function () {
        var loadingScene = require('src/loading-scene');
        cc.director.runSceneImmediate(loadingScene);
        
        cc.loader.downloader._subpackages = settings.subpackages;

        cc.view.enableRetina(true);
        cc.view.resizeWithBrowserSize(true);

        // init assets
        cc.AssetLibrary.init({
            libraryPath: 'res/import',
            rawAssetsBase: 'res/raw-',
            rawAssets: settings.rawAssets,
            packedAssets: settings.packedAssets,
            md5AssetsMap: settings.md5AssetsMap
        });

        loadingScene.loadinglaunchScene(settings.launchScene);
    };
2赞

我也在为这个进度条的事情纠结,前辈解决了这个问题吗?

hi 熏依,如pinsir所说,如何解决这个显示进度的demo,我看过腾讯的稍大一点的小游戏,他们的下载资源页都很快,而且有进度,但是在该提供的页面并没找到相应的实现方式,能否提供一个demo,着实感谢。

mark

hi,请问你这段代码是用来实现什么的?

mark

mark

mark

prefabPic.zip (1.4 MB)
在这里按照各位期望的加入了一个 progressBar 但是引用了包内资源,会导致开始加载时有时间损耗,所以当前的方案仅供参考,并不具有实际开发意义。
如果期望有自己的 progress,不妨创建一个简单的 preloadScene。
建议可以通过 graphics 进行尝试画面和进度条绘制,但是需要自己做屏幕适配。

1赞

nark!!!