用 Pixi.js 仿一个 Brotato (二 基础篇)

开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

系列文章：

• 用 Pixi.js 仿一个 Brotato (一) - AdminJS (Admin.net)

• 用 Pixi.js 仿一个 Brotato (二) - AdminJS (Admin.net)

前言

上一篇已经简单的介绍了 PixiJS 和整个游戏的流程设计，本节就开始带大家一起学习 PixiJS 上手做一个简单的动画效果，为后续游戏开发打好基础

关于 PixiJS

PixiJS官网

整个站点都是纯英文，这对一些英语不好的小伙伴入门可能是一个阻碍，不过问题也不大，大部分功能使用其实也是日常常用的单词，硬着头皮连蒙带猜基本八九不离十，事后还是蛮有成就感的，大家就当做了个英语测验吧

安装 PixiJS

• 使用 npm

npm install pixi.js

• 外链 （码上AdminJS引入推荐）

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 的简单操作都过了一遍，下一节，我们就要用上这些操作，来实现我们游戏的功能了，敬请大家持续关注

系列文章：

• 用 Pixi.js 仿一个 Brotato (一) - AdminJS (Admin.net)

• 用 Pixi.js 仿一个 Brotato (二) - AdminJS (Admin.net)