katharostech / bevy_retrograde

Plugin pack for making 2D games with Bevy
Other
296 stars 9 forks source link

šŸ” Alternative Pixel Filtering Modes #51

Open zicklag opened 3 years ago

zicklag commented 3 years ago

Related to the text rendering comment in #50.

There are three different strategies that we know of that Bevy Retrograde could use for pixel rendering. We currently use what we dub here the "Crips Scalable" version, but there are also a couple other versions that we should implement as configurable modes.

Summary

Mode Implemented Crisp Edges Perfect Squares Any Zoom Level Doesn't Require Camera Borders
Crisp Scalable :heavy_check_mark: :heavy_check_mark: :x: :heavy_check_mark: :heavy_check_mark:
Smooth Scalable :x: :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
Crisp Fixed Scale :x: :heavy_check_mark: :heavy_check_mark: :x: :x:

Crisp Scalable ( Current )

The crisp scalable model uses simple "nearest" mode filtering for the pixels, which retains the pixels' sharp edges, and we allow scaling the screen to match the camera size to the window size, allowing the game to be played at any zoom.

The disadvantage of this technique is that at non-integer scales, the in-game pixels will not line up perfectly with the physical pixels of the users screen and the result will be that some rows and columns of pixels may be taller or wider than the others.

Smooth Scalable

The smooth scalable model uses an anti-aliased filtering technique that preserves the squareness of pixels at any scale, but results in a blurrier appearance and can lose the crisp edges.

Crisp Fixed Scale

The crisp fixed scale model will preserve the sharp edges of the pixels, and make sure that they remain perfect squares, but will restrict the scaling level to integer values such as 1x, 2x, 3x, 4x, etc. This means that when the window size is, for instance, 1.5x the game will render at 1x scale with a border around it.