欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

cocos creator微信小游戏 加载进度页面

程序员文章站 2022-06-18 23:45:47
参考文档1、Cocos creator 微信小游戏 加载远程资源启动页https://blog.csdn.net/nihaoqlw/article/details/851398232、手把手教你制作微信小游戏的下载进度条-适用于cocos3Dhttps://forum.cocos.org/t/cocos3d/89614正文1、添加 loading-scene 页面内容loading-scene.js 是主要页面代码,其他的图片文件是进度条资源,loading-scene2.js是参考文件(没...

参考文档
1、Cocos creator 微信小游戏 加载远程资源启动页
https://blog.csdn.net/nihaoqlw/article/details/85139823
2、手把手教你制作微信小游戏的下载进度条-适用于cocos3D
https://forum.cocos.org/t/cocos3d/89614

正文
1、添加 loading-scene 页面内容
cocos creator微信小游戏 加载进度页面
loading-scene.js 是主要页面代码,其他的图片文件是进度条资源,loading-scene2.js是参考文件(没有用处可删除)。
loading-scene.js 代码:

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;

注:如果包体太大,可以将背景和进度条图片资源放到服务器 修改加载的url地址就可 如下:
cocos creator微信小游戏 加载进度页面
2、修改main.js onStart 方法
修改后如下:

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
    };

注:如果做了代码分包加载 先加载分包的代码再加载页面 做如下调整:
cocos creator微信小游戏 加载进度页面

本文地址:https://blog.csdn.net/qq_18924323/article/details/107335611