Pixi.js 绘制小精灵教程

Pixi.js 是一个强大的 2D WebGL 渲染引擎，非常适合创建交互式的图形和动画。下面是一个完整的 Pixi.js 绘制小精灵(Sprite)的教程。

基础设置

你需要在 HTML 中引入 Pixi.js 库：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pixi.js 小精灵示例</title>
    <style>
        body { margin: 0; padding: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://pixijs.download/v7.2.4/pixi.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

创建应用和精灵

在 app.js 文件中：

// 创建应用
const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
});

// 将应用视图添加到DOM
document.body.appendChild(app.view);

// 加载纹理
PIXI.Assets.load('https://pixijs.com/assets/bunny.png').then((texture) => {
    // 创建精灵
    const bunny = new PIXI.Sprite(texture);
    
    // 设置精灵位置
    bunny.x = app.screen.width / 2;
    bunny.y = app.screen.height / 2;
    
    // 设置锚点在中心
    bunny.anchor.set(0.5);
    
    // 添加到舞台
    app.stage.addChild(bunny);
    
    // 添加动画
    app.ticker.add((delta) => {
        bunny.rotation += 0.01 * delta;
    });
});

进阶功能

1. 交互功能

// 使精灵可交互
bunny.eventMode = 'static'; // 或 'dynamic' 或 'auto'
bunny.cursor = 'pointer';

// 添加点击事件
bunny.on('pointerdown', () => {
    bunny.scale.x *= 1.1;
    bunny.scale.y *= 1.1;
});

2. 使用精灵表

// 加载精灵表
PIXI.Assets.load('spritesheet.json').then((sheet) => {
    // 从精灵表创建精灵
    const character = new PIXI.Sprite(sheet.textures['character.png']);
    app.stage.addChild(character);
});

3. 添加滤镜

// 创建滤镜
const blurFilter = new PIXI.BlurFilter();
blurFilter.blur = 2;

// 应用滤镜
bunny.filters = [blurFilter];

4. 使用图形绘制

// 创建图形
const graphics = new PIXI.Graphics();
graphics.beginFill(0xFF0000);
graphics.drawCircle(100, 100, 50);
graphics.endFill();
app.stage.addChild(graphics);

性能优化技巧

使用精灵批处理：将多个精灵放入一个容器中
纹理缓存：重复使用已加载的纹理
合理使用滤镜：滤镜会影响性能
销毁不再使用的对象：释放内存

完整示例

// 初始化应用
const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);

// 加载资源
PIXI.Assets.add('bunny', 'https://pixijs.com/assets/bunny.png');
PIXI.Assets.load(['bunny']).then(setup);

function setup() {
    // 创建精灵
    const bunny = PIXI.Sprite.from('bunny');
    
    // 设置属性
    bunny.anchor.set(0.5);
    bunny.x = app.screen.width / 2;
    bunny.y = app.screen.height / 2;
    
    // 交互设置
    bunny.eventMode = 'static';
    bunny.cursor = 'pointer';
    
    // 点击事件
    bunny.on('pointerdown', () => {
        bunny.scale.x *= 1.1;
        bunny.scale.y *= 1.1;
    });
    
    // 添加到舞台
    app.stage.addChild(bunny);
    
    // 动画
    app.ticker.add((delta) => {
        bunny.rotation += 0.01 * delta;
    });
}

希望这个教程能帮助你开始使用 Pixi.js 创建小精灵！你可以根据需要扩展这些基础功能来创建更复杂的交互式图形应用。

// 来源：https://www.nzw6.com