Jump to content

PIXI.js : Blur / pixelated sprite


Recommended Posts


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.



Device Resolution : 2

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



Link to comment
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 comment
Share on other sites

If you can't edit the source material to be POT you could render the original texture into a rendertexture that is POT and then create a texture that uses that POT rendertexture as basetexture and you would have an image that is POT, even if the sprite isn't and mipmapping would be possible.

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.

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.


  • Recently Browsing   0 members

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