Text and resolution

[br77mont]

Hi everyboby,

I have a surely a trivial question for some of you, but What is the good rule to have always  crispy texts in pixi.js.

Something like ?

 this.text = new PIXI.Text(this.model.text, this.model.style);

this.text.resolution = window.devicePixelRatio;

[evoactivity]

The absolute simplest way to acheive this is by setting the correct options for your application.

const app = new PIXI.Application({
  resolution: window.devicePixelRatio || 1,
  autoDensity: true,
  resizeTo: document.querySelector('.pixi-container'),
  antialias: true
});

By using window.devicePixelRatio to set the resolution we use the browser to determine the native resolution to render, eg a retina display will return a value of 2.

Using autoDensity: true tells pixi to resize the canvas with css perctange units so the browser will properly scale the canvas to our intended size. We need this because a resolution of 2 will create a canvas twice the size of your intended display width, eg a canvas that was 1980 is now 3960, the library will apply css width: 100%; height: 100%; to the canvas element which will cause the canvas to be the intended 1980 wide but with double the pixel resolution.

I'm using reiszeTo here to keep my canvas size tied to a dom element, but it's not neccessary if you are managing your applications width and height another way.

And finally we set antialias: true since our goal is the sharpest looking text we can create.