来自GitHub教程 GitHub - Zainking/LearningPixi: ⚡️Pixi教程中文版

PIXIJS教程【从入门到入土-上】地址【https://blog.csdn.net/qq_61672548/article/details/127253760】

5.2 加载纹理贴图集

可以使用Pixi的loader来加载纹理贴图集。如果是用Texture Packer生成的JSON，loader会自动读取数据，并对每一个帧创建纹理。下面就是怎么用loader来加载treasureHunter.json。当它成功加载，setup方法将会执行

loader
  .add("images/treasureHunter.json")
  .load(setup);

现在每一个图像的帧都被加载进Pixi的纹理缓存之中了。你可以使用Texture Packer中定义的他们的名字来取用每一个纹理。

如果你是使用的 loader来加载纹理贴图集, 使用loader的 resources:

let sprite = new Sprite(
  resources["images/treasureHunter.json"].textures["frameId.png"]
);

要创建一个精灵需要输入太多东西了! 所以我建议你给纹理贴图集的textures对象创建一个叫做id的别名，象是这样：

let id = PIXI.loader.resources["images/treasureHunter.json"].textures;

现在你就可以像这样实例化一个精灵了：

let sprite = new Sprite(id["frameId.png"]);

真不错啊~！

六、移动精灵

6.1 移动

现在你知道了如何展示精灵，但是让它们移动呢？很简单：使用Pixi的ticker。这被称为 游戏循环 。任何在游戏循环里的代码都会1秒更新60次。你可以用下面的代码让 cat 精灵以每帧1像素的速率移动。

let icon
function setup() {
    
    
    let id = resources["./images/treasureHunter.json"].textures
    icon = new Sprite(id["icon.png"])
    app.stage.addChild(icon)
    //定义游戏循环
    app.ticker.add(animation)
}

function animation() {
    
    
    icon.x++
}

你也没必要非得用Pixi的ticker来创建游戏循环。如果你喜欢，也可以用requestAnimationFrame像这样创建：

function gameLoop() {
    
    

  //Call this `gameLoop` function on the next screen refresh
  //(which happens 60 times per second)
  requestAnimationFrame(gameLoop);

  //Move the cat
  cat.x += 1;
}

//Start the loop
gameLoop();

（注意 cat 变量需要在setup 和 gameLoop函数之外定义，然后你可以在全局中任何地方都能获取到它们）

你可以让精灵的位置，角度或者大小动起来 - 什么都可以！你会在下面看到更多精灵动画的例子。

6.2 速度属性

为了给你更多的灵活性，这里有两个 速度属性 ：vx和 vy去控制精灵的运动速度。 vx被用来设置精灵在x轴（水平）的速度和方向。vy被用来设置精灵在y轴（垂直）的速度和方向。 他们可以直接更新速度变量并且给精灵设定这些速度值。这是一个用来让你更方便的更新交互式动画的额外的模块。

第一步是给你的精灵创建vx和vy属性，然后给他们初始值。

cat.vx = 0;
cat.vy = 0;

给vx和vy设置为0表示精灵静止。

接下来，在游戏循环中，更新vx和vy为你想让精灵移动的速度值。然后把这些值赋给精灵的x和y属性。下面的代码讲明了你如何利用该技术让cat能够每帧向右下方移动一个像素：

function setup() {
    
    

  //Create the `cat` sprite
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96;
  cat.vx = 0;
  cat.vy = 0;
  app.stage.addChild(cat);

  //Start the game loop
  app.ticker.add(gameLoop);
}

function gameLoop(){
    
    

  //Update the cat's velocity
  cat.vx = 1;
  cat.vy = 1;

  //Apply the velocity values to the cat's
  //position to make it move
  cat.x += cat.vx;
  cat.y += cat.vy;
}

如果你想让猫往不同的方向移动怎么办？可以把它的 vx 赋值为 -1让猫向左移动。可以把它的 vy 赋值为 -1让猫向上移动。为了让猫移动的更快一点，把值设的更大一点，像3, 5, -2, 或者 -4。

你会在前面看到如何通过利用vx和vy的速度值来模块化精灵的速度，它对游戏的键盘和鼠标控制系统很有帮助，而且更容易实现物理模拟。

七、给精灵分组

7.1 Container分组

分组让你能够让你创建游戏场景，并且像一个单一单元那样管理相似的精灵图。Pixi有一个对象叫 Container，它可以帮你做这些工作。让我们弄清楚它是怎么工作的。

想象一下你想展示三个精灵：一只猫，一只刺猬和一只老虎。创建它们，然后设置它们的位置 - 但是不要把它们添加到舞台上。

//The cat
let cat = new Sprite(id["cat.png"]);
cat.position.set(16, 16);

//The hedgehog
let hedgehog = new Sprite(id["hedgehog.png"]);
hedgehog.position.set(32, 32);

//The tiger
let tiger = new Sprite(id["tiger.png"]);
tiger.position.set(64, 64);

让后创建一个animals容器像这样去把他们聚合在一起：

let animals = new PIXI.Container();

然后用 addChild 去把精灵图 添加到分组中 。

animals.addChild(cat);
animals.addChild(hedgehog);
animals.addChild(tiger);

最后把分组添加到舞台上。

app.stage.addChild(animals);

（你知道的，stage对象也是一个Container。它是所有Pixi精灵的根容器。）

这就是上面代码的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nFgkW4af-1665574697605)(https://github.com/Zainking/LearningPixi/raw/master/examples/images/screenshots/18.png)]

你是看不到这个包含精灵图的animals分组的。它仅仅是个容器而已。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XVkE8YKn-1665574697606)(https://github.com/Zainking/LearningPixi/raw/master/examples/images/screenshots/19.png)]

不过你现在可以像对待一个单一单元一样对待animals分组。你可以把Container当作是一个特殊类型的不包含任何纹理的精灵。

如果你需要获取animals包含的所有子精灵，你可以用它的children数组获取。

console.log(animals.children)
//Displays: Array [Object, Object, Object]

这告诉你animals有三个子精灵。

因为animals分组跟其他精灵一样，你可以改变它的x和y的值，alpha, scale和其他精灵的属性。所有你改变了的父容器的属性值，都会改变它的子精灵的相应属性。所以如果你设置分组的x和y的位置，所有的子精灵都会相对于分组的左上角重新定位。如果你设置了 animals的x和y的位置为64会发生什么呢？

animals.position.set(64, 64);

整个分组的精灵都会向右和向下移动64像素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ccUh7fQ-1665574697607)(https://github.com/Zainking/LearningPixi/raw/master/examples/images/screenshots/20.png)]

animals分组也有它自己的尺寸，它是以包含的精灵所占的区域计算出来的。你可以像这样来获取width和height的值：

console.log(animals.width);
//Displays: 112

console.log(animals.height);
//Displays: 112

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nqRu3lhU-1665574697608)(https://github.com/Zainking/LearningPixi/raw/master/examples/images/screenshots/21.png)]

如果你改变了分组的宽和高会发生什么呢？

animals.width = 200;
animals.height = 200;

所有的孩子精灵都会缩放到刚才你设定的那个值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wjxt9EoF-1665574697608)(https://github.com/Zainking/LearningPixi/raw/master/examples/images/screenshots/22.png)]

如果你喜欢，你可以在一个 Container 里嵌套许多其他Container，如果你需要，完全可以创建一个更深的层次。然而，一个 DisplayObject （像 Sprite 或者其他 Container）只能一次属于一个父级。如果你用 addChild 让一个精灵成为其他精灵的孩子。Pixi会自动移除它当前的父级，这是一个不用你操心的有用的管理方式。

7.2 局部位置和全局位置

当你往一个Container添加一个精灵时，它的x和y的位置是 相对于分组的左上角 的。这是精灵的局部位置，举个例子，你认为这个猫在这张图的哪个位置？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C5MDQRit-1665574697610)(https://github.com/Zainking/LearningPixi/raw/master/examples/images/screenshots/20.png)]

让我们看看：

console.log(cat.x);
//Displays: 16

16？是的！这因为猫的只往分组的左上角偏移了16个像素。16是猫的局部位置。

精灵图还有 全局位置 。全局位置是舞台左上角到精灵锚点（通常是精灵的左上角）的距离。你可以通过toGlobal方法的帮助找到精灵图的全局位置：

parentSprite.toGlobal(childSprite.position)

这意味着你能在animals分组里找到猫的全局位置：

console.log(animals.toGlobal(cat.position));
//Displays: Object {x: 80, y: 80...};

上面给你返回了x和y的值为80。这正是猫相对于舞台左上角的相对位置，也就是全局位置。

如果你想知道一个精灵的全局位置，但是不知道精灵的父容器怎么办？每个精灵图有一个属性叫parent 能告诉你精灵的父级是什么。在上面的例子中，猫的父级是 animals。这意味着你可以像如下代码一样得到猫的全局位置：

cat.parent.toGlobal(cat.position);

即使你不知道猫的当前父级是谁，上面的代码依然能够正确工作。

这还有一种方式能够计算出全局位置！而且，它实际上最好的方式，所以听好啦！如果你想知道精灵到canvas左上角的距离，但是不知道或者不关心精灵的父亲是谁，用getGlobalPosition方法。这里展示如何用它来找到老虎的全局位置：

tiger.getGlobalPosition().x
tiger.getGlobalPosition().y

它会给你返回x和y的值为128。 特别的是，getGlobalPosition是高精度的：当精灵的局部位置改变的同时，它会返回给你精确的全局位置。我曾要求Pixi开发团队添加这个特殊的特性，以便于开发精确的碰撞检测游戏。（谢谢Matt和团队真的把他加上去了！）

如果你想转换全局位置为局部位置怎么办？你可以用toLocal方法。它的工作方式类似，但是通常是这种通用的格式：

sprite.toLocal(sprite.position, anyOtherSprite)

用 toLocal 找到一个精灵和其他任何一个精灵之间的距离。这段代码告诉你如何获取老虎的相对于猫头鹰的局部位置。

tiger.toLocal(tiger.position, hedgehog).x
tiger.toLocal(tiger.position, hedgehog).y

上面的代码会返回给你一个32的x值和一个32的y值。你可以在例子中看到老虎的左上角和猫头鹰的左上角距离32像素。

7.3 ParticleContainer 分组

Pixi有一个额外的，高性能的方式去分组精灵的方法称作：ParticleContainer（PIXI.ParticleContainer）。任何在ParticleContainer 里的精灵都会比在一个普通的Container的渲染速度快2到5倍。这是用于提升游戏性能的一个很棒的方法。

可以像这样创建 ParticleContainer ：

let superFastSprites = new PIXI.particles.ParticleContainer();

然后用 addChild 去往里添加精灵，就像往普通的 Container添加一样。

如果你决定用ParticleContainer你必须做出一些妥协。在 ParticleContainer 里的精灵图只有一小部分基本属性：x, y, width, height, scale, pivot, alpha, visible - 就这么多。而且，它包含的精灵不能再继续嵌套自己的孩子精灵。 ParticleContainer 也不能用Pixi的先进的视觉效果像过滤器和混合模式。每个 ParticleContainer 只能用一个纹理（所以如果你想让精灵有不同的表现方式你将不得不更换雪碧图）。但是为了得到巨大的性能提升，这些妥协通常是值得的。你可以在同一个项目中同时用 Container 和 ParticleContainer，然后微调一下你自己的优化

八、文本

使用一个 Text 对象 (PIXI.Text)在舞台上展示文本。简单来说，你可以这样使用它：

let message = new Text("Hello Pixi!");
app.stage.addChild(message);

这将会在画布上展示文本“Hello, Pixi”。Pixi的文本对象继承自Sprite类，所以它包含了所有相同的属性，像x, y, width, height, alpha, 和 rotation。你可以像处理其他精灵一样在舞台上定位或调整文本。例如，你可以像下面这样使用position.set来设置message的x和y位置：

message.position.set(54, 96);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-68Ij0amm-1665574697611)(https://github.com/Zainking/LearningPixi/raw/master/examples/images/screenshots/24.png)]

这样你会得到基础的未加修饰的文本。但是如果你想要更绚丽的文字，使用Pixi的TextStyle函数来自定义文字效果。下面展示如何操作：

let style = new TextStyle({
    
    
  fontFamily: "Arial",
  fontSize: 36,
  fill: "white",
  stroke: '#ff3300',
  strokeThickness: 4,
  dropShadow: true,
  dropShadowColor: "#000000",
  dropShadowBlur: 4,
  dropShadowAngle: Math.PI / 6,
  dropShadowDistance: 6,
});

这将创建一个新的包含所有你想用的样式的style对象。所有样式属性，see here。

添加style对象作为Text函数的第二个参数来应用样式到文本上，就像这样：

let message = new Text("Hello Pixi!", style);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FKl9zEOQ-1665574697611)(https://github.com/Zainking/LearningPixi/raw/master/examples/images/screenshots/24.5.png)]

如果你想要在你创建文本对象之后改变它的内容，使用text属性。

message.text = "Text changed!";

如果你想要重新定义样式属性，使用style属性。

message.style = {
    
    fill: "black", font: "16px PetMe64"};

九、碰撞检测

碰撞检测函数
hitTestRectangle 函数都有些什么呢？它做了什么，还有它是如何工作的？

function hitTestRectangle(r1, r2) {
    
    

  //Define the variables we'll need to calculate
  let hit, combinedHalfWidths, combinedHalfHeights, vx, vy;

  //hit will determine whether there's a collision
  hit = false;

  //Find the center points of each sprite
  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;

  //Find the half-widths and half-heights of each sprite
  r1.halfWidth = r1.width / 2;
  r1.halfHeight = r1.height / 2;
  r2.halfWidth = r2.width / 2;
  r2.halfHeight = r2.height / 2;

  //Calculate the distance vector between the sprites
  vx = r1.centerX - r2.centerX;
  vy = r1.centerY - r2.centerY;

  //Figure out the combined half-widths and half-heights
  combinedHalfWidths = r1.halfWidth + r2.halfWidth;
  combinedHalfHeights = r1.halfHeight + r2.halfHeight;

  //Check for a collision on the x axis
  if (Math.abs(vx) < combinedHalfWidths) {
    
    

    //A collision might be occuring. Check for a collision on the y axis
    if (Math.abs(vy) < combinedHalfHeights) {
    
    

      //There's definitely a collision happening
      hit = true;
    } else {
    
    

      //There's no collision on the y axis
      hit = false;
    }
  } else {
    
    

    //There's no collision on the x axis
    hit = false;
  }

  //`hit` will be either `true` or `false`
  return hit;
};

现在你知道了如何制造种类繁多的图形对象，但是你能用他们做什么？一个有趣的事情是利用它制作一个简单的 碰撞检测系统 。你可以用一个叫做：hitTestRectangle 的自定义的函数来检测两个矩形精灵是否接触。

hitTestRectangle(spriteOne, spriteTwo)

如果它们重叠， hitTestRectangle 会返回 true。你可以用 hitTestRectangle 结合 if 条件语句去检测两个精灵是否碰撞：

if (hitTestRectangle(cat, box)) {
    
    
  //There's a collision
} else {
    
    
  //There's no collision
}

正如你所见， hitTestRectangle 是走入游戏设计这片宇宙的大门。

运行在 examples 文件夹的 collisionDetection.html 文件，看看怎么用 hitTestRectangle工作。用方向按键去移动猫，如果猫碰到了盒子，盒子会变成红色，然后 “Hit!” 文字对象会显示出来。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dwYSnQwk-1665574697612)(https://github.com/Zainking/LearningPixi/raw/master/examples/images/screenshots/25.png)]

你已经看到了创建这些所有元素的代码，让猫移动的键盘控制。唯一的新的东西就是 hitTestRectangle 函数被用在 play 函数里检测碰撞。

function play(delta) {
    
    

  //use the cat's velocity to make it move
  cat.x += cat.vx;
  cat.y += cat.vy;

  //check for a collision between the cat and the box
  if (hitTestRectangle(cat, box)) {
    
    

    //if there's a collision, change the message text
    //and tint the box red
    message.text = "hit!";
    box.tint = 0xff3300;

  } else {
    
    

    //if there's no collision, reset the message
    //text and the box's color
    message.text = "No collision...";
    box.tint = 0xccff99;
  }
}

play 函数被每秒调用了60次，每一次这个 if 条件语句都会在猫和盒子之间进行碰撞检测。如果 hitTestRectangle 为 true，那么文字 message 对象会用 setText 方法去显示 “Hit”：

message.text = "Hit!";

这个盒子的颜色改变的效果是把盒子的 tint 属性改成一个16进制的红色的值实现的。

box.tint = 0xff3300;

如果没有碰撞，消息和盒子会保持它们的原始状态。

message.text = "No collision...";
box.tint = 0xccff99;

代码很简单，但是你已经创造了一个看起来完全活着的互动的世界！它简直跟魔术一样！令人惊讶的是，你大概已经拥有了你需要用Pixi制作游戏的全部技能！

>>> 2022.10.12 19:24 教程已经全部更新完，很大部分都是来自github 原文地址【https://github.com/Zainking/learningPixi】本来我只想做一个文档方便我自己在开发的时候查阅 然后觉得PIXIJS在国内的教程很少 便把此文章放到了CSDN上，能有机会帮助需要的人，因为很多朋友还是很少去国外找教程。PIXIJS还有很多其他很好的教程 【https://pixijs.com/tutorials/】去这里可以查看。

教程原文地址 GitHub - Zainking/LearningPixi: ⚡️Pixi教程中文版

附加

<<< 2022-10-17 21:52 添加一些PixiJS 开发常用API的使用方法，这部分全靠自己看官方文档和实践摸索，难度还是比较大的。官方API文档都是英文的，虽然浏览器带翻译，但是效果并不好，我感觉还不如不翻译，因为如果不是写在代码块的代码也会被翻译，有些变量名或者方法名写在代码块外，然后给翻译成中文，这会让你相当的蒙蔽~ 一些翻译意思也不到位。所以只有中英结合着看~

精灵表

官方教程【小精灵 API 文档 (pixijs.download)】

在创建动画精灵中需要用到

实用程序类，用于维护对单个 Sprites 表中的纹理集合的引用。

要从代码访问子画面表，您可以将其JSON数据文件传递给Pixi的加载器：

PIXI.Loader.shared.add("images/spritesheet.json").load(setup);

function setup() {
    
    
  let sheet = PIXI.Loader.shared.resources["images/spritesheet.json"].spritesheet;
  ...
}

动画精灵

官方教程【PixiJS API Documentation】

1. 创建精灵动画

1.1 创建精灵动画一般方法

注意和创建普通精灵不一样，注意差别 【Loader.shared】

PIXI.Loader.shared.add("./images/down.json").load(setup);

function setup() {
    
    
  let sheet = PIXI.Loader.shared.resources["./images/spritesheet.json"].spritesheet;
  let animatedSprite = new PIXI.AnimatedSprite(sheet.animations["down"]);
  ...
}

1.2 创建精灵帧的简单方法

• 从纹理帧创建AnimatedSprite的简单方法

PIXI.AnimatedSprite.fromFrames (frames)

• 从图片创建AnimatedSprite的简单方法

PIXI.AnimatedSprite.fromImages (images)

2.常用方法

2.1 play()

动画精灵开始运动（图片开始循环）

 animatedSprte.play()

2.2 stop ()

动画精灵停止运动，停止在第一帧

 animatedSprte.stop ()

2.3 update()

我不太清楚这个update是怎么用的，下面是官方的介绍，我没看懂。

Updates the object transform for rendering.

控制动画精灵帧切换速度可以用 animatedSprte.animationSpeed = 0.1 数字越小越慢

2.4 gotoAndPlay()

gotoAndPlay(frameNumber) void

转到一个特定的帧并开始播放AnimatedSprite。

2.5 gotoAndStop ()

gotoAndStop (frameNumber) void

停止AnimatedSprite并进入特定帧。

2.6 destroy ()

停止AnimatedSprite并销毁它。

2.7 小demo（部分代码）

// 简单方法创建动画精灵
let ss = new PIXI.AnimatedSprite.fromImages(['./images/down1.png', './images/down2.png', './images/down3.png', './images/down4.png'])
//添加到舞台
app.stage.addChild(ss)
//设置精灵位置
ss.y = 220
ss.animationSpeed = 0.1
// ss.play()
//从第一张图片开始
ss.gotoAndPlay(0)
//停在第二张图片
ss.gotoAndStop(1)
//销毁
ss.destroy()