Jump to content

PIXI.js : Blur / pixelated sprite


Recommended Posts

Hi, 

Having a very basic issue but can't seem to get the right solution. Currently, i have a canvas size of 16:9 854x480 (480p) and we place a single large sprite on it.  

We adjust the height and width of the sprite, post which it gets blurry or pixelated based on the SCALE_MODE being used. Making "PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;" made is crisp and pixelated.

How do we maintain the clarity of the same?

Have attached a demo of the same here and feel free to edit it.

Details:

PIXI VERSION : 6.0.2

Device Resolution : 2

Demo : https://jsfiddle.net/adil_invideo/qwk3jups/13/

 

1847387033_Screenshot2021-04-30at12_45_46AM.png

Link to post
Share on other sites

oh wait, i see it. not pow2.. anyway, check if device has webgl2. 

if not, you can just host several versions of image -  downscaled 2 times, downscaled 4 times and so on, and download one that is a bit bigger than screen. Alternatively, you can do it with canvas2d manually, and give pixi corresponding texture.

The whole problem is that downscaling more than 2 times requires mipmapping or manual scaling 2/4/8 times whatever will be close to your resolution

Edited by ivan.popelyshev
Link to post
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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...