13
\$\begingroup\$

I'm developing a pixel art 2D platformer for PC and smartphone, but I'm stuck on a technical issue.

I chose to have a 32x32 tile resolution, and a 64x64 character sprite resolution. The levels are divided in to sections that I call "screens", and in each screen I've got 40x22.5 tiles, approximated to 40x23, so the minimum resolution is 1280x720.

In the game, I have got a double-jump mechanic, so I need to have a good vertical view range on each "screen".

Here comes the issue: 1280x720 is not a very high resolution. On HD monitors the window would be not be big, and if I upscale the resolution by 2x, it will be in 2560x1440 and the window would be much larger than an actual HD monitor. If I try sizes in between 1280x720 and 2560x1440 the graphics start to stutter, or are deformed.

How can I solve this issue? Is there a solution that does not require me to redraw all the tiles and the sprites in 16x16 format?

\$\endgroup\$
  • \$\begingroup\$ Is reducing the resolution but having a camera move the screen an acceptable design choice? ie resolution is now 640 x 360 however your screens are still 1280x720 but you need to move around the room, kinda like Metroid or Axiom Verge? \$\endgroup\$ – lozzajp Oct 14 '16 at 8:00
  • \$\begingroup\$ You are on the wrong spot, even if it is a 2d game, you need to define a camera. So the camera defines the viewing resolution, fov and angles, and you present the data simply to the camera. That way your game is resoultion independent \$\endgroup\$ – Yosh Synergi Oct 14 '16 at 8:02
  • \$\begingroup\$ Unfortunately @YoshSynergi this is not true for pixel art. Scaling pixel art the way we might stretch a highres texture or 3D scene introduces noticeable artifacts, and even games with a virtual camera still need to carefully choose their assets, cropping, and padding to ensure any scaling to fit a target resolution is a whole-number ratio. Any fractional scale, no matter where it happens in the pipeline, will create artifacts. \$\endgroup\$ – DMGregory Oct 14 '16 at 10:24
  • \$\begingroup\$ Just trying to be sure what the problem is exactly. Are you saying that because your 1280X720 map display is smaller than say a 1920X1080 monitor display then you wish to upscale your map display to be as 'fullscreen' as possible? I'm confused as drawing 16X16 tiles would not solve the problem ( as I understand it ) anyway. \$\endgroup\$ – RobM Oct 14 '16 at 10:39
  • \$\begingroup\$ @DMGregory, if you can provide me some examples with artifacts in scaling when using fractional scale, that would be awesome as I can't imagine a single scenario where when I scale an image in both directions the same amount no mather if the amount is a whole or fractional number, that artifacts appear. with artifacts i mean things, that should't be there, which is different from blur, occuring on to high scaling without enough pixels. \$\endgroup\$ – Yosh Synergi Oct 14 '16 at 10:41
17
\$\begingroup\$

For anyone wondering why this is an issue for pixel art, here's a quick example using a scene from Super Mario World:

Example of pixel art scene scaled, showing artifacts

If we just scale a pixel art game from 720 to 1080 at runtime (the way a typical game camera might), we get artifacts because of the non-integer ratio of screen pixels per source texel. Check out the inconsistency in the numbers from the scaled example on the right, and how garbled the leaf and Mario's ear look.

It's playable, but it's lost that charming pixel art crispness. And in motion these artifacts can crawl across a sprite, making it look shimmery.

Using a filtering mode that blends adjacent pixels will avoid the ripples, but smear and blur the pixel art instead, so it's also not very desirable.


Unfortunately the 1.5x ratio between 720p and 1080p is the worst case scenario we can encounter.

As you note, scaling 1x is too small and 2x is too big, by just as wide a margin both ways, and there's no whole-numbered scaling ratio in between for us to choose.

Your options boil down to:

  • Tolerate 1x scale, showing your game in a window 1/3 smaller than the screen, adding decorative borders if you need to fill the space.

    • You may be able to extend the cropping, showing more of your scene at a time on high-res screens. This reduces the padding/letterboxing needed, but you'll have to evaluate whether it impacts how the game plays

      (eg. does it give players on some devices an unfair advantage or let them spot secrets they shouldn't see so easily?)

  • Scale up by 2x and crop your scene, so the player sees less of the scene at a time (about 3/4 as far as they could see before).

    This too can affect how the game plays, eg. by making it hard for the player to see the places they need to double-jump to.

    • You may by able to compensate for this with camera logic, having the view pan to follow or anticipate the player, so the important content is still visible in one screen at the smaller crop, but there's no universal best camera to use.

      If you decide to go this route, try sharing some details of your gameplay and current camera, and an example scene. With that, we might be able to help tune the camera behaviour to compensate (or your game might just flat-out require more visibility)

  • Create alternate assets at a different resolution. (Yeah, this is a lot of work, but gives you the most options to control the look & feel of the game)

    This doesn't mean you have to throw out your existing assets that look great on 720p. This article describes contextually swapping between different asset sets to support a wider range of target resolutions (in Unity, but the principle can be applied in non-Unity games too).

    • As you note, redrawing all your assets at half size (16x16 tiles, 32x32 character) will let you handle 720p at 2x scale, and 1080p at 3x scale, with the same number of tiles shown as you have now. You may find the small tile resolution more restrictive visually though.

    • You could also draw an alternate, "large format" asset set that's 150% larger (48x48 tiles, 96x96 character), which would handle 1080p at 1x scale. (You'd use your existing assets for 720p or 1440 etc). The larger resolution should help you retain the fidelity of your current art, so you don't have to sacrifice the style & details you have now.

      Example of an asset redrawn at 150% scale

    • A third option is to draw an only slightly smaller asset set (24x24 tiles, 48x48 character), which can handle 1080p at 2x scale, and again might mean less sacrifice of detail than halving all your asset sizes.

      All three of these options will let you keep your framing and gameplay exactly the same at 720 & 1080, but at the cost of roughly double the asset work.

So, unfortunately there's no easy win here, just different trade-offs.

\$\endgroup\$
  • 2
    \$\begingroup\$ you mention keeping the original scale and using decorative borders. Depending on the context, this might be the perfect place to put GUI elements, such as score and lives. If these borders are large enough to properly fit such information, it can make it look less like 'filler', and more 'content-full' and relevant to the game. \$\endgroup\$ – Gnemlock Oct 14 '16 at 23:36
3
\$\begingroup\$

Elaborating specifically on @DMGregory's option of creating alternate assets at a different resolutions:

The best solution I know of is probably the least use to you at this this point: develop your art assets in a vector format & rasterize them as needed later. This isn't a magic bullet; most of the time you will find you need to make some small handcrafted modification after rasterizing.

The next best option I know is to try various image scaling algorithms, specifically, pixel art scaling algorithms. As before, this isn't a pancea; selecting a specific scaling algorithm is highly context specific. It has as much to do with your game's 'feel' as with the art itself & even with a good algorithm + art match up, you will probably need to tweak some sprites by hand.

In both cases, the idea is to use a tool to do the bulk of the work for you and focus the human effort on the remaining details. Like @DMGregory said, "there's no easy win here, just different trade-offs."


Edit regarding fractional scaling: Most pixel art scaling algorithms only increase by whole numbers. Short of rolling your own custom scaling algorithm, you're probably going to need to combine upscaling & downscaling to get the 1.5x change you're looking for. As a reference, here's the result of combining the scale3x algorithm to upscale & the fant algorithm to downscale by 50%:

Original:

enter image description here

Scaled:

enter image description here

\$\endgroup\$
  • \$\begingroup\$ Unfortunately most pixel art scaling algorithms I've found still tend to handle only whole-number upscaling (2x, 3x, 4x usually) so they don't help much with the 720->1080 case. (Maybe one could use a 3x pixel upscaler then downsample by half...? Not sure if that would look better or worse than a direct upscale) \$\endgroup\$ – DMGregory Oct 14 '16 at 15:46
  • \$\begingroup\$ Valid point. Edited a bit to address it. I also stumbled across this shader which does seem to support fractional scaling. \$\endgroup\$ – Pikalek Oct 14 '16 at 20:23
  • \$\begingroup\$ +1 to the vector solution. You've gotta make your assets really large and downscale. \$\endgroup\$ – Mark Aven Jun 12 '18 at 1:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.