RESOLUTION guide for game devs & GameMaker

What is resolution, what should you pick for your game? What is aspect ratio? How do you manage it across different devices? These questions answered with some advice that's both general and also some GameMaker specific tips.
▶ Edited by Vossel: / vossel
▶ Smooth pixel camera guide for GameMaker: • How to SMOOTH your pix...
▶ Pixellated Pope resolution guide: • Resolution and Aspect ...
▶ Support my work: / shaunjs

[@charlespobeemensah]

Fantastic video. The more videos on this topic the better.

[@BunnyNotFound]

This is the kind of esoteric knowledge I didn't know I needed, yet always assumed there would be. Thanks, this actually simplifies a lot of questions I had in mind.

[@jonatheringaming8369]

This is great! I'm planning on finishing a mobile game during the summer so resolution has been on my mind. Appreciate the video!

[@Miaut236]

Thank you for your insight, I'm struggling with aspect ratios and screen resolutions now. Positioning GUI sprites is hard because the width and height of my sprite does not match when running the game, so I'm trying to understand how it works before hard coding values. Pixelated pope's tutorial is very good too. Definitely relevant even today.

[@xVovex]

Been needing a tutorial like this, thank you!

[@HowfWuff]

Great video, and thanks for using my Pico-8 demake in your video!

[@Dream_lucid]

I found this super helpful, I've only been using game maker studio for about 2 months now and KZbin keeps bringing back to your channel. I appreciate all the hard work that has clearly been put into the channel over the years. With newer version in mind, should most of your latest tutorials function correctly?

[@Mk2kRaven]

A really good video for beginners. So many beginners get stuck on resolution.

[@Asobitech]

Great video, with some great information, well presented and informative.

[@robvera1404]

This video is a life saver. For rookies like me in game devolopment. Thanks a lot for this video

[@sadbread7261]

You have my respect for using Downwell footage. Immaculate game

[@tiberionx]

Heya Shaun! love your work on these Game maker guides! Can you help out on a beginner friendly guide on using Input 5 ? like how to setup multiplayer using gamepads ? Thanks man!

[@overratedprogrammer]

this video is SUPER good. It took me way too long before I started considering this stuff. It was always just a 800x600 window or something lol

[@EmotionART31]

You helped me so much. Thank you.

[@dungensAreDragons]

Wow. This was great!

[@memine5595]

AWESOME Tutorial as always.I would like to see draw Gui layer tutorials for mobile and PC. How to use each gui function correctly to keep buttons and hud in same position and proportions no matter the device game is showing on.

[@DelphineEraklea]

I am back into trying to do my game, and this video is something I needed a year ago and that for some reason I didn't see

[@yuolden]

Hi shaun!!! Thanks for the great video. After watching the video, I'm very curious about how you created the scene where the player acquires the gem at position 3:16, pauses the game and acquires the gem. When I researched other examples, I found one way to do it is to use a while statement and another way is to use a time setting variable, but neither of them are reliable, hence my question.

[@tdg_dev9429]

I was going to have a question about working in a vertical based game, and then your first example is Downwell, and... well... I think I just solved my problem. Cheers.

[@LinziOfficial]

Oh cool I was going to start adding dynamic resolution sometime soon, this is perfect!

[@LinziOfficial]

I guess the video wasn't exactly what I expected but good video anyways!

[@ShaunJS]

What would you like to see specifically?

[@akaheadlesschicken]

Hey Shaun exellent video as always. I just had one question, at 2:50 you mention that non-pixel art should be made at a higher resolution then scaled down for smaller resolutions. I have seen this writen a lot but I have never found any tutorial or pratical explanation of how it is done. I have tried scaling down art in code, in the room editor and through the camera and viewport with the correct surface but it always smushes my art. Would it be possible to share more information or even a link to someone else explaining what everyone means by this? It would help out a bunch, thanks.

[@ohalohuntero]

​ @Shaun Spalding do you draw the UI art at the same resolution as the smallest window size? so for example i'm using 384x216 for my view size (as it divides into 1920/5). I used pope's tutorial to allow me to change window/resolution sizes. For pixel art, is it best to draw the GUI surface at the base window size (384x216 ) or a multiple of that for more detailed UI. I have mine set to 768x432 for GUI size and was considering limiting the min window size to 2x the base resolution.

[@seinruhe8384]

Hi Shaun! A question, do you have any video regarding zooming pixel art without killing the art? Like in 4:24 , I'm new to coding but a seasoned pixel artist, so I find fascinating being able to smoothly zoom in or out without noticeable errors on scaling

[@daka.notatp]

Big thanks

[@creepary6856]

Hey, very good video, very good information, but how to remove the subpixels? In my game there are not, but the moment I zoom in, these unwanted sub pixels are generated.

[@icet1100]

Thanks!

[@vitaly.petkevich]

Good video. Extremely useful. But, that would be also helpful if you shown numbers you mention on the screen. Had to rewind the video several times at certain points, since I got distracted by the games displayed, and wasn't paying attention to what you were saying. Also, when I personally hear a number, it takes time, a couple of seconds, before I process and visualize it in my mind - by that time you pour even more numbers, which leads to a memory leak and crashes my brain. :)

[@GymLeaderEd]

anyone ever figure out how to create a "fullscreen" where the game window actually just stays the same size, moves to the center and creates a black border?

[@xGR3ENx]

hi, please give me an example project, I can't understand how you stretch the green background

[@paperbag3897]

Question:How do i make my rotating image pixelated and not smoothly turning

[@paulvictor7489]

The 640:360 is that the camera or just actual levels? What size should I be building my rooms at?

[@user-hs4lw9zt1j]

6:00 How do you make the UI slot float? thx

[@guidomenicacci336]

If I wanna make a GBA style game, whats the best resolution? (240x180) or a PIXEL_SCALEx2 (480x360)?

[@Gorbba6632]

Shaun, any chance you could do an updated gamemaker android tutorial, maybe a breakdown of the differences and the basics of porting to a mobile device? Haven't seen many good tutorials for gm mobile, not sure if it's even worth it to develope for

[@mrzaphkielYT]

5:30 is this inspired from Celeste? The stage looks very similar to Celeste's endgame level.

[@QUANT_PAPA]

can you make a video how you made that jiggle peaces go in place when you collect

[@ViciousDLicious1]

Maybe it's not resolution but I suppose screen-space, so perhaps relevant...I'd like a video on how to better control a camera so levels are displayed the way I want them to be, regardless of how I have my rooms laid out.

[@riemerdijkstra5974]

what if you use pixel art, but use floating pixels for things like squash and stretch. case and point "kindergarten".

[@loudandskittish]

I have a question - I see 640x360 recommended frequently, but what I never see addressed is using 16x16 tiles, which I understand to be quite common. With 360, you're going end up with one column of half grid squares (360/16 = 22.5). Does this matter? (Maybe it doesn't and that's why I never see it mentioned.) If it does, how do you address it? As noted in the video, this is the type of thing you need to get right early in a project...

[@ShaunJS]

Ah yeah, so this is the case in my game. It was a little inconvenient when I had originally tried to design my world's on a kind of "grid" of "screens" but then I just decided to stop doing that lol. So it might have some level design consequences but if you're aware of that going in you can decide how to work with it in terms of your camera or whatever. It's not really a big deal you just need to not base anything on the idea that a screen contains a whole number of tiles cos it won't. This will also be true for most tile sizes at a 16:9 aspect ratio anyway

[@loudandskittish]

@@ShaunJS Thank you.

[@Descending.]

What's your opinion on using a 1920 x 1080 resolution for a game? I've been thinking about working with this size to use less pixelated graphics but I fear this might impact how gamemaker handles the sprites

[@myPlaceholderName]

I followed the recommended tutorial on smooth cameras, but I don't seem to be getting the results shown at 4:22. The camera does move smoothly horizontally and vertically, but scaling the camera still looks off at non integer scaling. Scaling wasn't a part of the mentioned tutorial video so it's likely an error on my part. Do you think you could make a follow up tutorial for scaling?

[@ShaunJS]

You're right I don't actually go into the specifics for zooming but the technique does allow for it (as seen in *this* video). From what I remember you just scale the app surface the same way you move it.

[@ShaunJS]

I could look into a quick follow up if I can find time

[@myPlaceholderName]

@@ShaunJS That would be great. I've made some attempts on my own but I seem to have trouble wrapping my head around it.

[@creepermax4167]

where do you pick the resolution?

[@emanueltejadacoste2250]

Is there a way to scale from art made for 640 x 360 Wich scale perfectly to 1920 x 1080 full hd or 16:9 , the same pixel perfect on 18:9 ?

[@-linksantos]

Did you manage to resolve this? I also can't scale perfectly 16:9 with 640x360, only with 320x180

[@emanueltejadacoste2250]

@@-linksantos scale it to 18:9 ? Or just another 16:9 resolution?

[@Monster_Face_RB]

If you could make a video that covers "things to think about or learn about before starting a multiplayer game" that would be great! right now I'm beginning development on my first multiplayer game and other youtubers say "you should code your game with multiplayer in mind from the start." That's great and all, but what does that mean? what are some things I need to consider before delving into this project? Thanks!

[@WyMustIGo]

If you had any development experience in the first place, you would know the answer. Work on single player until you have a clue. Watching videos won't help, you actually need to do some work. Imagine that!

[@Monster_Face_RB]

@@WyMustIGo Im sure you are having a hard time in life which is why you are being so rude. I get it, you have to take it out on people online cause you don't have the ability to talk to someone like that in person. I will pray for you and your health.

[@WyMustIGo]

@@Monster_Face_RB Sorry but you don't win a trophy for losing.

[@TomatoPapyrusGuy]

I want my game to be 4:3 res but when I start my game it stretches out to 16:9

[@hoseinbebany]

Was this game pokey poke made in GM

[@BrendonReimer]

I just finished playing some SC2 and then watched this video. I jumped to 20 seconds and swore I was tripping balls.

[@CoryPelizzari]

My favourite is still 640x480. Sticking with 4:3 just because.

[@thumbsup5427]

I also have 640x480. Do you have problems scaling to fullscreen?

[@CoryPelizzari]

@@thumbsup5427 I actually don't know because I always play in windowed at the normal resolution. I guess I should really be checking that lol.

[@badwrong]

Some good information here. The parts about pixel art resolution are a bit misleading though. The resolution you render at does not need to be small at all, instead the camera "view" is what should be smaller to match the art style and what the player sees of the world. Its aspect ratio should match that of the target window, viewport, or render target (FBO or GameMaker surface). Many of the issues mentioned about weird stretching and skinny pixels at sub-pixel movement and zoom levels goes away when your render target is still a high resolution. For example in game maker you would set your window and application surface to 1080p, and then your camera view could be something like 426x240. That would give you much more resolution, then along with the proper filtering and sampling you'll have clean looking pixel art that still uses sub-pixels and fractional zoom values. I get that this video is targeted for beginners, but it really helps early on to understand that the dimensions of your game's camera view can differ from the actual render target. Rendering is done in "normalized clip space", not some hardcoded dimensions like 1920x1080, etc.

[@ShaunJS]

This isn't true, if your view is of a small area of the game, and simply scaled up to a large window size and application surface then any non-integer positions that are drawn, including using tools like draw_line() will make use of the available pixels and you will have mixels introduced that will break the consistency of your art style. I'm not saying the only way you can avoid this is by locking the application_surface to a smaller size but it is by far the most straightforward to manage in my experience. You're right that you would tackle (or rather just, never encounter) the issue of *stretched* pixels and jagged camera movements this way. It is the way most beginners approach the problem. But then you're left with the far worse and more prevalent problem of a completely inconsistent art style the moment something breaks from the pixel grid. (Some even argue that adding in the smooth camera zooms and so on is illusion shattering by itself.) If you don't need the pixels, there's simply no need to have them available. Again I'm aware there are other ways to do this. But I don't think anything I said is misleading and stand by it as the best advice for not just beginners but honestly, the average developer in general.

[@badwrong]

@@ShaunJS but you do need the pixels if you want sub-pixels since you'll have to deal with drawing at non-integer values. Without the extra resolution it will be more difficult to counter with some type of sampling. Depending on your pixel art resolution the extra resolution could even hide it all together. When a pixel is drawn to an equal sized resolution render target at a position that does not line up with the pixel grid it eventually hits your screen with many pixels making up its odd shape. If that same pixel is drawn to a render target of higher resolution (typically the native screen resolution) those odd shapes are only "odd" by a single pixel or so out of many. Then the use of some point sampling shader in post draw makes it even better. If you aren't using sub-pixels then sure, I'm in 100% agreement. However, I find it more common nowadays for people to move objects, cameras, and zoom values at fractional values. Without the extra resolution its almost impossible to fix each of those problems "all at once". You can do tricks like drawing the application surface to smooth camera movement, but objects drawn at non-interger values will still be an issue... in fact they look even worse in that situation and "stutter" really bad. The solution is simply use the native resolution of the display. Beginners need to know the difference between camera size and application surface size, and they are not advance topics really.

[@ShaunJS]

@@badwrong I think we're using several of these words differently as I'm getting confused over where we're agreeing and disagreeing. I think my video does a decent job of explaining what I wanted to and I'm happy with it. But thanks for your input. It feels like you're mostly just arguing that applying a filter/shader to correct mixelling issues is a better generalized solution than just locking the application surface size which I can see the argument for guess? But suffice to say I just don't really agree on the whole.

[@badwrong]

@@ShaunJS always different views on things, which is great and that's how new ideas come about. I don't know your exact background on working directly with graphics APIs such as DirectX, OpenGL, etc. So, we may very well be looking at this totally different. Consider this though: Your previous video on "smoothing" a pixel art camera technically won't work without the window (back buffer) having more resolution than your camera view and/or application surface. The solution is using "extra resolution" to hide things. I argue that the frame buffer (app surface) needs that extra resolution to minimize the size each mixel will be, because if you draw at sub-pixel coordinates you will have them no matter what. So, when choosing a resolution for pixel art the corresponding thing in-engine to reflect that choice is the size of your camera view. Not the dimensions of the render target or window. On a side note, last I checked sizing the actual game window through code is ineffective in GM. Perhaps it is only the back buffer that takes on the desired resolution, but point is you end up with the same number of pixels that the display supports anyway.

[@NoahNCopeland]

@@badwrong you could always do a pixel-perfect zoom tutorial if you have a different approach than shaun's, I'd be curious

[@Deer_Paradise]

Write plz professional inventory system like in games, lineage 2 game.

[@gamenrage5998]

ARTIST WILL WORK BUT NOT BE CONTROLED, not one word you used is what i had searched.

[@pushkar000]

Nobody will be controlled relax. Artists are not special. It’s just a skill and a role, like any other.

[@retro_boy_advance]

Ok

[@gamenrage5998]

WHY ARE YOU ALL FOCUS ON DEVELOPERS OVER THE ARTIST ALL I WANTED TO Fing KNOW IS HOW TO DO ARE SIZE FOR WANTED WORK DONE FOR GAMES NOT DEVELOPING THE DAM GAME, WHATEVER.

[@dustinbruce]

Someone has an anger problem 🥴😂

[@denjidenji9162]

This is a channel focused on game development. Maybe you should look elsewhere.

[@ReachForTheBiscuit]

It’s trying to speak

[@Churly25]

Shut up

[@somnbody]

Hope they found the caps key again eventually.