CODEWITHSUNDEEP
javascriptantialiasingpixi.js
Neuron
Neuron

Reputation: 5823

Stop pixel font from being blurred when rendered

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:

screenshot of blurry text

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

edited blurry image which shows the text sharp

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

Upvotes: 2

Views: 5353

Answers (4)

Moises Marques
Moises Marques

Reputation: 167

Try the following solution:

text.resolution = 2

Upvotes: 0

Jirik
Jirik

Reputation: 1502

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

Upvotes: 0

CofeeWithRose
CofeeWithRose

Reputation: 11

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.

Upvotes: 1

themoonrat
themoonrat

Reputation: 642

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.

Upvotes: 4

Related Questions