通过飞机大战游戏学习PixiJs基操【上】

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

前言

这段时间在看PixiJs的官方文档，正好又有1024的新活动，所以就决定拿PixiJs写一个比较经典的掌机游戏飞机大战, 还想通过文字将我实现游戏的思考，过程中遇到的问题记录下来，作为入门PixiJs的系列文章来学习，本文是入门PixiJs的系列文章的第一篇，通过本文，你能够学到：

• 完成一款游戏所需要了解的PixiJs内置API
• 如何进行外部资源加载的封装
• 如何创建应用
• 实现游戏所需要的扩展库
• 创建场景
• 创建飞机

全文阅读时间预计八分半，整体难度适中，适合初学者学习。

为PixiJs的内置API创建快捷方式

PixiJs的API基本都是通过暴露的全局对象PIXI来调用的，为了方便我们调用，我们可以通过常量的方式来为他们创建“快捷方式”

// 应用的管理类
const Application = PIXI.Application;
// 容器创建类
const Container = PIXI.Container;
// 精灵管理类
const Sprite = PIXI.Sprite;
// 资源加载实例
const loader = new PIXI.Loader();
// 因为想要用响应式的方式，所以这里将整个页面大小通过常量保存了一下，游戏面向的是移动端，所以设置为了375最大
const screenWidth = document.body.clientWidth > 375 ? 375 : document.body.clientWidth
const screenHeight = document.body.clientHeight > 667 ? 667: document.body.clientHeight

封装资源加载的方法

PixiJs基于性能的考虑，提供了资源的加载类PIXI.Loader, 实例化后就是资源加载器，资源加载器通过add方法添加资源到纹理缓存，之后精灵的纹理就是从纹理缓存中进行加载的

loader.add(name, path); // name: 资源别名 path: 资源路径

资源加载的方法是loader.load(callback), 回调函数会在资源全部加载完成后执行，回调函数会接受两个传递过来的参数，一个是当前的加载器，一个是当前加载器所加载的纹理缓存对象

loader.load((loader, allTexture) => {
    // 加载完毕回调
    textures = allTexture;
  });

所以，我们可以将所有的资源维护在一个数组里，然后封装一个资源加载的函数，这样我们需要添加新资源的时候，只需要维护数组即可

  // 加载资源
  let textures = null
  const resources = {
    bg: 'https://pic.qy566.com/pixijs/images/bg.png',
    boom: 'https://pic.qy566.com/pixijs/images/boom.json',
    plane: 'https://pic.qy566.com/pixijs/images/plane.png',
    bullet: 'https://pic.qy566.com/pixijs/images/bullet.png',
    obstacle: 'https://pic.qy566.com/pixijs/images/obstacle.png'
  }
  function loadResources() {
    for (let i in resources) {
      loader.add(i, resources[i]);
    }
    loader.load((loader, allTexture) => {
      // 加载完毕回调, 注意这里的顺序，因为setup函数内需要通过缓存对象获取缓存的纹理，所以必须先进行赋值，后执行函数
      textures = allTexture;
      setup(); //执行创建精灵等操作
    });
  }

应用初始化

一个Pixi应用，首先要做的就是通过Application进行应用的初始化

  // init 函数
  function init() {
    app = new Application({
      width: screenWidth,
      height: screenHeight,
      antialiasing: true, // 抗锯齿
      transparent: false, // 背景透明
      resolution: 1 // 渲染倍数，会影响实际应用的渲染大小
    });
    document.body.append(app.view);
    loadResources();
  }
  // init要放在页面最底部来执行，因为资源加载完成后就会执行精灵舞台创建等操作，所以需要放在我们把所有方法都声明完之后
  init()

扩展库

• bumpJs 国外一位大神写的碰撞检测库
• tweenJs 国外大神的动画库，结合PixiJs可以实现补间动画
• soundJs 加载控制生成声音的音效库

接下来的内容就要正式进入正题了

创建场景和飞机

创建场景的方法写在了setup内，函数会在资源全部加载完成后执行

// 场景画布容器
let scene = null
// 飞机
let plane = null
 function setup() {
    // 容器相当于分组，将一系列精灵维护在同一个分组内
    scene = new Container();
    scene.name = 'scene';
    scene.width = screenWidth;
    scene.height = screenHeight;
    scene.x = 0;
    scene.y = 0;
    // 舞台内添加场景
    app.stage.addChild(scene);
    // 添加背景
    let bg = new Sprite(textures.bg.texture);
    bg.width = screenWidth;
    bg.height = screenHeight;
    bg.x = 0;
    bg.y = 0;
    scene.addChild(bg);
    // 创建飞机
    plane = new Sprite(textures.plane.texture);
    plane.name = 'plane';
    plane.width = screenWidth * .2;
    plane.height = plane.width;
    plane.x = screenWidth * .5 - (plane.width / 2);
    plane.y = screenHeight * .8 - (plane.height / 2);
    // 响应事件
    plane.interactive = true;
    scene.addChild(plane);
}

小结

通过上面的阅读，相信已经对PixiJs的资源加载策略，舞台，精灵创建有了初步的了解，接下来，我们需要做的就是让飞机跟随我们的鼠标动起来，然后飞机还需要会发射子弹，还需要生成障碍物，添加发射子弹的音效，处理碰撞逻辑，添加开始结束逻辑， 处理得分或计时策略等等。。。预知后事如何 且看下集 通过飞机大战游戏学习PixiJs基操【下】

码上掘金

抢鲜试玩版