Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How to make sprites look crisp in non-source resolution


masterobiwan
 Share

Recommended Posts

I'm starting out using Pixi.js for a game project.
But how on earth do you make sprites look decent when they are scaled down?
Out of the box sprites only look good at their native size, it's acceptable they look crappy when scaled up, but when scaled down I'd like them to still look pretty decent.
Someone out there must have fixed this issue, otherwise how could you make a decent looking game.
In a game the scaling of sprites needs to be possible for animations etc.

What's the common practice here?

My project is setup such that a container is always scaled according to window size, so smaller window - smaller container, so the ui layout stays the same no matter the device resolution.

Attached is a simple example project if I was not clear in the text.

Any help is appreciated!
Take care!
 

render_fix_project.zip

Link to comment
Share on other sites

There's a few things that could help:

- Changing the scaling mode to nearest from linear (good for pixel styled games). In this method you should scale in multipliers of 2 to keep pixels aligned. Looks really bad in nonpixel graphics style.
- Using mipmap. Texture needs to be power of two and baseTexture.mipmap set to true. This might look better or worse.
- Make sure sprite is on exact pixel coordinates.
- Render the game in 1:1 pixel ratio and scale the canvas down instead of objects in renderer.
- Create multiple sets of assets and select the one closest to wanted resolution (many spritesheet tools have automation for this).

Propably some other things that could help that I cant remember just now.

Link to comment
Share on other sites

I see that @Exca helped, now i can 

"mipmap" is not a boolean anymore, you have to use "1" or "PIXI.MIPMAP_MODES.POW2" for it , make sure your atlas has size of power-of-two. Alternatively set it to "2" or "PIXI.MIPMAP_MODES.ON" - that'll enable it in webgl2 for textures of any size.

"sprite.roundPixels=true" helps to prevent blur when you have "anchor=0.5" and odd width/height ;)  Mostly helps with text

Text scaling can be a problem but you can ignore scale of parents with this trick: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#ignore-parent-scale--rotation , and instead change the font size every time everything is scaled.

Welcome tho the forums!

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...