# Scaling a game view with letterboxes?

I'm creating an Android game and I want everyone who plays it -- no matter the size or shape of their screen -- to see the same 480x800 playfield but, depending on the actual resolution of their screen, scaled to fit their screen while maintaining the correct aspect ratio using letterboxing or black bars on the edges of the screen to fill in the gaps on the sides/top/bottom.

I'm using Canvas to develop my game but I don't know where to start, or have any idea of best practices for accomplishing this. Could someone enlighten me?

UPDATE: What I had in mind was using different image resources from hdpi/ldpi/mdpi resource folders and drawing them so bigger screens are restricted to the aspect ratio still but will be higher resolution. So drawing to a 480x800 bitmap won't work in my situation.

-

## 1 Answer

Math

First calculate your ideal screen ratio: 480 / 800 = 0.6

Then calculate the ratio of your users screen.

If the ratio is larger than 0.6 you know your game will have space to the left and right side of the game area. You would scale the game area by the users screen height/800. To calculate the horizontal position of the game area you'd do: (screen width/2) - (game area width/2)

If the ratio is less than 0.6 the game will have space at the top and bottom of the game area. You would scale the game area by the users screen width/480. To calculate the vertical position of the game area you'd do: (screen height/2) - (game area height/2)

Practical Example

The Users screen resolution is 3000X1600. This gives a ratio of 1.875, which is greater than 0.6 so space will be to the left and right of the game area. The scaling factor will be 1600 / 800 = 2. The horizontal position of the game area will be: (3000/2) - (960 /2) = 1020

Android Specifics

To position and scale the game area, you can apply a matrix to offset your drawing operations (Canvas.setMatrix). Another approach would be to draw your game screen into a 480x800 bitmap and then scale it afterwards, using Bitmap.createScaledBitmap or Canvas.drawBitmap.

-
I'm not familiar with Android development. Why can't he just draw the game to a rendertarget, and then draw that rendertarget to the screen, using the screen's resolution? Bars on the left/right of the screen should happen automatically as a result of choosing scaling/offset - there is no special case to deal with. – Olhovsky Jul 7 '11 at 21:12
His question, as I understood it was about how much to scale the screen, and where to position it. There's nothing that would do this automatically as far as I'm aware. – CiscoIPPhone Jul 7 '11 at 21:57
I'm interested in what Olhovsky was talking about, is this possible on Android? – Kyle V. Jul 19 '11 at 1:08