Forums » Help » Maintaining aspect ratio across multiple devices

Need some advice here. I'm trying to work on my next game. But I've no idea how to actually implement the code to maintain aspect ratio across multiple devices.

If I were to work on an aspect ratio of 3:2 (example IPhone 4 resolution). Then of course it won't fit full screen on other resolutions like Samsung's devices.

At the same time, I'll need to scale up the canvas as well. How much to scale? Even if I scale it up, there will be gaps at the edges of the screen.

Or since there will be gaps, should I keep it that way as there is no other way?

The game needs to maintain it's aspect ratio due to game balancing purpose.

I did search around the forum here and google around. But don't seem to provide a more definitive answer.

Any kind souls here could advise how I should go about it?

You have two choices:
A) Render one aspect ratio and then stretch it to fit non-same devices.
B) Adjust aspect ratio per device, and deal with the various dimensions.

If you need to do A to keep the game fair, then instead of stretching, you could always introduce black "letterbox" bars. They don't look too terrible. Might be good to go with standard 16:9 or something...

Thanks joncom for your replies as always. Just another question. Do you know about this plugin provided by chmood where to scales the graphics up to 4x?
https://github.com/Chmood/ImpactJS-HQX-plugin

Do you know if this plugin is already implemented inside impactjs or is it just a plugin that needs to be "required"?

Hey guys,

is there a source with all mobile resolutions which we must have in our app to display it right on all devices (mobile and tablet) ?

Thanks
EK