Fitting tilemap to any screen resolution

Question

My game is a 2D Single-Screen (i.e. non-scrolling) platformer for Android, but the question here doesn't require a code-specific answer.

Basically it's easier for me to show the problem using a graphic, which I've attached below.

My game screen consists of a grid of 25 x 12 tiles. I am already scaling my viewport so that my ratio stays consistent (by introducing letterboxing / pillarboxing when required) - this works correctly. I am also scaling my tile sizes by the current viewport dimensions so they appear the same size relative to the current display.

However, clearly, dividing my screen width by 25 to get the tile size will produce a slightly different gap at the right hand side. (if the starting position is 0 (left edge)).

I get this problem also vertically but this isn't so much of an issue as I can just keep the gap - see the first 2 graphics below.

So, horizontally, what would be the best method to 'cover' this gap up.

I know I can make it more 'symmetrical' by moving all the tiles to the right by 1/2 of the gap width. But then I would just have smaller gaps on both sides.

Another solution would be to simply draw an extra tile to the right (make my grid 26x12) but this would mean that I would be drawing extra tiles that weren't needed on some screen resolutions (where screen width divided by 25 didn't produce a noticeable remainder / gap). So I'm all out of ideas and really have no clue how to proceed. How are these issues dealt with?

I know questions regarding the scaling of graphics are in abundance here on GDS but they do not answer this question. This question is specific to fitting a tile-grid onto multiple screens in an aesthetically pleasing way.

Help would be appreciated.

Answer 1

As congusbongus wrote, you have listed most of the options.

The usual solutions we use in games (sorry I'll be repeating you a lot):

• You can keep the gap. If you'll do that, you definitely should center the play area so the gap is the same on all sides. Otherwise it looks strange visually. Then you can..
  
  • Fill the gap with some solid tiles, or even some special tiles (visually). To indicate to player thats where they level area ends.
  • Put some nice 'panel' (decoration) there to fill the space visually.
• We usually use solution from your second figure from top. Making a bigger panel, that can be cropped (nothing player needs to see on the crop-able part), or displayed whole, filling the gap space.
• Most game devs just stretch the content (event non-proportionally) to fill whole screen on any device without much headache. I guess the tiles will already be stretched from its original resolution, so this shouldn't do much damage.