渲染时停止像素字体模糊答案

【问题标题】：Stop pixel font from being blurred when rendered渲染时停止像素字体模糊
【发布时间】：2019-04-15 15:05:41
【问题描述】：

我正在尝试创建一个像素复古外观的小游戏，并且我正在使用像素化字体。不幸的是，我无法渲染边缘与源字体一样锐利的字体。

关于我的 mcve：

我正在为fonts/pokemon_classic.ttf 使用this 字体（我发现无法在线托管该字体，所以没有jsfiddle），但您可以使用任何您喜欢的像素字体。下面的示例呈现这样的字体：

如何使此文本呈现与源字体一样清晰？它应该看起来像这样（编辑后的图像）：

root 的比例可能会在运行时改变以适应屏幕

一个不太优雅但可能可行的解决方案是将每个像素的 alpha 固定为 0 或 1，具体取决于某个阈值，但我不知道该怎么做。

JS：

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
let scale = 30;
let app = new PIXI.Application();
document.body.appendChild(app.view);

app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);

let root = new PIXI.Container();
app.stage.addChild(root);
root.scale.set(scale);

document.fonts.load('8pt "pokemon"').then(() => {
    let text = new PIXI.Text("Test", {fontFamily: 'pokemon', fontSize: 8, fill: 0xff1010});
    root.addChild(text);
});

CSS：

@font-face {
    font-family: 'pokemon';
    src: url("fonts/pokemon_classic.ttf");
}

* {
    padding: 0;
    margin: 0;
}

【问题讨论】：

看起来您在示例中使用了一些小文本。当您将字体大小设置为较小的数字时，PIXI 中的文本可能会变得模糊。要解决此问题，您可以将字体大小设置为比您想要的大 2 或 3 倍，然后使用 scale.set() 将其更改回原来的大小。通过这样做，它将具有更好的分辨率。

标签： javascript antialiasing pixi.js

【解决方案1】：

会使文字模糊的事物......

SCALE_MODE
亚像素定位。在为 v4、v5 创建新的PIXI.Application 时打开roundPixels，您可以通过PIXI.settings.ROUND_PIXELS = true; 全局设置，或单独设置displayObject.roundPixels = true;
缩放

所以你在#1 上很好，但#2 和#3 可能是问题。

【讨论】：

感谢您抽出宝贵的时间，但“X 可能是个问题”不是答案，应该是评论。我已经尝试过建议#2，但没有帮助。 #3 中的一般指针对我也没有帮助。
PixiJS 中的文本模糊可能是多种问题中的任何一种，有时甚至是组合问题，所以我相信我可以说“尝试 x 或 y”。 #3 - 您正在使用root.scale.set(scale); 缩放根阶段，这可能会导致模糊。尝试不缩放基础阶段
这是可以接受的，但不是这样。所以答案应该包含问题的真实答案。如果您有任何建议或想查询更多信息，请在问题下方发表评论。我不想给人粗鲁的印象，或者我不感谢你的帮助，我只是想让你意识到这一点。
你最后找到解决办法了吗？我正在努力解决同样的问题，非常感谢任何帮助:)
@cwirz 是的，我做到了，但你不会喜欢它。我将文本绘制为单独的纹理。之后我迭代了每个（！）像素。有了一个阈值，我决定像素应该是黑色还是白色。就我而言，文本的种类并不多，所以在检索这样的纹理时，我总是将它们保存到字典中。这样每个文本只需要渲染一次并且可以重复使用

【解决方案2】：

我通过这样设置resolution 解决了这个问题：

text.resolution = window.devicePixel * scale

它会重新渲染导致性能不佳的文本，所以我只是将它应用于scale 的最后一个值。

【讨论】：