Screen resolution & map size

Started by
4 comments, last by retro_style 8 years, 11 months ago

So I want to make a game for iOS and android devices, using pixel art for my sprites and tiles. I'm thinking about eventually using corona sdk in order to achieve this. I'm currently testing out the program called tiled. I figured out how to import my own created graphics since my last post and now I just need to know one more thing before I continue my project. This is a little indie project by the way just to see what I can do... anyway I'm currently wondering about screen resolutions and map size. I know that the iPhone 6+ has a screen resolution of 2208x1242 and that the iPad with retina display has a screen resolution of 2048x1536. So using these devices as an example how would I work out a good map size for tiled that would work on these devices. What maths formula do people use to come up with the appropriate map size for a mobile game and how do they do it so that it can fit on multiple mobile devices? Like iOS and android ?

Advertisement

Since you've mentioned Tiled, I'm assuming you are making a raster-style 2D game (retro perhaps), rather than a 2D game with traditional cell-style animation (more like a cartoon).

A concept that you'll eventually come to borrow when trying to make this kind of game work is the action-safe zone, which comes from the film industry. Basically, in film and television you won't see important things or text at the very edges of the display, because it might not be visible on some displays due to how they're manufactured or calibrated. In a 2D raster-style game you have the same thing only the motivation is that your game might be run on platforms with rather different resolutions and aspect ratios. So what you want to do is collect all the resolutions and aspect ratios you want to target, layer them on top of one another, and see what the common area that they all share is -- you have to design with this minimal area in mind, because its what you can guarantee the player will see. Likewise, you have to then look at each platform separately and consider how much larger that platform's screen is than this common area -- if you're going to fill that area with more view, you now have to consider how that impacts the gameplay experience. For example, in a competitive game, does it give an unfair advantage to a player with a certain screen size? In a single-player game, does it make a secret that's hard to spot on some platforms super-easy to spot on others, and do you care?

How you deal with that can vary, but usually its a combination of scaling and letterboxing (instead of black bars, you can add or rearrange HUD elements if you like, or add decorative borders). All of this is just to deal with different aspect ratios.

In a raster-based game, after you've decided how to deal with aspect ratios, then you can think about how that impacts your art production parameters, like the sizes of tiles, characters, UI, and maps. If you need pixel-perfect art, then you need to make identical art at several resolutions, picking the one that's most appropriate for that platform -- it sounds like a lot of work, and it is, but its the only way to get pixel-perfect results. You can reduce this work somewhat by scaling-up smaller assets, and by playing with your action-safe zone to allow for reasonable compromises between platforms who's needs are close. (You'll also want to weight the importance of particular platforms based on how much of the market they have (e.g. its probably a good idea to cater to flagship devices like iPads, GalaxyTabs, Kindle, and HDTV resolutions). If you scale up, but want the classic sprite-style look, you can apply the family of Scale2X algorithms to avoid the blurriness associated with up-scaling graphics using things like box-filters.

In a tile-based game, I like to think of dimensions in two fundamental units, tile-size and screen-size. The screen-size is defined in terms of how many tiles high and wide I want it to be, which gives me the tile-size. Then, going the other direction, I think about how large I want my map to be in terms of how many screens tall and wide it is. Its the basis for other relationships too -- I tend to think of how fast I want my characters to move in terms of how quickly I want them to be able to traverse a screen.

I'll give you an example from my most-recent project, which is a retro-styled, sci-fi action RPG -- think Legend of Zelda in Space.

Starting with target resolution, I want to treat HDTV resolutions as the primary target -- this is a console-style game, and consoles mean televisions. So we have 1280x720 and 1920x1080 accounting for 99% of modern televisions, plus the most popular PC monitor sizes (1080p is popular on desktops and laptops, 2560x1440 (2x 720p) is popular, 1366x768 (nearly 720p) is popular, 4K (3840x2160, 2x 1080p) is going to be popular). I decided that I wasn't going to care about different aspect rations, and that I'll just letterbox if I have to. In fact, I decided to keep a retro 3:4 aspect ratio for the playable area, and use the extra space for decoration and UI.

Since I want that retro, chunky-pixel look I had to select a resolution that's a good common denominator between 1080p and 720p. It turns out that the greatest common denominator of the two is 640x360 -- multiplying by two is 720p, multiplying by 3 is 1080p. It also means I can give users a choice between square pixels, or using scale2x and scale3x if they prefer. Because I want the 4:3 aspect for the playable area, this means its 480x360, with 160x360 left over for UI.

Next, I need to determine tile size -- usually you want a power of two, so 16x16 or 32x32 would be a go-to size, but I didn't like the scale they gave me -- ~20 tiles high would make things things feel smaller than I wanted, and ~10 tiles high was too constricting for the level design. I looked at the old consoles, and using 16x16 pixels, they all had around 15 tiles high to work with -- translating to 480x360, that gives tile dimensions of 24x24. Not a power-of-two in size, but a nice number of pixels to work with, and the technical reasons for power-of-two's benefits aren't really much of a thing these days.

So there I had it, I settled on a resolution of 640x360 (16:9 aspect), with a 480x360 playable area (4:3), with each playable screen consisting of a retro-inspired 20x15 tiles, giving a retro-appropriate tilesize of 24x24 pixels. It scales directly to the most popular screen sizes, and with minimal letter-boxing to others; but the 4:3 aspect ratio of the playable area gives me some wiggle-room to play with too -- for example, there are some tablet devices with 3:2 aspect ratios, which is just a hair wider than 4:3 and doesn't leave enough room for extra area dedicated to UI, so on those devices I can letterbox (or maybe draw ~1 more tile to either side), and lay the UI over the playable area with transparency.

For me, my game, and the devices and experience I'm targetting, I'm super happy with how this all works out. If I were to do an iPad version (given its market penetration, I'd tweak the rendering to draw an extra half-tile around the parimiter, and maybe redo the UI at high-resolution (I might even redo the art with 48x48 tiles and possibly even sell it as an add-on). On super-wide devices like an iPhone6, I'd go the other direction -- I'd redo the art at 20x20 pixels, and layout the UI differently, and have the virtual controls in the letterbox area to either side of the screen, such that the player's thumbs don't obscure the playable area.

throw table_exception("(? ???)? ? ???");


Since I want that retro, chunky-pixel look I had to select a resolution that's a good common denominator between 1080p and 720p. It turns out that the greatest common denominator of the two is 640x360 -- multiplying by two is 720p, multiplying by 3 is 1080p. It also means I can give users a choice between square pixels, or using scale2x and scale3x if they prefer. Because I want the 4:3 aspect for the playable area, this means its 480x360, with 160x360 left over for UI.

I get the power of two stuff and why we need it which is why I've been making 16x16 graphics but the rest, especially how it applies to screen size, confuses me. I've always been terrible at maths...

Why multiply it by 2 and then by 3?

What does this mean?

He wasn’t talking about power-of-2.

He was talking about integral scaling values. Scales without fractions. Scaling by 2 is better than scaling by 1.5. Or 3.3333333. The reason should be obvious.

L. Spiro

I restore Nintendo 64 video-game OST’s into HD! https://www.youtube.com/channel/UCCtX_wedtZ5BoyQBXEhnVZw/playlists?view=1&sort=lad&flow=grid

Power of two really isn't needed these days -- I'm using 24x24 right now because it gives me the kind of scale I want, and I can't think of any modern platform that would require or substantially benefit from power-of-two textures.

What I was saying with twos and threes is that the "fake" internal resolution I render my current game in is nice because it has the property that if you scale it up by a factor of 2, then you get exactly 720p, and if you scale it up by a factor of 3 you get exactly 1080p. If you want that crisp, chunky-pixel look, then being able to fill all or most of a screen by scaling up by a whole integer is important.

As Spiro alludes to, lets say I didn't think about it and just chose my virtual resolution to be 800x480 -- now on 720p I have to scale up only 1.5 (not a whole integer), and on 1080p I have to scale up only 2.25. What that means for 720p is that every 2x2 pixels in my virtual resolution will occupy 3x3 pixels on my 720p television -- the middle pixels of the 3x3 block are all shared, so their colors get blended, and all the sudden my carefully draw sprites start looking really muddy -- Instead of having nice retro-looking art, instead my game just looks like its got bad 2D art instead.

For retro-style art its very important to scale up by whole integer values, or you lose the whole look.

Now, if you were doing a 2D game with large, smooth 2D sprites (e.g. a fighting game like Guilty Gear), then you can just create art that's extra large to begin with and just scale it down as needed and it'll look pretty good at any size, but it'll never be pixel-perfect.

throw table_exception("(? ???)? ? ???");

He wasn’t talking about power-of-2.

He was talking about even scaling values. Scales without fractions. Scaling by 2 is better than scaling by 1.5. Or 3.3333333. The reason should be obvious.

L. Spiro

Well it was a lot to take in and I'm new at this.

Power of two really isn't needed these days -- I'm using 24x24 right now because it gives me the kind of scale I want, and I can't think of any modern platform that would require or substantially benefit from power-of-two textures.

What I was saying with twos and threes is that the "fake" internal resolution I render my current game in is nice because it has the property that if you scale it up by a factor of 2, then you get exactly 720p, and if you scale it up by a factor of 3 you get exactly 1080p. If you want that crisp, chunky-pixel look, then being able to fill all or most of a screen by scaling up by a whole integer is important.

As Spiro alludes to, lets say I didn't think about it and just chose my virtual resolution to be 800x480 -- now on 720p I have to scale up only 1.5 (not a whole integer), and on 1080p I have to scale up only 2.25. What that means for 720p is that every 2x2 pixels in my virtual resolution will occupy 3x3 pixels on my 720p television -- the middle pixels of the 3x3 block are all shared, so their colors get blended, and all the sudden my carefully draw sprites start looking really muddy -- Instead of having nice retro-looking art, instead my game just looks like its got bad 2D art instead.

For retro-style art its very important to scale up by whole integer values, or you lose the whole look.

Now, if you were doing a 2D game with large, smooth 2D sprites (e.g. a fighting game like Guilty Gear), then you can just create art that's extra large to begin with and just scale it down as needed and it'll look pretty good at any size, but it'll never be pixel-perfect.

Thanks for clearing that up. I have been thinking about how pixel art is displayed on the screen compared to the more modern character designs... but that helps.

This topic is closed to new replies.

Advertisement