pixi.js 6.1.2 #2 加载图片资源

pixi.js 加载图片资源

加载独立的图片文件

   let imgWordsUrlArr = [
      './images/page2_word1.png',
      './images/page2_word2.png',
      './images/page2_word3.png',
      './images/page2_word4.png'
    ]
function words() {
    pixiLoader.add([
      ...imgWordsUrlArr
    ])
    .load(setupWords);
}
function setupWords() {
    let wordSprite = new PIXI.Sprite(pixiLoader.resources[imgWordsUrlArr[0]].texture);
    wordSprite.x  = 100;
    wordSprite.y = 100;
    app.stage.addChild(wordSprite )
}

加载精灵图文件 walk.json / walk.png

  let pixiLoader = new PIXI.Loader();

  pixiLoader
  .add("./images/man1/walk.json")
  .load(setup);

  function setup() {
    let textures = pixiLoader.resources["./images/man1/walk.json"].textures; 

    // 组装纹理
    let array = [];
    Object.keys(textures).sort().forEach((key) => {
      array.push(textures[key]);
    });

    // 创建一个动画序列帧
    let animatedSprite = new PIXI.AnimatedSprite(array);
    animatedSprite.x = 300;
    animatedSprite.y = 300;
    animatedSprite.animationSpeed = 30 / 60; // 动画播放的速度，默认为1,每秒播放60张图片
    animatedSprite.loop = true; // 动画是否循环
    animatedSprite.interactive = true;
    animatedSprite.on('tap', (event) => {
      console.log('tap:', event)
      animatedSprite.stop()
    })
    // 动画完成的回调函数
    // loop：true 动画一直循环，则不会触发
    animatedSprite.onComplete = () => {
      console.log("播放完成");
    };
    // animatedSprite.gotoAndPlay(0); // 从第几帧开始播放

    app.stage.addChild(animatedSprite)

    animatedSprite.play()
  }