Handmade Hero » Forums » Code » Scaling in Bitmap Based Games
Draos
20 posts
#17064 Scaling in Bitmap Based Games
6 months, 2 weeks ago Edited by Draos on Dec. 27, 2018, 9:34 p.m. Reason: Initial post

Hi Guys,

So, I'm working on a Pixel Art game and I am just wondering when working with Bitmaps how do you deal with scaling? I'm concerned because it seems like the Pixel Art can only be scaled by a whole number amount (with Nearest Neighbor Filtering), in order to perfectly preserve the look of the Sprite. I think in Handmade Hero Day 109 Casey mentioned that for a game like HmH which uses relatively high resolution bitmap graphics, he doesn't really care about blur from scaling since the Bilinear Filtering does a good enough job, and he likes the ability to have arbitrary scaling, but does this apply for things like Bitmap Fonts and Pixel Art also? I assume since Pixel Art is so low res, it may make more sense to just scale to the nearest whole number multiple then add black bars as needed as opposed to having arbitrary scaling? however, i don't really have an intuition on how scaling would effect bitmap fonts; it seems to me like it would get pretty blurry if scaled up too big, but I didn't find Casey talking about it in the Archive (is this another thing where HmH doesn't need to worry about it cause it uses High Reso textures?).
mmozeiko
Mārtiņš Možeiko
1940 posts / 1 project
#17067 Scaling in Bitmap Based Games
6 months, 2 weeks ago Edited by Mārtiņš Možeiko on Dec. 27, 2018, 10:59 p.m.

Yes, nearest-neighbor filter is your best choice if you want to preserve blocky pixel art look.

But if that is not a requirement then there are some fancy upscaling algorithms you can use. Note that they won't look like pixel art when scaled up, but they won't be blurry.

Examples:
hqx (2x, 3x, 4x scaling) - https://en.wikipedia.org/wiki/Hqx
waifu2x (DNN based scaler) - https://github.com/nagadomi/waifu2x
pixscaler (also DNN based) - https://github.com/mitaki28/pixcaler
depixelizing pixel art - https://johanneskopf.de/publications/pixelart/
Some of them are offline based, but I'm sure that with some effort they can be converted to real-time algorithms.

See more: https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms



Draos
20 posts
#17068 Scaling in Bitmap Based Games
6 months, 2 weeks ago Edited by Draos on Dec. 27, 2018, 11:26 p.m.

as for bitmap fonts, would it just be best to have the font be at a size that looks good at all my target resolutions. in HmH the fonts look pretty good at 1080p the target resolution, but I have no clue if it would be blurry or pixelly on say a 4K display, etc if scaled up. it seems to me like just scaling a bitmap font will inevitably result in a pixelly look. so is it worth it to just make the bitmap font texture huge, so we don't need to upscale? or do bitmap fonts tend to look ok with bilinear filtering?

also thanks! i'll experiment with those filters.
mmozeiko
Mārtiņš Možeiko
1940 posts / 1 project
#17074 Scaling in Bitmap Based Games
6 months, 2 weeks ago

Unless you plan to support any unicode symbol possible, the size of font texture does not really matter. It will be small compared to all the other assets you have in the game. So I would not worry about texture size for fonts.
mmozeiko
Mārtiņš Možeiko
1940 posts / 1 project
#17222 Scaling in Bitmap Based Games
5 months, 3 weeks ago Edited by Mārtiņš Možeiko on Jan. 19, 2019, 3:54 a.m.

Here's one more DNN based: https://www.resetera.com/threads/...mes-you-can-do-it-yourself.88272/
Pretty good looking results - check other pages on its topic.
Delix
Ryan Fleury
164 posts / 1 project

Handmade Network lead and developer of The Melodist

#17223 Scaling in Bitmap Based Games
5 months, 3 weeks ago Edited by Ryan Fleury on Jan. 19, 2019, 7:57 a.m.

There is a single texture sample technique for preserving the pixel art look (but also maintaining quality) at non-integer scales. Here's a demo:



This technique has been discussed by d7 at times, and he has even prepared a Shadertoy that allows you to check out both the effect and the implementation. Check it out here: https://www.shadertoy.com/view/MlB3D3

Handmade Network lead and developer of The Melodist
NelsonMandella
45 posts
#17226 Scaling in Bitmap Based Games
5 months, 3 weeks ago Edited by NelsonMandella on Jan. 20, 2019, 4:31 a.m.

Delix
There is a single texture sample technique for preserving the pixel art look (but also maintaining quality) at non-integer scales. Here's a demo:



This technique has been discussed by d7 at times, and he has even prepared a Shadertoy that allows you to check out both the effect and the implementation. Check it out here: https://www.shadertoy.com/view/MlB3D3


What are the drawbacks aside from the very minor (if barely perceptible) warping? Is there any performance cost?
Delix
Ryan Fleury
164 posts / 1 project

Handmade Network lead and developer of The Melodist

#17232 Scaling in Bitmap Based Games
5 months, 3 weeks ago

NelsonMandella
What are the drawbacks aside from the very minor (if barely perceptible) warping? Is there any performance cost?


To be honest, I'm not sure I know which warping you're speaking of. What are you referring to here?

The performance cost is of course nonzero; however, the technique just requires some additional arithmetic without branching. I haven't measured it, though, as it has not been an issue for me.

Handmade Network lead and developer of The Melodist
NelsonMandella
45 posts
#17237 Scaling in Bitmap Based Games
5 months, 3 weeks ago

Delix
NelsonMandella
What are the drawbacks aside from the very minor (if barely perceptible) warping? Is there any performance cost?


To be honest, I'm not sure I know which warping you're speaking of. What are you referring to here?

The performance cost is of course nonzero; however, the technique just requires some additional arithmetic without branching. I haven't measured it, though, as it has not been an issue for me.


Thought I noticed some subtle wobbling, but now I'm not so sure having just watched it again. Guess I'll have to give it a go myself to assess the performance implications. Anyways, thanks a lot for bringing it to everyone's attention!