How to make sprites look crisp in non-source resolution

[masterobiwan]

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

[Exca]

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.

[ivan.popelyshev]

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!