concerns/worries of pixel perfect work (60 x 60)

flyinian

Member
so, as i am creating this post, I realized that I made an error. Luckily, it's very early in my game's development. I was creating my pixel art 60 x 60 thinking all is good because 60 goes into 1920 and 1080 evenly but, I don't believe this is how pixels/resolutions/aspect ratios (work or do they)? however, I'll still be asking the original questions just in case i may be wrong. I have read a few yo yo games forums, videos and such and still have that feeling of "I need absolute and confident answers from someone so, I know what I am doing is 100% right and that I won't regret my current actions in the future.".

Question 1: Would it be better if I start fresh with 240 x 135 for my pixel art and not go smaller?

Question 2: I hear a lot of "use the smallest possible resolution for .....". does that mean that my smallest resolution that I use for my pixel art be 240 x 135? is going smallest to biggest a good design and why?

Question 3: would everything be okay if I go 60 x 60 since the game will be up scaling the pixels and that it goes into 1920 x 1080 evenly? I don't think it will work since 60 doesn't evenly go into 270 or 135. if it up scales it'll lose its pixel perfect once it reaches 270 x 135 and larger?

Question 4: What is the smallest resolution that I can use before I step out of the "pixel perfect" boundaries?
I would assume its 240 x 135 but, can I go lower such as 60 x 60?smaller?

Question 5: When one refers to their game/monitor "native resolution"(ex: 1920 x 1080), would that be referring to the default resolution of the said game/monitor at which is was originally created at? ex: if I made my game at 270 x 135 and one is playing it at 1920 x 1080 then they would say the native resolution would be 270 x 135 and not 1920 x 1080?

1920 x 1080 | my monitor's native resolution and game's target resolution
960 x 540 | /2
480 x 270 | /2
240 x 135 | /2 this resolution would be the smallest I should go or think of?
120 x 67.5 | pixel perfect can't be done in fractions.
60 x 33.75 | I was using 60 x 60 but, realized that isn't right.
30 x 16.875 | pixel perfect can't be done in fractions
15 x 8.4375 | pixel perfect can't be done in fractions

conclusion: I, more or less answered my own question as I was creating this post. However, I would still like feedback from someone who understands this stuff confidently. The last thing I want is having a nuisance of creating an entire game in a bad resolution and forever be stuck that way. I believe I should scrap all of my pixel art and go to a resolution of 240 x 135 because it's better to go small to bigger to biggest.

Thank you.
 

nesrocks

Member
If you use 60x60 it will scale perfectly, but it will look stretched. Namely, each "pixel" will be 32 (1920/60) screen pixels wide and 18 (1080/60) pixels tall.
You can use 120x67 and leave black bars above and below the game after scaling it up 16x. The black bars will be 4px tall each, so nobody will notice. 67x16 = 1072.
You can do virtually any resolution with this technique, leaving some black bars so everything is integer.

The problem is, I think you should consider 720p displays too, and also 2160p (4k tv), not just 1080p. In my game I use 640x360. This can be 2x = 1280x720, or 3x = 1920x1080, or 6x = 3840x2160. Also, 320x180 works similarlly, scaling up to 720p, 1080p and 4k beautifully without black borders. You'll notice that 160x90 does that too, and 80x45.
 
Last edited:

flyinian

Member
Firstly, I just want to say, "thanks for replying".

I am still in the very early stages since i'm focusing on code rather than making time consumed visuals.

with that, i am thinking on going with 32 x 32 sprites and tiles and scale them 1:1 when I want them bigger (ex: to make an enemy look larger and more menacing than its minions).

I am doing 2D pixel art and I am currently working with 480 x 270 camera views and 1920 x 1080 application size/port views(resolution?). is this a good idea? should I go smaller? 240 x 135? or maybe I should go with your recommendation of 320 x 180.

I feel like that the figuring out of which ratio and such to use will be a long one. I guess its a positive because i'm less likely to make sprites when i'm unsure what ratio to use.

once again, thanks.


If you use 60x60 it will scale perfectly, but it will look stretched. Namely, each "pixel" will be 32 (1920/60) screen pixels wide and 18 (1080/60) pixels tall.
You can use 120x67 and leave black bars above and below the game after scaling it up 16x. The black bars will be 4px tall each, so nobody will notice. 67x16 = 1072.
You can do virtually any resolution with this technique, leaving some black bars so everything is integer.

The problem is, I think you should consider 720p displays too, and also 2160p (4k tv), not just 1080p. In my game I use 640x360. This can be 2x = 1280x720, or 3x = 1920x1080, or 6x = 3840x2160. Also, 320x180 works similarlly, scaling up to 720p, 1080p and 4k beautifully without black borders. You'll notice that 160x90 does that too, and 80x45.
 

RangerX

Member
First things first, your sprite and tiles size doesn't have anything to do with scaling your game. Make them the size you think looks good at your base resolution.

Screen ratio: The idea is to have a screen ratio most people are using so your game doesn't unnecessary black borders. The answer is 16:9, no questions about it. Almost everything is 16:9 nowadays.

Base resolution: While I personally wouldn't care much for 720p (because this resolution really is going away), 320x180 seems a good choice because you want your game to fit 1080p, the most commonly used resolution amongst gamers.

Technicality: You want your views and port at at the base resolution. Then you scale your game by the application surface only. See my pixel perfect tutorial if need be. https://forum.yoyogames.com/index.php?threads/how-to-properly-scale-your-game.995/

Hope that helps!
 

nesrocks

Member
I didn't even consider for a moment that the OP didn't mean 60x60 was his game's resolution. Yeah, like RangerX said, the contents of the image don't matter. I mean, if your game is a stactic screen with no scrolling and has tile based backgrounds, then yes, you want your resolution to be a multiple of your tile size, otherwise your tiles will not fit an integer amount on the screen, but that has absolutely nothing to do with pixel perfection. Pixel perfection is only dictacted by the ratio the entire game screen is scaled up to the display, which should ideally be by an integer amount.
 

flyinian

Member
CONCLUSION:

creating pixel art:
So, the size of the canvas/pixels/tile sets doesn't matter when it comes to pixel perfection game? i can scale them by integers or fractions?

tile sets:
When I try to place my tiles on the game world it snaps to the tile set's grid and not the actually room grid (in the instances layer). I currently have the tile set to 1 x 1 so, that make each pixel of the tile set a grid. It makes it easier to place the tiles. However, I noticed a huge performance change to my pc when I make the change to the lower tile set grid. My theory is that gms is calculating each individual grid as a tile (so a 1920 x 1080 sprite in a tile set with a 1 x 1 grid will be over 2 million tiles that gms has to process) thus, making it unresponsive and such.

Should I make my tiles the same size of the room that ill be placing it in and then create to size?

some more on the problem I am having would be when I set up the tile sets. When I try to place a tile set with a grid of 60 x 60 it will only snap to the grid and won't let me do precise placement.
EX: When I am trying to place the ground of my game it won't snap to the very bottom of the game world. It snaps to the grid so, If I am trying to place the ground and the grid is partly out of the game world(or the grid is not where I want an object to be at, lets say, "a tree" it snaps half way into the ground due to the grid layout.

The current room size I have is 480 x 270 and I am using a tile set grid size of 1 x 1. if I change the tile set grid size to 60 x 60 it becomes off center(?)...the grid extends out of the game world.

room size:
The room size can be as big as I want it and it doesn't need to be a 1:1 or 16:9 ratio? ex: 9999 W x 50 L

camera size:
The camera size should be the same as the view port.
I am thinking on changing it to 320 x 180

view port size:
The view port size should be the same as the camera size.
I am thinking on changing it to 320 x 180.

smaller or bigger?:
Is it better to scale up or down?

SUMMARY: This is what I am thinking on doing since, from what I understand will result in pixel perfect and everything will scale nicely.

Pixel art will be 60 x 60.

tile sets will be same as the game room.

room size(game world size) will be 320 x 180 . Ill be increasing it by the listed integers below.

camera size will be 320 x 180 . this will scale perfectly to most used monitors

view port will be 320 x 180 . This will scale perfectly to most used monitors


The integers:
I feel these are wrong?
2x = 320 x 180
4x = 640 x 360
8x = 1280 x 720
16x = 2560 x 1440

one last question I have would be on how would you recommend finding a good scale for the player to building and player to enemies?
Should I do the p[layer at 60 x 60 and for building scale them by 3 and then scale big bosses by 4 or higher? is this how its done?

i do apologize for the lengthy reply/questions. I hope it makes sense and that you can finalize this entire post with one last reply. :)

If there is a post that goes over this stuff please post them in your reply. I have done some research but, the outcome hasn't satisfied me. I've also read RangerX's post on scaling and pixel perfecting multiple times which has helped a lot but, still hasn't satisfied me as you can see above.

Once again, thank you for your time and for replying.
 

flyinian

Member
First things first, your sprite and tiles size doesn't have anything to do with scaling your game. Make them the size you think looks good at your base resolution.

Screen ratio: The idea is to have a screen ratio most people are using so your game doesn't unnecessary black borders. The answer is 16:9, no questions about it. Almost everything is 16:9 nowadays.

Base resolution: While I personally wouldn't care much for 720p (because this resolution really is going away), 320x180 seems a good choice because you want your game to fit 1080p, the most commonly used resolution amongst gamers.

Technicality: You want your views and port at at the base resolution. Then you scale your game by the application surface only. See my pixel perfect tutorial if need be. https://forum.yoyogames.com/index.php?threads/how-to-properly-scale-your-game.995/

Hope that helps!
I didn't even consider for a moment that the OP didn't mean 60x60 was his game's resolution. Yeah, like RangerX said, the contents of the image don't matter. I mean, if your game is a stactic screen with no scrolling and has tile based backgrounds, then yes, you want your resolution to be a multiple of your tile size, otherwise your tiles will not fit an integer amount on the screen, but that has absolutely nothing to do with pixel perfection. Pixel perfection is only dictacted by the ratio the entire game screen is scaled up to the display, which should ideally be by an integer amount.
CONCLUSION:

creating pixel art:
So, the size of the canvas/pixels/tile sets doesn't matter when it comes to pixel perfection game? i can scale them by integers or fractions?

tile sets:
When I try to place my tiles on the game world it snaps to the tile set's grid and not the actually room grid (in the instances layer). I currently have the tile set to 1 x 1 so, that make each pixel of the tile set a grid. It makes it easier to place the tiles. However, I noticed a huge performance change to my pc when I make the change to the lower tile set grid. My theory is that gms is calculating each individual grid as a tile (so a 1920 x 1080 sprite in a tile set with a 1 x 1 grid will be over 2 million tiles that gms has to process) thus, making it unresponsive and such.

Should I make my tiles the same size of the room that ill be placing it in and then create to size?

some more on the problem I am having would be when I set up the tile sets. When I try to place a tile set with a grid of 60 x 60 it will only snap to the grid and won't let me do precise placement.
EX: When I am trying to place the ground of my game it won't snap to the very bottom of the game world. It snaps to the grid so, If I am trying to place the ground and the grid is partly out of the game world(or the grid is not where I want an object to be at, lets say, "a tree" it snaps half way into the ground due to the grid layout.

The current room size I have is 480 x 270 and I am using a tile set grid size of 1 x 1. if I change the tile set grid size to 60 x 60 it becomes off center(?)...the grid extends out of the game world.

room size:
The room size can be as big as I want it and it doesn't need to be a 1:1 or 16:9 ratio? ex: 9999 W x 50 L

camera size:
The camera size should be the same as the view port.
I am thinking on changing it to 320 x 180

view port size:
The view port size should be the same as the camera size.
I am thinking on changing it to 320 x 180.

smaller or bigger?:
Is it better to scale up or down?

SUMMARY: This is what I am thinking on doing since, from what I understand will result in pixel perfect and everything will scale nicely.

Pixel art will be 60 x 60.

tile sets will be same as the game room.

room size(game world size) will be 320 x 180 . Ill be increasing it by the listed integers below.

camera size will be 320 x 180 . this will scale perfectly to most used monitors

view port will be 320 x 180 . This will scale perfectly to most used monitors


The integers:
I feel these are wrong?
2x = 320 x 180
4x = 640 x 360
8x = 1280 x 720
16x = 2560 x 1440

one last question I have would be on how would you recommend finding a good scale for the player to building and player to enemies?
Should I do the p[layer at 60 x 60 and for building scale them by 3 and then scale big bosses by 4 or higher? is this how its done?

i do apologize for the lengthy reply/questions. I hope it makes sense and that you can finalize this entire post with one last reply. :)

If there is a post that goes over this stuff please post them in your reply. I have done some research but, the outcome hasn't satisfied me. I've also read RangerX's post on scaling and pixel perfecting multiple times which has helped a lot but, still hasn't satisfied me as you can see above.

Once again, thank you for your time and for replying.
 

RangerX

Member
ok ok, I'll try not to let you down but jeez man... keep it simple. Are you doing a pixel art style game that is similar to NES or SNES game?
You could help yourself and do roughly like those consoles did back in the day. Let's say I pick NES for you.


Pixel art size:
Theorically can be any size but its best and easier to go by a power of two size. Set yourself definitive sizes for your sprites. Let's say you work with 16x16, 32x32 and 64x64. Those are realistic sizes that are NES/SNES like.


Tilesets:
Have your tilesets a size that divides perfectly with your sprite sizes. Per example, 32x32 tiles. Your tilesets needs to be smaller than the texture pages size or else its gonna get resized and ruined by the engine.


RoomSize:
The room is just a canvas to work with. It can be any size and doesn't have anything to do with the subject of this thread. The room is the size of your level, the size of your map, the size of your world. Here again, for convenience, be smart and make its size dividable by your tile size!


View, View Cam if you in GMS2 and port size:
Those 3 things should always be the same size. That size is gonna be the native resolution of your game. In the case here 320x180


Scaling logic on a pixel display:
Scaling down always equal in a detail loss. This is simply explain by the fact there's less resolution to "build" the same graphic on screen, therefore its less precise/clear.
Scaling up by an integer value will preserve the graphics "as is". Pixel perfect. If you scale up by a fraction, you will have graphical deformation because the graphics will need to get rounded. Fractions of pixels don't exist. A pixel on a screen is lit or not not lit.


About the relative sizes of things in your game, you will figure this out by testing. There's no way around that because there's no "right size". Here again look at games that exist. Does Mario in Super Mario Bros 3 take 2 tierce the height of the screen? of course not. Else he would look like a giant.
 

flyinian

Member
Thank you, I believe this clears this up for me. I guess I would say that i'm going with a SNES game, maybe with some more details.

Once again, Thank you.
ok ok, I'll try not to let you down but jeez man... keep it simple. Are you doing a pixel art style game that is similar to NES or SNES game?
You could help yourself and do roughly like those consoles did back in the day. Let's say I pick NES for you.


Pixel art size:
Theorically can be any size but its best and easier to go by a power of two size. Set yourself definitive sizes for your sprites. Let's say you work with 16x16, 32x32 and 64x64. Those are realistic sizes that are NES/SNES like.


Tilesets:
Have your tilesets a size that divides perfectly with your sprite sizes. Per example, 32x32 tiles. Your tilesets needs to be smaller than the texture pages size or else its gonna get resized and ruined by the engine.


RoomSize:
The room is just a canvas to work with. It can be any size and doesn't have anything to do with the subject of this thread. The room is the size of your level, the size of your map, the size of your world. Here again, for convenience, be smart and make its size dividable by your tile size!


View, View Cam if you in GMS2 and port size:
Those 3 things should always be the same size. That size is gonna be the native resolution of your game. In the case here 320x180


Scaling logic on a pixel display:
Scaling down always equal in a detail loss. This is simply explain by the fact there's less resolution to "build" the same graphic on screen, therefore its less precise/clear.
Scaling up by an integer value will preserve the graphics "as is". Pixel perfect. If you scale up by a fraction, you will have graphical deformation because the graphics will need to get rounded. Fractions of pixels don't exist. A pixel on a screen is lit or not not lit.


About the relative sizes of things in your game, you will figure this out by testing. There's no way around that because there's no "right size". Here again look at games that exist. Does Mario in Super Mario Bros 3 take 2 tierce the height of the screen? of course not. Else he would look like a giant.
 

nesrocks

Member
About 320x180: to get it to 1080 you just multiply it by 6x.

I think what you simply need to do at this point is create a photoshop file with 320x180 and draw a game screen there.
 
Top