乐趣区

关于前端:PixiJs创建精灵动画

jiezi

明天将应用 PixiJs 的动画精灵实现闪电划过的成果，成果如下：

筹备工作

  1. 创立我的项目并引入 PixiJs，具体介绍能够拜访 PixiJS 起步
  2. 应用 PixiJs 创立利用，并将利用插入舞台区域，具体介绍能够拜访 PixiJS 创立利用

  3. 筹备须要的图片素材
    我这边在我的项目文件夹 pixi-demo 下新建了 imgs 文件夹用于寄存所需的全副图片（ani_1.png – ani_17.png 就是闪电所需图片），如下：

    残缺我的项目目录如下：

    创立一个宽 750，高 500 像素的粉色画布，在浏览器中程度居中显示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>pixi-demo</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      #demo_stage {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="demo_stage"></canvas>

    <!-- 引入 pixi -->
    <script src="js/pixi.min.js"></script>
    <script type="text/javascript">
      let app = new PIXI.Application({
        width: 750, // default: 800 宽度
        height: 500, // default: 600 高度
        view: document.getElementById("demo_stage"),
      });
      app.renderer.backgroundColor = 0xfddcea; // 设置画布背景色为粉色。0x 示意 16 进制
    </script>
  </body>
</html>

应用 PIXI.loader 加载所需图片

  • 设置画布背景色代码前面持续插入上面代码
  • PIXI.loader.add(‘ 图片相对路径或者图片数组 ’)：加载图片
  • on 办法能够监听图片加载进度
  • load 用于所有图片加载结束后执行回调
PIXI.loader
  .add("imgs/p1.jpg")
  .on("progress", function (loader, resource) {console.log("加载数据进度", loader.progress);
  })
  .load(imgsLoadDone);

function imgsLoadDone() {console.log("图片素材加载结束啦");
}

代码退出结束，浏览器控制台能够看到如下输入：

素材加载结束开始创立精灵

  • 创立精灵并保留在变量 sprite 中：PIXI.Sprite.from(“ 图片相对路径 ”)
let sprite = PIXI.Sprite.from("imgs/p1.jpg"); // p1.jpg 原始大小 256*256
  • 将 sprite 精灵增加到画布中
    app.stage.addChild(sprite);
    此时能够看到画布中呈现一个宽高均为 256 像素的图片，位于画布的左上角

  • 在将精灵增加到画布之前还能够设置精灵相干属性，比方宽高

    sprite.width = "400";
sprite.height = "400";

    设置后图片的宽高将由原来的 256 像素变成 400 像素

  • 接下来咱们让图片居中显示
    能够设置精灵的 position 属性，sprite.position.set(x, y) 试试将 x,y 别离改为 30，示意图片将显示在间隔画布右边 30 像素，顶部 30 像素的中央
    sprite.position.set(30, 30);

    可是咱们不能写死 x,y 的值，因为要是换一张大小不一样的图片后咱们又须要手动去调整 x,y 的值，因而这里咱们最好做成动静计算的，要想图片在画布中程度居中显示，首先咱们须要晓得画布的宽度和图片的宽度，画布的宽度 – 图片的宽度就是残余的间隙，残余间隙的一半即为 x 的值；高度逻辑同理。
    画布宽度能够通过 app.screen.width 获取
    图片宽度能够通过 sprite.width 获取
    残缺代码如下：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>pixi-demo</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      #demo_stage {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="demo_stage"></canvas>

    <!-- 引入 pixi -->
    <script src="js/pixi.min.js"></script>
    <script type="text/javascript">
      let app = new PIXI.Application({
        width: 750, // default: 800 宽度
        height: 500, // default: 600 高度
        view: document.getElementById("demo_stage"),
      });
      app.renderer.backgroundColor = 0xfddcea; // 设置画布背景色为粉色。0x 示意 16 进制

      PIXI.loader
        .add("imgs/p1.jpg")
        .on("progress", function (loader, resource) {console.log("加载数据进度", loader.progress);
        })
        .load(imgsLoadDone);

      function imgsLoadDone() {console.log("图片素材加载结束啦");
        // 创立图片精灵
        let sprite = PIXI.Sprite.from("imgs/p1.jpg"); // 原始大小 256*256
        sprite.width = "400";
        sprite.height = "400";

        let canvasW = app.screen.width;
        let canvasH = app.screen.height;
        let x = (canvasW - sprite.width) / 2;
        let y = (canvasH - sprite.height) / 2;
        sprite.position.set(x, y);
        app.stage.addChild(sprite);
      }
    </script>
  </body>
</html>

成果如下：

至此图片就在画布中居中显示啦

闪电动画精灵解决

  1. 首先须要加载所需的闪电图片
    因为咱们图片名称大致相同，因而咱们能够应用 for 循环解决
let imgArr = [];
for (let i = 1; i <= 17; i++) {
  let temp = "imgs/ani_" + i + ".png";
  imgArr.push(temp);
}

而后应用 PIXI.loader.add(imgArr)加载图片

关上浏览器开发者工具 Network 选项，能够看到刚刚退出的图片

  1. 创立动画精灵
    须要应用纹理数组创立动画精灵的办法：
    new PIXI.extras.AnimatedSprite(textures,autoUpdate)，第一个参数是用一系列略有不同的图像做的纹理数组，第二个参数是用来判断是否应用 PIXI.ticker.shared 自动更新动画工夫，默认为 true

    • 创立纹理数组：
    let imgSprArr = [];
for (let n = 1; n <= 17; n++) {let tempspr = new PIXI.Texture.fromImage("imgs/ani_" + n + ".png"); // 创立纹理，参数是用于创立纹理的源或源数组
  let temprect = new PIXI.Rectangle(0, 0, 750, 750); // 创立矩形对象，前两个参数定义了 x 和 y 轴坐标地位，后两个参数定义了矩形的 width 和 height
  let imgSprArrItem = new PIXI.Texture(tempspr, temprect); // 创立纹理。第一个参数是创立纹理的根底纹理源，第二个参数是要显示的纹理的矩形框
  imgSprArr.push(imgSprArrItem);
}
    • 创立动画精灵并增加到画布中
    let animatedSpr = new PIXI.extras.AnimatedSprite(imgSprArr);
app.stage.addChild(animatedSpr);
    • 播放动画并设置动画速度
    animatedSpr.animationSpeed = 0.4; // 动画速度，数字越大，运行速度越快；反之，速度越慢；animatedSpr.play();

    成果如下：

    能够看到闪电的地位不对，是因为闪电相干的图片的大小是 750，而咱们的画布大小是 750*500，闪电图片的高度超出了画布的高度，因而咱们须要对闪电精灵进行缩放，缩放比例依据高度进行计算，并保留小数点后 4 位，也就是：

    console.log("animatedSpr 缩放前的宽高 ===", animatedSpr.width, animatedSpr.height);
let _scale = parseFloat(500 / 750).toFixed(4);
animatedSpr.scale.set(_scale, _scale);
console.log("animatedSpr 缩放后的宽高 ===", animatedSpr.width, animatedSpr.height);

    缩放后成果如下：

    缩放后动画精灵的宽度产生了变动，因而须要通过设置 position 进行程度居中解决：x 轴的值即为 (画布的宽度 – 动画精灵缩放后的宽度) / 2

    let x2 = animatedSpr.width;
// let x2 = parseFloat(_scale * 750).toFixed(2); // 依据缩放比例计算动画精灵的实在宽度
animatedSpr.position.set((canvasW - x2) / 2, 0);

    至此我的项目实现，残缺代码如下：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>pixi-demo</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      #demo_stage {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="demo_stage"></canvas>

    <!-- 引入 pixi -->
    <script src="js/pixi.min.js"></script>
    <script type="text/javascript">
      let app = new PIXI.Application({
        width: 750, // default: 800 宽度
        height: 500, // default: 600 高度
        view: document.getElementById("demo_stage"),
      });
      app.renderer.backgroundColor = 0xfddcea; // 设置画布背景色为粉色。0x 示意 16 进制

      let imgArr = [];
      for (let i = 1; i <= 17; i++) {
        let temp = "imgs/ani_" + i + ".png";
        imgArr.push(temp);
      }

      PIXI.loader
        .add("imgs/p1.jpg")
        .add(imgArr)
        .on("progress", function (loader, resource) {console.log("加载数据进度", loader.progress);
        })
        .load(imgsLoadDone);

      function imgsLoadDone() {console.log("图片素材加载结束啦");
        // 创立图片精灵
        let sprite = PIXI.Sprite.from("imgs/p1.jpg"); // 原始大小 256*256
        sprite.width = "400";
        sprite.height = "400";

        let canvasW = app.screen.width;
        let canvasH = app.screen.height;
        let x = (canvasW - sprite.width) / 2;
        let y = (canvasH - sprite.height) / 2;
        sprite.position.set(x, y);
        app.stage.addChild(sprite);

        // 获取 17 张图片的纹理数组
        let imgSprArr = [];
        for (let n = 1; n <= 17; n++) {let tempspr = new PIXI.Texture.fromImage("imgs/ani_" + n + ".png"); // 创立纹理，参数是用于创立纹理的源或源数组
          let temprect = new PIXI.Rectangle(0, 0, 750, 750); // 创立矩形对象，前两个参数定义了 x 和 y 轴坐标地位，后两个参数定义了矩形的 width 和 height
          let imgSprArrItem = new PIXI.Texture(tempspr, temprect); // 创立纹理。第一个参数是创立纹理的根底纹理源，第二个参数是要显示的纹理的矩形框
          imgSprArr.push(imgSprArrItem);
        }

        // 创立动画精灵
        let animatedSpr = new PIXI.extras.AnimatedSprite(imgSprArr);
        console.log(
          "animatedSpr 缩放前的宽高 ===",
          animatedSpr.width,
          animatedSpr.height
        );

        let _scale = parseFloat(500 / 750).toFixed(4);
        animatedSpr.scale.set(_scale, _scale);
        console.log(
          "animatedSpr 缩放后的宽高 ===",
          animatedSpr.width,
          animatedSpr.height
        );
        let x2 = animatedSpr.width;
        // let x2 = parseFloat(_scale * 750).toFixed(2);
        animatedSpr.position.set((canvasW - x2) / 2, 0);
        app.stage.addChild(animatedSpr);
        animatedSpr.animationSpeed = 0.4;
        animatedSpr.play(); // 动画播放}
    </script>
  </body>
</html>
退出移动版