Raster Is View Independent

[Cecelia Seiner]

Helloforum people. So after years of being an independent developer with a degree in computer programming, I can safely say that I can't find a single resource that thoroughly scours and glosses over every single aspect of game resolution. I have loads of books on the subject, coding knowledge, and a repertoire of games I've made in the past - but these projects have always used fixed resolutions or workarounds to support other resolutions.

After posting on various forums and asking around, people seem to just redirect me to resources about resolution which are still incredibly lacking and bare-bones, not teaching me more than I already know.

Since resolution is such a huge and inherent part of game design, and since there is not a single game **EVER** developed that doesn't use a resolution, I am so surprised that there seems to be such a lack of material on the subject! It is a fundamental part of every single game in history.

So this post will be asking a load of questions all about resolution. What I am also proposing is that if I can gain enough ground on the subject, I'd like to create my own video/page/tutorial which brushes over every single aspect of game resolution, aspect ratios, etc.

So I'm currently working solo on a 2D platformer, called DEA, which uses pixel art for the main game stage, and a mixture of raster-based (but not "pixel looking") assets for the far background. The genre/style of the game isn't important, but if you're interested, the blog link is here:

Firstly, my camera does not scale the main stage based on resolution, so increasing or decreasing the resolution simply increases the camera size and gives a bigger or smaller view of the game world, centering on the player. Below is a hypothetical screenshot at a lower resolution:

Now the forum formatting actually scaled the images and made them look out of proportion, but they remain the same level of zoom, and no images are scaled. I believe that the Terraria developers take the exact same approach to their game resolution, giving players with higher resolution monitors an advantage. This essentially means that at higher resolutions, a bigger slice of the game world is basically displayed on-screen, like so:

However, because of the nature of Terraria's genre, it doesn't seem to be a huge problem. My game has a competitive multiplayer element, but it's couch co-op without online play, so people with better monitors won't be given a competitive edge.

From my understanding, games that use vector-based graphics (or even rasterised graphics with high resolutions) don't give a larger screen view. Instead, they simply scale all of the graphics to always fit within the same proportions regardless of resolution.

So with this, the game is displayed in the same proportion on every resolution, but a higher resolution simply gives a much crisper image, meaning more "image pixels" are displayed per "screen pixels". This is nice, because regardless of screen monitor size, everyone will get the same experience.

So from my understanding, is it easy to change the zoom levels to allow for this proportioning when using vector-based graphics, because the graphics will scale accordingly, and maintain a "clean" look when stretched and transformed. Pixellated graphics or "8-bit" style graphics can't be stretched using float values because of their strict 1x1 pixel ratio, so when applying a zoom effect to games using pixel art, the zoom has to be in uniform whole numbers (i.e. 1x, 2x, 3x, 4x, etc). I've detailed this out below with examples from my game:

This means that we can't recalculate sizes of pixellated sprites to accommodate every resolution, surely? It seems that the actual viewport size of the camera can be changed, and zoom can be manually changed (maybe in the options menu) in whole number intervals. However, is there no truly "smart" way of handling resolution in games that use pixel art?

This brings me to my next problem. I've seen that a lot of modern "retro-style" games use other tricks to handle varying resolutions. The most common I see is the toss-up between "true" resolution and letterboxing, giving the player the option to either play the game in a distorted-looking aspect ratio, or to play at the intended aspect ratio, but to have the game "letterboxed" to look like a widescreen film. As an example, I tried loading up Owlboy (amazing game btw) and went straight to the options:

The first thing that I noticed is that if I enable letterboxing or disable it, nothing actually happens. My monitor resolution is 1920x1080, and the game seems to run in that resolution, as the Steam overlay fits in the clearest and densest resolution. The graphics seem to be scaled absolutely perfectly with no distortion. My only guess as to why this is happening is that the game was developed with resources for a 16:9 aspect ratio, meaning that any resolution of the same aspect ratio will not distort the image, and any resolution of any other aspect ratio will adopt letterboxing to maintain the same ratio.

Judging by all of the complications and horrors that come with managing resolution-independence, the Terraria-esque approach seems to be the easiest by far, giving players the option to choose a "zoom" level, and allowing the resolution to represent the amount of screen coverage. However, this seems to leave on huge, gaping problem in the game's design - A good rule of game design is to direct the player's attention using correct framing. You want to draw the player's attention in a certain direction using lighting, colours, movement, etc, but if the level is all displayed, this really draws this power away from the creator. In addition, if the resolution is too low, this will lead to the player maybe not having enough time to react to an upcoming trap or enemy, as their screen view doesn't encapsulate the thing ahead. Finally, on the converse, players playing on high resolutions will simply be able to see everything ahead of them, removing any element of surprise from your level design.

I believe that pixel art is designed to be shown at exactly one resolution, namely the one it is created for. I don't know about you, but zoomed pixel art (and I don't even consider non-integer ratios, because ... just yuck!) just looks so "zoomed", it lacks the detail you'd expect at that zoom level. As such, I consider zooming of pixel art a dirty cheap programmers hack rather than a graphics artist preferred way of doing things.

Ideally, you'd have art at every resolution you want to support, and you adapt levels to the display. If that's not feasible, you'll end up in the mess of resolutions and size of displayed level, like you describe.

I would like to suggest that you consider zoom-level of art as a separate issue from size of the displayed level. The former exists also if I buy a screen that has a double (quadruple?) higher resolution than my current screen, but is physically the same size. The latter is also somewhat related to the game itself, for some games it's no problem, while for others it is a huge problem.

For art, one option you may not have mentioned is downscaling rather than upscaling. Make the art in the highest resolution, then reduce its size as needed. It won't be as good as when you hand-design it, but it should be better than enlarging pixel art. This way, it might be more feasible to create art in various sizes. Make the large one, automagically reduce the size, then do some small touch up to correct the most obvious flaws. (I am not an artist, so no idea how feasible that is.)

For level design, it may be possible to design levels such that it doesn't matter (much) how far you can look ahead. Hide eg coloured keys in a box, move surprises to behind a corner (ie when you enter a new screen). For focus, make the light and moving area near the player, and keep him so busy he has no time to look at the other parts of the level.

Other options is to move the "point of no return" to much earlier. When I select one corridor, I have to walk further before I see the surprise, but make the corridor long enough such that the player with wide screen also has to walk into that corridor.

You can also adapt the level, space out the obstacles depending on the displayed screen size. You can possibly add some background art here and there as well to fill the area. Player with the wide screen has to walk/fly/jump/crawl further, to reach the next stage.

...yes, but bear in mind that for 3D games this is not generally thought of as "scaling the graphics" - it's about picking a field-of-view for the camera - independent of the screen resolution - and the projection mathematics puts the pixels wherever they need to be. Similarly, they don't think of zoom levels because they're not working relative to the pixel size of the assets - they're working with the field-of-view value, and zooming is about narrowing the field of view, which naturally stretches out a smaller physical area across the same visual area, creating the zoom effect.

So, if you've been looking to find out how modern games are "scaling the graphics" for different resolutions, you won't find it under such a name - that's handled by the projection matrix/transform part of the graphics pipeline.

This is why there's a "lack of material" - todays games rarely use pixel art, older games which did use pixel art had little choice over the resolution, and the way game cameras work in 3D games don't have to concern themselves with issues of resolution.

However, it is totally possible - and actually relatively trivial - to change the projection matrix to maintain a 1:1 pixel ratio onscreen, for whatever resolution your monitor has. Obviously you have to make compromises: you can fill the whole screen in any resolution and cover arbitrary numbers of pixels, you can maintain a 1:1 art-pixel:screen-pixel aspect ratio, and you can show exactly the same amount of the game world to every player, but you cannot do all three at once! This means you have at least three potential options:

3a8082e126