Graphics How to decide on resolution and graphics size

[BaBiA Game Studio]

Hi all.

So after botching my way through my first project several months ago, I have been planning and designing my new game and have finally got down all of the essentials: mechanics, style, story, etc. However one thing is still frustrating me and I am struggling to figure it out, so I thought I would ask all the great peeps here.

How do you really decide on what base graphics resolution to use for your game, and the sizes of things like your tiles, background, and sprites? Is there any real formula that people follow, or is it just a gut feel and try it out until you get something that fits with your original design? eg: why go 640x480/800x600/etc, and what sprite sizes would you use to fit them best (16x16/32x32/64x64/etc)?

In my last game I sort of just made a character (at a weird size because that was just how I did it) and then tried to fit everything around that size. Admittedly the rooms tended to have a lot of void space, or platforms so it sort of just seemed to (somehow) fit together relatively well. But this time I wanted to have it feel more cohesive.

I'm not trying to go high-definition or high resolution and have in mind something in a pixel-style almost Kingdom-like, but not being an artist I am struggling to figure out how to decide what sizes of sprites and tiles work with the resolutions. I suppose that it also depends on the style of the game: after all a top-down open map may work great at one resolution with a 16x16 sprite, but a platformer at the same resolution may require a 64x64 (I suppose).

 

[Snail Man]

I usually just feel out sprite resolutions depending on how busy I want the screen to feel, how much detail I'm willing to put into sprites, etc. Most of the time, my habits from prior iterations of GM make me have the rooms all 640x480, but if I'm doing something high res, I usually go with 960x720. I almost never mess with the actual aspect ratio.
My advice is just to make sure that your screen dimensions divide neatly into your sprite size with no remainder, otherwise everything will just be harder and feel strange and off-kilter. For this reason, I generally despise 800x600.

 

[Yal]

My current favorite resolution is 400x240 with 16x16 sprites, but I also kinda like 480x272 and 256x224. I don't really do a lot of games in anything above 16x16 block size because it requires a lot more work, and I'm very bad at animation... which is easier to mask with small sprite sizes. I actually tend to do characters that are 1½-2 tiles high nowadays, too, because it adds a lot more character and make them somehow stand out more from the game world.

 

[Genetix]

After releasing my first Steam game and hearing back from a lot of people, i've began to make all of my new projects run with a resolution of 1920x1080 by default (With settings to adjust down).

The nice thing this is that it will meet the expectations of those looking for a 1K resolution - and can always be scaled down without losing any quality (if sticking to the correct scales).

 

[BaBiA Game Studio]

I usually just feel out sprite resolutions depending on how busy I want the screen to feel, how much detail I'm willing to put into sprites, etc. Most of the time, my habits from prior iterations of GM make me have the rooms all 640x480, but if I'm doing something high res, I usually go with 960x720. I almost never mess with the actual aspect ratio.
My advice is just to make sure that your screen dimensions divide neatly into your sprite size with no remainder, otherwise everything will just be harder and feel strange and off-kilter. For this reason, I generally despise 800x600.

Yeah, that's what I've been trying for - I've just been having difficulty for some reason.
This is my situation:

• The main area of my game is a tower in a single room (where the height of the room gets changed based on things that happen and the tower gets taller). The width stays the same no matter what happens in the game, so that at least means that once I come up with the width I never have to worry about it.
• I had thought of 640x480 (with this being the view as well due to needing to scroll up and down the tower as it gets taller, but not needing to scroll sideways at all), as this would allow a decent width for the tower itself.
• I wanted roughly about 10 "tiles" (imagine floor tiles) wide inside the tower, so of course I automatically think 640 / 10 = 64px per tile. But that doesn't work as I also need the outside walls of the tower, so add another 2 tiles (one on the left and one on the right) for those, so this then becomes 640 / 12 = 53.33
• Then I realise that I also need space outside the tower on the left and right for a bit of an outside area (to the right) and a menu (on the left)as well, so the number of tiles I need has become 15 (2 on the right and 1 on the left) at a minimum: 640 / 15 = 42.66

This is where I just put my notebook away, get a beer, and go watch TV instead of carrying on working this out.

But actually, having discussed this I have realised that if I make it 2 tiles outside the tower on each side, this means I need 16 tiles wide (2 outside on the left, 1 for the left wall, 10 inside, 1 for the right wall, and 2 outside on the right) and that divides neatly as 40 per tile.

I guess it was just needing to work out how many I actually really needed and then once deciding on the resolution it actually divides out quite well. If I use 400x240 as an example from @Yal then that comes out as 400 / 16 = 25px per tile.

Man, I knew it would be a good idea to ask here as it's made me realise exactly what I need - especially as you made me figure out exactly the number of tiles that I actually need. Thank's a bunch guys. I feel a bit dumb now for not having realised it earlier - I think I was just set on a specific number of tiles, and somehow not figuring out that if I just went up by one more tile in width it would work itself out.

 

[Didjargo]

If your game is made up of retro style pixel graphics, then go with a very low resolution like 800x600. I typically find that 1080x620 works for what I do. I suggest that whatever resolution you go with, you maintain a 16:9 aspect ratio and allow the player to increase the window size and/or go full screen.

 

[BaBiA Game Studio]

Yeah, I think I was getting all caught up on trying to figure out the size of sprites/tiles and then force that into a resolution instead of stepping back and figuring out the best way to divide down a resolution to give me the size of sprites and tiles. It still have to try out a few things but at least now I am happier going forward with the visual design.

It's been really helpful just to ask the question and the response has helped me to actually get it straight in my head what I need to be doing.

 

[Snail Man]

Glad to have been of service

 

[Aura]

The "best" resolution depends on a lot of factors IMO:

• The platform that the game is supposed to be released on
  
• Other platforms that you plan to port your game to
  
• Graphical style (A 8-bit game does not need a high resolution)

First of all, platforms. In my honest opinion, a resolution of 1024x768 would garner complaints, as the game will not fit on the screen of many users. 960x640 and 640x480 seem ideal to me. Desktop users expect the game to adjust its resolution automatically to fit the screen best. As such, it would ideal for such a game to support all prominent aspect-ratios and resolutions. Windowed-mode is a plus, but not necessarily required.

For mobile phones, resolutions of 16:9, 16:10, 5:3, 3:2 and 4:3 aspect rations seem ideal. By adapting a game to each ratio, with a high resolution as a basis, one can be reasonably sure of having it work on the majority of devices available.

 

[Dani]

Hello people!

Take a look at the List of True 16:9 Resolutions, it's quite useful. Nowadays, if you have to make a game with one unique design resolution, I would recommend using 16:9 aspect ratio. If your game uses pixel art graphics, for your sake, it's much better to use a low resolution and then scale up in-game. Please let me use my own projects as an example again. Super Star Path uses a 400 x 240 resolution (I think this is the 3DS top screen size, if I remember correctly), but that doesn't fit a 16:9 aspect ratio. Bot Vice uses a 320 x 180 resolution, which fits 16:9 aspect ratio and scales perfectly to 1080p (6x), but it's quite small. If I had to choose a new resolution for my next project, I would use 384 x 216 or something near that range. But this highly depend on how much scene you want to show, and how much space you want between objects. We usually don't like wasted space or large empty areas.

Anyway, I think the most important thing regarding viability of the project is limiting the size of your graphic resources. For pixel art games, we usually design sprites around 16x16, 24x24, 32x32, 40x40, 48x48, etc. And for tiles we usually choose 16x16. You get a quite uniformed look and style that way. Also, in many cases, small projects' graphic assets can be stored in one unique texture, reducing texture swaps, wasting less memory, reducing game file size, etc. Pixel art graphics have a lot of benefit for indie projects.

So, for my next desktop project I would go for a 16:9 aspect ratio and 384 x 216 resolution. That fits very well with a 16x16 (and its multiples) based design. And it fits a 1080p resolution perfectly (5x).

I hope that helps!

Dani

 

[Snail Man]

I actually dislike 16:9 a lot compared to 4:3 because I'm a bitter man who hates ugly looking fractions and overly wide screens, and change most of all

 

[Jeremy]

and change most of all

I feel you.
I've gotten so used to my 5:4 monitor that I prefer it over my 16:9 screen.

 

[Dani]

Hello!

The aspect ratio highly depends on your needs and goals. I myself prefer 4:3 (as I'm fan of 16-bit console games), but if my goal is to sell desktop games on Steam, 16:9 is the most used aspect ratio, so it's a no brainer to me. You can simply take a look at the Steam hardware and software survey. And I think players don't usually like black bars. Obviously, if you're going to target another specific hardware, you should use the aspect ratio that fits best.

The aspect ratio also determines gameplay and the type of games you can design. As an example, you won't see many vertical shoot'em up games in 16:9. Also, a top-down shooter is best played in 4:3, so that the amount of visible area is almost the same in any direction (but you could always fill the sides with HUD elements to fill a 16:9 area).

Well, that's why this sub-forum is titled Game Design, I suppose.

Dani

 

[Tom_SavePointsGames]

Games like megaman and mario have a main character that is roughly 1/9th the height of the screen.
So I figure out how tall I want my main character and then multiply it by 9. Then I adjust that number up or down so that it divides evenly into 1080 evenly. Then I divide 1920 by whatever that whole number is and BAM, I have the resolution for my game.

 

[RangerX]

There's no formula. But what you should do is the following and in the same order:

1- Deciding on your game's resolution
2- Deciding on the size of your assets (because it depends on your game's resolution choice).

About game resolution, the way to decide is to check what displays people are using. If you make a PC game, you want your game to look good on as many screens as possible out there so you need to check what are the most used resolutions out there. Right now the most used resolutions for monitors in general is the dreaded 4:3 screen ratio resolution of 1360x768 (which is sad but a reality).... BUT, the most used resolution for gaming right now (and second in overall anyways) is the extremely convenient 16:9 ratio resolution of 1920x1080. So there's your aim. Same logic goes for mobile games. What's the size/resolution are used the most in the industry right now is the resolution you want for your phone game.

Lastly, for the size of assets, there's no real deal. It's all about proportions. Does it look good on screen? Does it feel like other similar games have seen? or again, Do I see all I want the player to see at once? Is navigation painless for the player?
Those are all questions that will truly tell which assets size you need and no you will not be able to go without testing.

 

[Carnivius]

If your game is made up of retro style pixel graphics, then go with a very low resolution like 800x600. I typically find that 1080x620 works for what I do. I suggest that whatever resolution you go with, you maintain a 16:9 aspect ratio and allow the player to increase the window size and/or go full screen.

I just still can't get my around calling 800x600 a 'very low' resolution. That's huuuge compared to my usual choice of res.

 

[HeyItsKyeOfficial]

All I want to find from this is a resolution suitable for a game with 16x16 sprites without the resolution going above the sprite size! but they don't work!
I was working on Defenders of the Retrolands, but I need help with a resolution size that suits me... the resolution I wanted is a 16:9 styled one, but except for 16x16 sprites...

 

[RangerX]

All I want to find from this is a resolution suitable for a game with 16x16 sprites without the resolution going above the sprite size! but they don't work!
I was working on Defenders of the Retrolands, but I need help with a resolution size that suits me... the resolution I wanted is a 16:9 styled one, but except for 16x16 sprites...

480x270 -- closest thing to SNES or NES if it wasn't interlaced and was 16:9
240x135 -- smallest you should go unless you want to make some of those extreme low res games

 

[HW.]

I build my games for mobile (Android specifically). So i use what popular resolution on the majority of devices that have been used by the game players, and the king of the statistic is a res with 16:9 ratio.
(SOURCE https://hwstats.unity3d.com/mobile/display.html)

I used to use 1920x1080 Full HD (16:9) room size as a base for all my graphics on it. The sprite sizing depends on the proportion of it. It looks very crisp and is pleasant to the eye. Non-pixel art style of course, if you ask! But, recently i decrease my standard to just 720px1280 HD (16:9) only. Because somehow the full HD graphic takes more file resources that would increase my game file size to be larger and could also slow down the performance too.

I also don't use pixel art style or the power of two or etc. So Unfortunately the almighty efficient use of using low res and perfectly enlarge it for a pixel art doesn't suit my work in my case lol. Actually I love pixel art too sometime, but decided not to draw with that style because it is difficult you know and takes more time to make a finest one. Sometimes i am jealous with the pixel art artists that have extraordinary skill on it.

The 540p (960x540) which is half of 1080p was also attractive enough to steal my attention if i am using pixel art it will be perfectly enlarged to full HD. But because of non pixel art style i am using and the stat is showing only 7 percent of usage compared to the majority of 26% and 20% on 720p/1080p, I don't use it. Last but not least the 720p gives more crisp graphics to me than 540p does (although it is the power of 2 and 720p is not lol) on popular devices on market. So i have decided, just want a quick and simple way regarding this complicated resolution thing.

The main reason i now accept "less crisp graphic on 720p than 1080p" is i just want to simplify everything i do, i just use "Keep Ratio" on GMS2 IDE, not using 1:1 pixel art style etc, and then tick the almighty "Interpolate colors between pixels" on IDE setting as well, so i don't worry anymore. I stick with 720p for now, until the mobile industry change again (Recently, newer devices such as flagship phones, start using a new 18:9 res, i will probably consider it in the future IF it becomes a trend and leave the current majority of 720p/1080p resolutions on most of Android devices behind). But i think it will not happen in the "near" future lol.

 

[Yal]

240x135 -- smallest you should go unless you want to make some of those extreme low res games

I definitely would call 240x135 "extremely low res"... if you go that small you definitely should add in options to upscale the screen, and try to upscale it automatically as well (since players might have issues even navigating the options menu with a window that size!). It's just two lines of code to read the monitor's current resolution, and that tells you the maximal integer factor you can upscale the window with.

 

[RangerX]

of course a game that small would be meant to be played upscaled.

 

[Nathan Laing]

Pixelated_Pope is adamant that the resolution should be set to no more than half of 1920x1080, with other ideal options being 1920x1080 divided by 3 and 4. Furthermore 1280x720 is the worst possible choice.
As for the 1920x1080, working at this resolution can potentially mean working with large graphics assets, and then one runs into trouble with large build times.

I have a project I started in 1920x1080, using large assets. I then ran the project at 960x540 (half of 1920x1080), and, drew the assets at half of their original size scale (to simulate what things would look like had I created the assets at half size).
Of course, everything is smaller. However, when I resized the window to 1920x1080, and also ran it full screen on my 2560x1440 monitor, I found that there was barely (if any) loss in image quality--which essentially means I could/should have created the assets at half size in the first place because, there's half the memory and build time saved right there...

 

[Rayek]

I have a project I started in 1920x1080, using large assets. I then ran the project at 960x540 (half of 1920x1080), and, drew the assets at half of their original size scale (to simulate what things would look like had I created the assets at half size).
Of course, everything is smaller. However, when I resized the window to 1920x1080, and also ran it full screen on my 2560x1440 monitor, I found that there was barely (if any) loss in image quality--which essentially means I could/should have created the assets at half size in the first place because, there's half the memory and build time saved right there...

It very much depends on the type of graphics, the style, and the actual game type. If the game is going to be a point-and-click adventure or visual novel type game (lots of static screens, not much animation) upscaling 960x540 background graphics to either 1920x1080 or 2560x1440 is going to look awfully blurred and soft. Even more so when sharp-edged comic art work is going to be used - in that case the result becomes unacceptably blurry in my opinion.

Same for mobile retina screens: it will look quite fuzzy compared to the higher resolution assets.

If it's an action game, with lots of movement, speed and smooth game play are far more important, and when 2d graphics move around the inherent motion blurring and potential performance gains will balance out those blurred graphics much more. This is also a reason why some 2d games decide to use higher resolution assets for static elements (GUIs, intro/cut screens, text screens) and lower resolution assets for the in-game action.

That is why it can be beneficial to use vector graphics for certain game graphic styles, since those render screen resolution independent (up to a extent), and may save quite a lot of file space (again, depending on the content - I am presuming line art). Most game engines do not accept standard vector graphics, though, and rendering generally isn't fast enough for quick action games - unless you prerender those vectors to bitmaps first (which takes time during execution).

Another option is to provide assets in two base resolutions: a high resolution version and a lower resolution version. Then, depending on the machine's performance and screen size an educated guesstimation can be made to render the game with either asset version. And/or provide an option in the game settings. Leave it up to the player to sacrifice performance for art quality and vice versa when their machine is unable to smoothly keep up with the game action. Websites already do this. I suppose this would be a more important consideration for web games. For responsive game screens (where the graphics do not scale up, but the screen size does, displaying a larger part of the game world) I'd say that multiple versions might be an option as well. Or render those lower resolution version at game execution time (which will slow down things between levels, etc.).

For pixel art, I'd go as low resolution as you can (and stick to Pixelated_pope's advice). No use rendering a low resolution pixel art sprite of 32x32 at 64x64 or higher - just increases the video memory usage.

Anyway, in my opinion there is no absolute black-and-white answer to this question. It depends on your game: the type of game, the style of graphics. It depends on the screen size, and whether the game will scale up or use a responsive screen size. It depends on game performance, and the hardware limits of your target audence(s). Game size limits. Upload limits. Perhaps it might be a good idea to accommodate multiple resolutions by providing assets at multiple base resolutions. Or use scalable vector graphics instead.

In short, there is no singular recipe here.

Btw, when you physically upscale or render your graphics by 2 times the resulting video memory increase will be 4 times - not 2 times. Graphics will take up 4 times as much space in memory. Of course, not necessarily in regards to file size, since that depends on the assets contents and the compression used. As for build time, can't say for certain.

 

[sitebender]

I just took NES standard size, made it 16:9 and if I need a larger resolution, I just multiply it by two so 430 x 240 would be 860 x 480. Its given my games standardization. HUDs to emulate things like Zelda throw things off a bit as the HUD fits in the resolution, but the play screen is the remainder of the resolution after the HUD.

Here are some examples:

Spoiler

Despite the screenshot and .gif sizes its all divisible by 430 x 240 resolution.

430 x 240

430 x 240

420 x 240

430 x 240

Its still 430 x 240.... and then made twice as big resolution wise so 860 x 480.

Another 860 x 480 and I regret making it this size:

 

[Yal]

HUDs to emulate things like Zelda throw things off a bit as the HUD fits in the resolution, but the play screen is the remainder of the resolution after the HUD.

You can always set the screen of the GUI layer to match the "base" screen size (I think the function is called draw_gui_set_size() or something along those lines), then it rescales together with the normal graphics with no additional work.

Or did you mean when part of the rooms will never be visible because the HUD is in the way, and you forget about that in the level design all the time? That's definitely relatable, and that's why I always make my HUDs as transparent as possible nowadays