Я пытаюсь создать маленькую игру в пиксельном ретро-стиле и использую пиксельный шрифт. К сожалению, я не могу отобразить шрифт с такими же резкими краями, как в исходном шрифте.
О моем mcve:
Я использую этот шрифт для fonts/pokemon_classic.ttf (я не нашел способа разместить этот шрифт в Интернете, поэтому не используйте jsfiddle), но вы можете использовать любой пиксельный шрифт, который вам нравится.
Пример ниже отображает шрифт следующим образом:
Как я могу сделать этот текст таким же четким, как и в исходном шрифте? Это должно выглядеть так (отредактированное изображение):
масштаб root может измениться во время выполнения, чтобы соответствовать экрану
Менее элегантное решение, которое, вероятно, сработало бы, состоит в том, чтобы зафиксировать альфа каждого пикселя равным 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;
}