pixi.js 6.1.2 #1 资源加载loading

手机端项目

设计图是750 * 1334的尺寸，所以canvas的宽度是750，高度则根据比例缩放，然后通canvas ｛width: 100%; height:100%｝的样式来控制canvas的样式，这样canvas绘制是以设计宽度750的宽度标准来绘制内容，展示则是手机屏幕的宽高100%来展示的。

资源文件

// loading.js资源文件
export default [
  {
    index: -99,
    type: "Container",
    name: "loading",
    group: "root"
  },
  {
    type: "TilingSprite",
    url: "images/loading/bg.jpg",
    group: "loading",
    props: {
      x: 0,
      y: 0
    }
  },
  {
    type: "Text",
    name: "loading_percent",
    group: "loading",
    text: "加载中，0%",
    style: {
      fontSize: 38,
      fill: 0xffffff,
      align: "center",
      fontStyle: 'italic'
    },
    props: {
      x: 375,
      y: 650,
      anchor: { x: 0.5, y: 0 }
    }
  }
];

..........................
      this.winSize = {}
      this.winSize.rem = document.documentElement.style.fontSize.replace('px', '') - 0;
      this.winSize.winWidth = window.innerWidth;
      this.winSize.windHeight = window.innerHeight;
      this.winSize.cvsWidth = 750;
      this.winSize.cvsHeight = this.winSize.windHeight * 750 / this.winSize.winWidth;
      this.app = new PIXI.Application({
        // 宽度
        width: this.winSize.cvsWidth,
        // 高度  750/xh = winw/winh
        height: this.winSize.cvsHeight,
        // 反锯齿
        antialias: true,
        // 透明度
        backgroundAlpha: 1,
        backgroundColor: 0xffffff,
        // 分辨率
        resolution: 1
      });
      document.getElementById('canvasBox').appendChild(this.app.view);
      this.pixiLoader = new PIXI.Loader();
......................................
let loadedCallback = function(loader) {
  // set up...
}
let pixiLoader = this.pixiLoader;
......................................
  // curPageConfig otherPageconfig 两个数组，和loading.js的结构是一样的
  const list = [].concat(this.curPageConfig, this.otherPageconfig).filter(function (item) {
    return item.url;
  });
  // console.log('loadResource list:', list);
  pixiLoader.add(list).load((loader) => {
    if (typeof loadedCallback === 'function') {
      // 加载资源后，把获得的loader传给回调函数
      loadedCallback(loader);
    } else {
      console.warn('process callback is not a function.');
    }
  });
  pixiLoader.onProgress.add((res) => {
    const percent = res.progress;
    // const text = "加载中，" + (percent | 0) + "%";
    console.log("正在加载", percent);
   });
   pixiLoader.onComplete.add((res) => {
     const percent = res.progress;
     console.log("complete=", percent);
   });

后面还有一段代码是通过资源js提供的type来创建Container和Sprite的，然后设置显示对象的属性，最后加入场景显示，这部分代码省略。