系列文章：
前言
上一篇已经简单的介绍了 PixiJS 和整个游戏的流程设计，本节就开始带大家一起学习 PixiJS 上手做一个简单的动画效果，为后续游戏开发打好基础
关于 PixiJS
整个站点都是纯英文，这对一些英语不好的小伙伴入门可能是一个阻碍，不过问题也不大，大部分功能使用其实也是日常常用的单词，硬着头皮连蒙带猜基本八九不离十，事后还是蛮有成就感的，大家就当做了个英语测验吧
安装 PixiJS
- 使用 npm
npm install pixi.js
- 外链 （码上掘金引入推荐）
https://pixijs.download/v7.0.2/pixi.min.js 复制代码
Pixi.Js 的应用和舞台
首先我们需要绘制一个游戏区域，充当我们后续填充游戏元素的容器，在 Pixi.js 中，元素的管理是树状的结构，根元素是应用Application，下一级就是舞台 stage，可以理解为根元素下的根容器，接下来的所有可见游戏元素，都需要挂载在舞台下面，本节会以官网的一个案例入手，带大家认识这些对象属性的作用
创建应用 Application
import * as PIXI from 'pixi.js' const config = { width: 800, height: 600, background: '#1099bb' } const app = new PIXI.Application(config) document.body.appendChild(app.view) 复制代码
这时浏览器上就会显示我们的舞台了，后面我们的任务就是一步一步的丰富这个舞台
创建容器 Container
const container = new PIXI.Container() app.stage.addChild(container) 复制代码
顾名思义容器是存放我们元素的载体，一般如果场景比较多的时候，使用容器进行切换会比较方便，如果内容比较简单，直接把元素添加到舞台 stage 效果也是一样的
创建纹理 Texture
const texture = PIXI.Texture.from('https://pixijs.io/examples/examples/assets/bunny.png') 复制代码
我们应用所用到的各种图片资源都需要使用纹理来加载，然后在精灵（Sprite）中调用
创建精灵 Sprite
const bunny = new PIXI.Sprite(texture) container.addChild(bunny) 复制代码
这时右上角就可以看到我们图片里的小兔子了，精灵 Sprite 是我们应用各种元素的载体，我们内容的展示，位置，运动都需要通过操作精灵实现
修改位置 Position
// Move container to the center // container.x = app.screen.width / 2 // container.y = app.screen.height / 2 container.position.set(app.screen.width / 2, app.screen.height / 2) 复制代码
移动位置的操作是通过修改 （x, y） 的坐标值实现的，也可以使用 Position.set 方法修改，比如我们要把小动物移动舞台中间，可以通过移动容器（小动物是添加在容器上），或者直接修改小动物的坐标，这里我们直接移动容器
修改锚点 Anchor
进行上面操作后会发现小动物不怎么居中，这是因为元素的默认起始位置是（0，0）而不是自身的中心，我们一般可以通过设置锚点来实现居中效果
bunny.anchor.set(0.5) 复制代码
加点动画 Ticker
PixiJS 提供了一个定时器 ticker 来帮助我们实现帧动画，只要我们把方法传进去，它就会按一定帧频刷新舞台，从而达到动画效果
例如这里我们做一个小动物的旋转
app.ticker.add((delta) => { // rotate the container! // use delta to create frame-independent transform container.rotation -= 0.01 * delta; }) 复制代码
这时我们就可以看到小动物转动起来啦 ^-^~!
好了，本节我们把 PixiJS 的简单操作都过了一遍，下一节，我们就要用上这些操作，来实现我们游戏的功能了，敬请大家持续关注
水果兄弟 BroFruit（仿 Brotato） - 码上掘金 (juejin.cn)
系列文章：
