pixi.js开箱测评

我正在参与掘金创作者训练营第6期，点击了解活动详情

大家看到这个名字，肯定都很陌生，我们工作中其实并不常用这个，我是在做某一2d游戏项目的时候接触到的，这个框架在2d渲染速度这块很棒，同时他还是开源免费的，文档描述API也很全面，看着文档能够帮助我们解决掉大部分的2d渲染的问题，它最重要的是能够兼容所有设备，让我们永无兼容的烦恼

官网地址:pixi.js

我们可以下载下来然后通过手动script标签的方式进行引入

 <script src="pixi/pixi.min.js"></script>

通过创建一个实例并插入到页面中，我们可以传递配置参数，对创建的元素进行配置

let app = new PIXI.Application({width: 256, height: 256});
document.body.appendChild(app.view);

我们可以添加精灵图为其做出一些其他效果，通过我们可以对图片进行位置移动

PIXI.utils.TextureCache["images/cat.png"];

还可以使用键盘进行进行控制，在这里我们也无需担心不会，因为官网在每一步都对其做出了小案例，比如键盘移动，我们调用这个方法就可以获取到我们现在按下的按键是哪个然后对其做出相应的操作

function keyboard(value) {
  let key = {};
  key.value = value;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = event => {
    if (event.key === key.value) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false;
      event.preventDefault();
    }
  };

  //The `upHandler`
  key.upHandler = event => {
    if (event.key === key.value) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true;
      event.preventDefault();
    }
  };

  //Attach event listeners
  const downListener = key.downHandler.bind(key);
  const upListener = key.upHandler.bind(key);
  
  window.addEventListener(
    "keydown", downListener, false
  );
  window.addEventListener(
    "keyup", upListener, false
  );
  
  // Detach event listeners
  key.unsubscribe = () => {
    window.removeEventListener("keydown", downListener);
    window.removeEventListener("keyup", upListener);
  };
  
  return key;
}

它还可以去监听两个物体是否发生了碰撞

function hitTestRectangle(r1, r2) {
  let hit, combinedHalfWidths, combinedHalfHeights, vx, vy;
  hit = false;
  r1.centerX = r1.x + r1.width / 2;
  r1.centerY = r1.y + r1.height / 2;
  r2.centerX = r2.x + r2.width / 2;
  r2.centerY = r2.y + r2.height / 2;
  r1.halfWidth = r1.width / 2;
  r1.halfHeight = r1.height / 2;
  r2.halfWidth = r2.width / 2;
  r2.halfHeight = r2.height / 2;
  vx = r1.centerX - r2.centerX;
  vy = r1.centerY - r2.centerY;
  combinedHalfWidths = r1.halfWidth + r2.halfWidth;
  combinedHalfHeights = r1.halfHeight + r2.halfHeight;
  if (Math.abs(vx) < combinedHalfWidths) {
    if (Math.abs(vy) < combinedHalfHeights) {
      hit = true;
    } else {
      hit = false;
    }
  } else {
  }
  return hit;
};

pixi.js官网贴心的给出了一些小案例，我们可以一遍看着文档一遍进行操作,它还canvas的绘制功能，我们可以通过它去绘制出一些我们想要的图案

坚持努力，无惧未来！