Android: Angry Birds Scaling

Question

Anyone have any idea how the scaling is accomplished in angry birds? I want to make sure my images/background always scale to match the screensize and this game seems to have a similar effect. I have been playing with the manifest settings lot on setting preferred screen sizes but I have yet to duplicate exactly what I want.

Are there any effective ways to make sure your game will always display X Y space, scaling down as needed depending on the pixel size?

I want to make sure everything is always displayed on the screen for all devices and not cut things off on small devices or add black space on large devices.

I am calculating my drawing space by getting the size of the view and using this as bounds for my sprites but it doesn't seem to be working too well.

Answer 1

To answer the original question, Angry birds uses regular raster graphics (not vectors). Just unpack the .apk (it's a zip file) and have a look at the textures yourself.

Angry Birds only happens to prevent you from setting a zoom factor over 1.x, thus avoiding upscaling(magnification) of the textures. It probably also uses OpenGL mip-mapping to avoid downscaling(minification) artifacts.

Answer 2

1. Use vector graphics. Vectors are not defined by points in space (i.e. individual pixels), they are defined by mathematical relationships, and easily adapt to smaller or larger views.

2. It's impossible to display the exact same image on a 4:3 ratio screen and a 16:9 ratio screen, for example, without compressing or stretching the image. Thus you will have to cut off things on 4:3 devices that would be displayed on widescreen 16:9 devices. This is not a bad thing in a game like Angry Birds where the user can pan to see what's missing.

Answer 3

On Android platform, there are:

• 320 * 240 (1.33)
• 400 * 240 (1.66)
• 480 * 320 (1.5)
• 800 * 480 (1.66)
• 854 * 480 (1.77)
• 1024 * 600 (1.71)

So, when you design your game in 2D, you must think about it. You have two technical solutions:

• choice a ratio (1.66 is the most widespread) and use black bands (like movies)
• Select a bounding box in which you cannot zoom out and another one for the zoom-in.

I use this method for Moblox and paint levels with these boxes. For best rendering on most phones, my bounding boxes have 1.66 ratio. With ratio 1.33 or 1.77 phones, there are background elements not visible but i have designed my Level with centered actions. So players don't care.