About resolution, pixel art and size

[VALO]

Hi again. Before developing this game too far, I think I should probably get this resolution stuff in check.

Please ask for more details if I’m explaining myself poorly here.

I’m wondering what kind of game resolution, sprites and zooms I should be using.
My project is an pixel perfect game and I’m planning it to have 16:9 aspect ratio and “16-bit art-style” at least most of the time (I’ll probably have an 8 bit or a much higher quality section or something so I need my game to be flexible like that).

Currently I’m using 1280x 720y resolution. Currently some of my sprites (backgrounds) are as large (don’t laugh) as 288x (which is 9 times 32) 162y (which isn’t 32 times any whole number, it’s just the height the 288 needs in order for the screen to be 16:9). However most of my sprites are about 16x16 - 32x32. Because of this, my sprites appear very small while playing, so I use some kind of camera zoom (depends on scene, often 3) to make them appear larger. And as I said, my sprites vary in size a lot because I liked to fit the whole “picture” (like a whole carpet) in one sprite rather than building it from smaller individual sprites.

The problem is that I have no idea if this is a smart way of doing it.
Is 1280x720 a good resolution for a game that is majority of the time 16bit but can sometimes demand individual high quality images or backgrounds or an animated cutscene or 8bit style?
Should camera zoom be used? When and how? Can it mess up the quality?
Should sprites all be same size or is this type of variety okay?
Should I resize my sprites to be bigger? Or are sprites as small as that teddy bear and character alright (16x16 and 32x32)?

Also, why does this happen on my 288x162 background image:

See how those pixels, that are perfect squares in the editor, become squished? This is exactly the type of stuff I want to avoid before developing further!
Wait… I think smaller sprites are suffering from it too!

Lastly I’ll ask, how can I make everything SNAP on pixels, so my character can’t for example, end up standing between 2 pixels? My game actually might already work like this but it’s a bit hard to say since the pixels seem to be distorted everywhere.

Current settings:

Thanks

EDIT: I noticed that when I open the game (it’s in windowed mode), pixels are not squished. It’s only after I change the screen size than problems arise. Both fullscreen (clicked on the button in the corner of the window) and actual fullscreen (alt+enter style, hides taskbar) cause squishiness. However, this only applies to some scenes. The scene where the second image attached is from seems to have squishing always in the background.

[bclikesyou]

I always referenced this chart when making lo-res pixel art games that I wanted to be in a 16:9 resolution. I would also aim to pick one of the divisible by 8 choices (in green). List of True 16:9 Resolutions – Pacoup.com

[weadsy1]

@VALO

Lastly I’ll ask, how can I make everything SNAP on pixels, so my character can’t for example, end up standing between 2 pixels?

Sorry, I won’t be much help for all the other questions (the game does look very nice though), but I think I can help with this. You can enable the grid and make sure to set the height and width of the cells a number that 1280 and 720 are divisible by, luckily they are both divisible by 16, so if you set the height and width of the cells to be 16 you should be able to align everything perfectly. If you want to get even more precise you can use smaller numbers that are divisible by 2, so 8, 4, 2.

[VALO]

doesn’t that only effect the editor? I would like to have something similar during gameplay.

[weadsy1]

Ah I misunderstood your question. Yes you can install the snap to grid extension. In terms of the size of the cells you can use the same logic I explained earlier. If you want there’s a gdevelop template game that has the events for using the shape painter to draw little black cells on the screen as well. It’s a little complicated and you’ll have to change some of the values but it’s not too hard if you’re relatively familiar with how the shape painter works.

[VALO]

Thanks. What would those black cells be used for? Why would I use that in addition to snap to grid extension?

[weadsy1]

It’s not necessary but it gives you a grid overlay that corresponds to the snap to grid extension’s invisible grid. So it looks just like the grid overlay in the scene editor window. I like to use a button to toggle it on or off. I’ll see if I can turn it into an extension, I’m surprised there isn’t one like it yet.

[Silver-Streak]

My recommendation:

Go to the lowest resolution you can find that “feels” good. 1280x720 can work, but note that if someone is on a 1080p monitor and makes the game fullscreen, it will look distorted (because 1080p is 1.5x 720p, and therefore every one pixel is turned into 1.5 pixels, so not scaled evently).

If 640x360 can work for you, that’ll be MUCH better as it can evenly scale into 1280x720 AND 1920x1080. (and 1440p too).

If you didn’t need the high resolution assets, I’d recommend you started even smaller, like 320x180, so you’re working with the native asset size.

All of this said, even if you’re using those lower resolutions, what you should do is at the start of the game; change your resolution higher, then zoom in your camera an inverse amount.

e.g.:

1. Your game is designed for 640x360.
2. At the start of the game, you use the event to change the game resolution (and NOT scale your assets) to 1920x1080. This is 3x the size of your game assets design resolution.
3. In the same event, you then zoom all of your layers to 3x. This will have your assets appear at the same size as if your game resolution was 640x360.

Why do this? This allows you to have a higher internal resolution (What the scene is actually rendered at) vs your assets, which means you have more position/pixels to work with. This is greatly beneficial because it will allow the following:

• Smoother camera movement
• Smoother object rotation
• More positions for smoother tweened animations.

[VALO]

Thank you.
I changed the game resolution to 640x360 and it seems alright. I also used the “game resolution” event set it to 1920x1080 (I hope that’s the right one? There are also “game resolution resize mode” and “change the size of the window” events). The game looks good, but the 3x zoom isn’t enough. 5x seems better (I hope there’s no reason to believe this could lead to problems).

The squishy pixels come back if I change the window size manually in windowed mode (though both types of fullscreens are now free from distortion). Is there a way to let the player play in windowed mode, change the window size without the art getting messed up?

Also, I want to mention that one background image I have in a different scene. This one:

This still has distortion in every mode, windowed or fullscreen… I think. I’m guessing it has something to do with the dimensions of that particular image: 288x162. Why? How could this be avoided? I’ll try to find the solution by changing the resolution of that image…

Lastly I’ll add that I’m kinda lost in the editor now.

You see it’s a little confusing now because the “camera window thing” should tell me the are the player sees when starting the game, but since I zoom and change the resolution in events, it tells me practically nothing. I’m sure I’ll figure it out at some point but if anyone has any clear tips please let me know!

[VALO]

Hi! I forgot to tag you in my latest post here. Could you share your thoughts when you have a chance? Thanks

[Silver-Streak]

@VALO

The game looks good, but the 3x zoom isn’t enough.

Whatever works for you should be fine.

@VALO

The squishy pixels come back if I change the window size manually in windowed mode (though both types of fullscreens are now free from distortion). Is there a way to let the player play in windowed mode, change the window size without the art getting messed up?

Yes that’s to be expected, you’re manually resizing to non-integer values. Disable window resizing if you don’t want to allow it (there’s an event action for this).

@VALO

This still has distortion in every mode, windowed or fullscreen… I think. I’m guessing it has something to do with the dimensions of that particular image: 288x162.

Are you stretching it to full screen? If so, that’s to be expected.
If not, then that’d be something else going on, make sure your resolution properties in your project is set to something like this.

It’s up to you whether you want the round pixel positioning, it’s not usually needed.

Also, make sure your background is placed on an exact number, e.g. Make sure it is set at 100 X 50 y, and not 100.73 x and 50.12375 y. The “round pixels” will help with this a bit, but that can also mean the in-game positions look different than the scene editor.

[VALO]

I’ve been using the camera zoom 5 now for some time. It looks perfect in fullscreens, but in a small window everything gets very distorted:

Here are other images so my situation is clearer

I would like my game to be played on windowed mode too without distortion… (it’s hard to say if using smaller zoom, like 3, would fix the problem because the sprites became way too small anyway)

Also, it can be a nightmare to work in the editor now. For example, I’m now implementing a dialog system and added an dialogue box. It’s an UI element of course so I don’t want it to move with be background (I still want to zoom in though so its scale matches with other sprites.).

This is where I have to locate it in order to have it show up!? I’m guessing this happens because of the resolution change and zooming and camera centering but I’m not understanding it and this is a nightmare for my work flow! What should do about this?

[Silver-Streak]

@VALO

I would like my game to be played on windowed mode too without distortion… (it’s hard to say if using smaller zoom, like 3, would fix the problem because the sprites became way too small anyway)

This is not how it works. If it doesn’t look right in windowed mode, something about your window size is not an integer scale of your resolution. With any display mode (window/fullscreen/etc) your resolution can only be integer multiples of your base resolution (1x, 2x, 3x, etc). If you allow dragging/manual resizing of the window, it will likely end up not an integer size, and you will see distortion.

There is no workaround other than disabling manual window resizing, and maybe setting up some sort of toggle that lets the user select a window size (1x = 640 x 360, 2x = 1280x720, etc)

@VALO

This is where I have to locate it in order to have it show up!? I’m guessing this happens because of the resolution change and zooming and camera centering but I’m not understanding it and this is a nightmare for my work flow! What should do about this?

You should only be setting up your UI once, so you either:

• Get used to it since you shouldn’t have to mess with UI after initial setup.
  or
• Set up some sort of small block sprite and put it in the center of where you want to edit the UI, then set up an event that centers that UI layer’s camera onto that square. Then it doesn’t matter where you place your UI objects in the scene, so long as the square is in the center of them, the camera will center around that position.

Also, unless you are only going to ever have 1 scene, you shouldn’t be setting up your UI in that scene anyway. You should use an External layout and set up your UI (As global objects) there, then spawn the objects from the external layout at the start of your scene. That way you’re only setting up your UI objects once.

[VALO]

Sorry about being unclear about the pixel distortion in windowed mode. What I meant was that even though I don’t manually change the window side, it still distorts. As seen in the images I added, my project resolution is 640x360 and game resolution is set to 1920x1080 at the beginning of scene. So it should be “integer scale of my resolution”.

@Silver-Streak

Whatever works for you should be fine.

And if any zoom, like my 5, is indeed okay, then I don’t understand the cause for the distortion. How is it not in “integer scale”?

Thank for that block sprite idea! It sounds amazing. I’ll look into external layouts too! At this point, I’m still just experimenting

[Silver-Streak]

@VALO

And if any zoom, like my 5, is indeed okay, then I don’t understand the cause for the distortion. How is it not in “integer scale”?

Is your display only 1080p? If so you won’t be able to show windowed mode in 1080p (as the title bar +border will make it larger than your desktop resolution, and electron will force it back to fit when first going to windowed mode, therefore resizing it without your input).

If you have a 1080p monitor and you’re testing windowed mode, set up an event that checks for a keyboard key that sets the window size to 1280x720p, then hit that button after launching the windowed display.

If you’re still seeing distortion after doing this, can’t really help you further as I can’t reproduce it.

[VALO]

I think my displays are 1920x1080 and 1920x1200 since I don’t seem to be able to change them to be higher from the settings. But I’m not sure but I’ll go with those numbers.

I did more testing and here are the results:

Resolution in game properties: 640x360
Camera zoom: 5 on all relevant layers including the distorting one
Set resolution at the beginning of the scene: 1920x1080

• 1920x1080 display

  • Small window: horrible distortion
  • Maximized window: distortion
  • Fullscreen: NO DISTORTION
  • Set game window size to 1280x720: distortion
  • Set game window size to 1920x1080: NO DISTORTION

• 1920x1200 display

  • Small window: horrible distortion
  • Maximized window: NO DISTORTION
  • Fullscreen: NO DISTORTION
  • Set game window size to 1280x720: distortion
  • Set game window size to 1920x1080: NO DISTORTION

Resolution in game properties: 640x360
Camera zoom: 3 on all relevant layers including the distorting one
Set resolution at the beginning of the scene: 1920x1080

• 1920x1080 display

  • Small window: too small, can’t tell
  • Maximized window: distortion
  • Fullscreen: NO DISTORTION
  • Set game window size to 1280x720: NO DISTORTION
  • Set game window size to 1920x1080: NO DISTORTION

• 1920x1200 display
  - Small window: too small, can’t tell
  - Maximized window: NO DISTORTION
  - Fullscreen: NO DISTORTION
  - Set game window size to 1280x720: NO DISTORTION
  - Set game window size to 1920x1080: NO DISTORTION

I don’t understand what’s going on at all.
Here are the relevant events again:

[Silver-Streak]

Yeah, can’t help you further on that one. No clue what would cause that since I can’t reproduce it.

You’re not using the web version or something, right? (Where the window size will include the title bar/address bar/etc and may look odd)

[VALO]

No, I’m using the downloaded version.
That’s sad to hear
I’ll propably try to check out few devlogs from other rpg developers or tutorials.
But thank you very much for trying. I really appreciate your time.

@Silver-Streak

At the start of the game, you use the event to change the game resolution (and NOT scale your assets) to 1920x1080. This is 3x the size of your game assets design resolution.

I would still like to ask why you advised me to not resize assets in Piskel? I assume that’s what you are saying here since I asked about that. I’m thinking about maybe doubling the size of all my assets so I don’t have to zoom as much… I really have no plan I’ll just try a bunch of different things. Just curious if there is some kind of problem with resizing.

[Silver-Streak]

Larger assets = more memory requirements, as well as potentially running into maximum texture size limits (~2048x2048 is the maximum texture size supported by the renderer for a single image file, and on some mobile devices they won’t render anything over half that).

[VALO]

I’ll report my future progress with this into this post here in case you or someone else appreciates it. When I have something to add, I’ll simply edit this one (if I remember) and not post another reply.

• I took my 32x32 character and my 200x200 background room and resized them to be twice their original size (so for example character is now 64x64). Because sprites are bigger I changed the zoom from 5 to 3. Currently I see no distortion in small window mode. Neither in maximized window mode. Nothing wrong with fullscreen. Even the “set game window size to 1280x720” seems to work perfectly. I’m not ready to call this fixed yet (I have developed trust issues over this) but it currently looks like there is no distortion is any of the mentioned modes, in either display. Based solely on this, the problem seems to lie in too small sprites (for my project settings) or in zooming too much.

• I Just tried to set to zoom back to 5 while still using bigger (double size) sprites. Now there is distortion in unmodified windowed mode (in my understanding this is 640x360). “Set game window size to 1280x720” results in very slight distortion. So slight that if I were not this zoomed in, I might not be able to tell. Makes me question of this was actually present in my successful 3x zoom experiment too, but because it wasn’t as zoomed in, I couldn’t tell [checked, I don’t think there is ANY distortion]. Fullscreen is perfect. These apply to both displays. Small window size, big resolution and big zoom (or their combination) are definitely suspects. For me this might be acceptable since I don’t think I need to make the sprites appear this large ever, probably.