Jump to content

Text and resolution


br77mont
 Share

Recommended Posts

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;

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...