如何在Pixi.js中使用Nearest Neighbor缩放模式渲染像素画？

Pixi.js已将原有的SCALE_MODES枚举替换为字符串常量：原SCALE_MODES.NEAREST对应'nearest'，SCALE_MODES.LINEAR对应'linear'。以下是几种正确设置Nearest Neighbor缩放模式渲染像素画的实现方式：

1. 加载纹理时直接指定缩放模式 #

加载像素画资源时，直接在纹理选项中设置缩放模式，确保纹理从一开始就以像素化方式渲染：

// 从图片路径创建纹理并指定缩放模式
const pixelTexture = PIXI.Texture.from('pixel-sprite.png', { scaleMode: 'nearest' });
const pixelSprite = new PIXI.Sprite(pixelTexture);

// 将精灵添加到应用舞台
app.stage.addChild(pixelSprite);

2. 修改已加载纹理的缩放模式 #

如果纹理已经加载完成，可通过修改基础纹理的缩放模式并更新生效：

// 假设pixelSprite是已创建的精灵
pixelSprite.texture.baseTexture.scaleMode = 'nearest';
// 必须调用update方法触发纹理更新
pixelSprite.texture.baseTexture.update();

3. 全局设置默认缩放模式 #

如果你的项目中大部分都是像素画，可以全局设置默认缩放模式，所有新加载的纹理都会自动应用：

// 全局设置默认缩放模式为Nearest Neighbor
PIXI.settings.SCALE_MODE = 'nearest';

额外注意 #

• 确保像素画精灵的缩放倍数为整数（比如2x、4x），非整数缩放可能导致边缘模糊，破坏像素风格。
• 使用Loader加载资源时，同样可以在加载配置中指定缩放模式：

PIXI.Loader.shared.add('pixel-character', 'character.png', { scaleMode: 'nearest' })
  .load((loader, resources) => {
    const charSprite = new PIXI.Sprite(resources['pixel-character'].texture);
    app.stage.addChild(charSprite);
  });

内容的提问来源于stack exchange，提问作者Jerry Green