javascript - Stop pixel font from being blurred when rendered - Stack Overflow

admin管理员组

文章数量:1323150

I am trying to create a little game in a pixel retro look and I am using a pixelated font. Unfortunately I am unable to render the font with edges as sharp as they are in the source font.

About my mcve:

I am using this font for fonts/pokemon_classic.ttf (I found no way to host that font online, so no jsfiddle), but you can use any pixel font you like. The example below renders the font like this:

How can I make this text render as sharp as it is in the source font? It should look like this (edited image):

the scale of root may change during runtime to fit the screen

A less elegant solution which would probably work is to fix the alpha of each pixel to be either 0 or 1 depending on some threshold, but I don't know how to do this.

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;
}

I am trying to create a little game in a pixel retro look and I am using a pixelated font. Unfortunately I am unable to render the font with edges as sharp as they are in the source font.

About my mcve:

I am using this font for fonts/pokemon_classic.ttf (I found no way to host that font online, so no jsfiddle), but you can use any pixel font you like. The example below renders the font like this:

How can I make this text render as sharp as it is in the source font? It should look like this (edited image):

the scale of root may change during runtime to fit the screen

A less elegant solution which would probably work is to fix the alpha of each pixel to be either 0 or 1 depending on some threshold, but I don't know how to do this.

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;
}

• javascript
• antialiasing
• pixi.js

Share Follow edited Oct 2, 2019 at 15:15 user128511 asked Apr 15, 2019 at 15:05 NeuronNeuron 5,85155 gold badges4343 silver badges6262 bronze badges 1

• It looks like you are using some small text in the example. Text can be blurry in PIXI when you set the font size to a small number. To fix this, you can just set the font size to 2 or 3 times bigger than you want it to be and then use scale.set() to change it back to its original size. By doing this, It will have a better resolution. – wilson wilson Commented Dec 1, 2019 at 14:57

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Things that can make text blurry....

1. SCALE_MODE
2. Sub-pixel positioning. Turn on roundPixels when creating new PIXI.Application for v4, v5 you can set globally via PIXI.settings.ROUND_PIXELS = true;, or indivudally, displayObject.roundPixels = true;
3. Scaling

So you're good on #1, but #2 and #3 could be issues.

I resolved it by setting resolution like this:

text.resolution = window.devicePixel * scale

It will re-render the text leading to bad performance, so I just apply it for the last value of scale.

If you don't mind having a double resolution for the whole app...

My Pixi.js text and textures were blurry. I increased the resolution of the whole Pixi app. Then your canvas size will double. You can then you options.autoDensity to fit double resolution in the same canvas. https://pixijs.download/dev/docs/PIXI.Application.html

// Pixi.js API from v6.5.1
import * as PIXI from 'pixi.js'; 

PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH; // might help a bit
PIXI.settings.ROUND_PIXELS = true; // might help a bit
PIXI.settings.RESOLUTION = 2;

const app = new PIXI.Application({ width: 750, height: 400, autoDensity: true });

Try the following solution:

text.resolution = 2

本文标签： javascriptStop pixel font from being blurred when renderedStack Overflow