How do I scale down pixel art?

Start: Saturday, October 30, 2021 at 10:45 PM GMT

This is a virtual event

I'm currently working on a game that has to run on various screen sizes and aspect ratios and it's not a very easy process. If you're making things in pixel art and want to maintain the pixel-art aesthetic while also supporting multiple resolutions, you'll be in for a world of suffering.

In my opinion, there are several things you can do (some are proprietary, others are not)

1. Define a minimum resolution and only upscale (everything) to the nearest neighbor integer. That way you can keep the pixel art feel. I don't believe downscaling is a good idea because you'll lose detail, and the goal of finely drawn pixel art will be lost. If your min supported resolution is too small for your sprites, change your min supported resolution or redraw all assets to support min resolution this.

2. When you run into a resolution or aspect ratio that isn't enough to cover the entire screen, scale up your game (displaying more tiles). You should make your game so that it is still playable with minimal resolution/aspect ratio.

3. If the game cannot be scaled, fill the non-game parts of the screen with black; or stripes at the top and bottom, left and right, or a black frame. When you run an iPhone app on the iPad in magnified mode, this is what it looks like. This is a form of cheating that is incredibly common in remakes and emulators.

4. Give up on staying true to the pixel grid. But then you have to stop using pixel arty assets with sharp corners. Then upgrade/downgrade using bi-linear (or optimized binary, if your platform supports it) filtering. This is the best choice to maximize screen usage, while keeping the same user experience across all supported resolutions.

For my game I ended up doing option #4 and I was quite surprised how good it looked on devices from 320 pixels on vertical (an old Android 2.3) up to 1536 pixels on vertical (iPad 2012 with retina display). The assets were originally meant to be 600 pixels vertically (originally for 800x600 screens on Windows PCs). Although for subsequent games I think the logical vertical resolution is better 720 pixels.

The game is displayed at a high virtual resolution of 600 pixels, which is then scaled to the device's native resolution with bilinear filtering. This means that all the Y coordinates in the code go from 0 (top of the screen) to 600 (bottom of the screen).

As for the landscape size, I would assume the maximum width is 1080 pixels, which is more than enough to cover even the widest 16:9 aspect ratio. My x coordinates are centered, so x = 0 is the center of the screen and the x coordinate goes from -540 on the left to 540 on the right. I make sure everything fits between -400 and 400 to support the narrowest screens (4:3)

However, if I had to keep the pixel art feel, I would definitely go with options 1 and 2. Meaning I just scale to integers to keep the blocky feel of the pixel art and game design. so that tile visibility is not fixed and can adapt to any screen resolution/aspect ratio.

So to (not) answer your question. I think downgrading pixel art is a very bad idea, so you shouldn't do it. There are other ways to support different screen resolutions that will yield better results than simply stealing your carefully crafted art.

Event by
Gravatar
Paris 05, France