2
\$\begingroup\$

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.

enter image description here

\$\endgroup\$
2
  • \$\begingroup\$ It sounds like you already know most of the usual techniques and are looking for anything to sway you towards one; why not try them all and decide? \$\endgroup\$ Jul 12, 2013 at 5:58
  • \$\begingroup\$ Well, I wasn't really sure if they were the 'usual techniques' as you say. They were only what I could come up with but yep, I will give them a go! Cheers @congusbongus :-) \$\endgroup\$ Jul 12, 2013 at 17:16

1 Answer 1

4
\$\begingroup\$

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.
\$\endgroup\$
2
  • \$\begingroup\$ How's about a stretched background then "letterbox" the gameplay on top of it? \$\endgroup\$
    – oodavid
    Nov 14, 2013 at 12:48
  • \$\begingroup\$ @oodavid - From the design tests we done we came with that the best looking solution is to wrap everything with extra size panel - on left, right and bottom side - and then just crop the panel size in code to the size of given screen. -- 'letterboxing' - if you mean adding same space on top and bottom - never look good. -- It all can be easily tested though for specific project. Usually Artists do some mockups and then you just see. \$\endgroup\$
    – Riva
    Nov 14, 2013 at 19:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .