PixiJS教程（一）：创建精灵

Pixi.js中的精灵（Sprite）是游戏开发中常见的概念，特指用于在屏幕上渲染的图像或纹理（Texture）的实例。在Pixi.js中，精灵是基本元素之一，通常用于显示图像。

本教程采用PixiJS 7.2版本

精灵在Pixi.js中的使用涉及以下几个主要步骤：

创建精灵

创建精灵的方法有多种，这里展示比较常用的

const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight })
document.body.appendChild(app.view)

const texture = PIXI.Texture.from('/public/player.png') //创建一个纹理对象，然后加载纹理
const sprite = new PIXI.Sprite(texture) //创建一个精灵，并将纹理赋值给该精灵
sprite.width = 100    
sprite.height = 100
sprite.position.set(10, 10)  //设置精灵的宽高和位置
app.stage.addChild(sprite)   //将精灵添加到舞台上显示

 

第一行代码先初始化PixiJS应用程序对象，然后添加到body标签内显示

这行代码会创建一个精灵，并加载指定的图片。
设置精灵属性：可以设置精灵的位置（如sprite.x和sprite.y）、旋转、缩放等属性。
将精灵添加到舞台：使用app.stage.addChild(sprite);将精灵添加到Pixi.js应用的舞台（Stage）上。这样精灵就可以显示出来了

此外，Pixi.js的精灵还支持一些高级特性，如：

1.着色（Tinting）：可以通过设置sprite.tint属性给图片着色。
2.渲染模式（Blend Modes）：支持多种渲染模式，如NORMAL、ADD、MULTIPLY和SCREEN等。
3.锚点（Anchor）：用于设置精灵的旋转和缩放中心。

放大

// sprite.width = 100
// sprite.height = 100
sprite.position.set(10, 10)  //设置精灵的宽高和位置
sprite.scale.set(3)          //放大3倍
app.stage.addChild(sprite)   //将精灵添加到舞台上显示

 设置scale.set(倍数)可以将精灵方法，但要注意，不能把宽高写死，否则无效果

旋转

在PixiJS中，你可以通过修改PIXI.Sprite对象的rotation属性来旋转精灵。rotation属性是以弧度（radians）为单位的，所以如果你想要以角度（degrees）来旋转精灵，你需要将角度转换为弧度。

sprite.rotation += 1;

 

一直旋转

app.ticker.add(() => {
    // 假设你想要每帧旋转1度，你需要将1度转换为弧度
    const rotationInRadians = PIXI.DEG_TO_RAD * 1;
    sprite.rotation += rotationInRadians;
});

在这个示例中，PIXI.DEG_TO_RAD是一个常量，用于将角度转换为弧度。我们将其与每帧想要旋转的度数相乘，然后将结果添加到精灵的rotation属性上。这会导致精灵在每次应用更新时都旋转一定的角度。

注意，app.ticker.add()方法用于添加一个回调函数，该回调函数将在每次PixiJS的ticker更新时被调用。这是实现动画效果的常见方式。

如果你想要更精细地控制旋转动画，例如添加旋转的缓动效果，你可能需要使用一个专门的动画库或手动实现缓动算法。但上面的示例提供了一个基本的框架，你可以在其基础上进行扩展和定制。

Pixi.js是一个流行的2D渲染引擎，主要用于创建交互式的图形和动画。除了精灵之外，它还支持图形（Graphics）、文本等多种元素，并具有良好的跨平台支持和可扩展性。

关于精灵更多的方法请参考官方API文档

https://pixijs.download/v7.x/docs/index.html