Text Size Changes With Resolution

[Taz]

Hi, I'm trying to build my HUD with PIXI.Text, but am having problem that the text is bigger when resolution is larger. For example when l load the page with browser at 200% zoom then my HUD ends up being twice as big. I want the text to stay the same size thou - higher resolution should make it look crisper not larger. Any help/ideas for this? Thanks!

// create app
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    resolution: window.devicePixelRatio,
    autoResize: true,
    antialias: true,
    backgroundColor: 0xFFFFFF
});
document.body.appendChild(app.view);

// create text
var text = new PIXI.Text("TESTING");
app.stage.addChild(text);

 

[ivan.popelyshev]

Please checkout the latest version first. Then lets try different things:

 

text.resolution = renderer.resolution;
//or
text.resolution = 1;

 

[Taz]

Thanks I double-checked and I'm on the latest pixi version 4.5.4. I tried setting the resolution like you said but it didn't have any effect. I looked in Text.prototype.renderWebGL and it checks and sets the resolution to renderer.resolution automatically each frame. I changed that to always set it to 1 and the text is still 2X size but it's blurry (which makes sense I think if browser is stretching it to match renderer's resolution).

[ivan.popelyshev]

use linear filtering, execute this before text gets rendered first time:

text.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.LINEAR;

 

[Taz]

OK I tried that but it's the same. Hmm, maybe I should explain what I'm after better thou. For other elements I had created a texture from html-canvas (if resolution is 2X then I draw twice as big and use 2 for texture's resolution). So on the screen it ends up being the same size and isn't blurry, whether resolution is 1X or 2X. I really want to achieve the same thing with the text

[Taz]

Aha! Dividing font size by resolution seems to work to preserve size and quality (mostly), like this:

text.style.fontSize = (FONT_SIZE / app.renderer.resolution) + "px";

LOL once I explained what I wanted to do the answer popped out at me

[ivan.popelyshev]

oh, that's interesting

[Taz]

Yeah it seems like resolution should affect quality not size of what we see on screen. Not sure why above workaround is needed..