So I've never made a game before besides a basic 4:3 aspect ratio flapper, so bare with me. Recently I had this wild idea that I wanted to make this complected (for a 2d) game in cca. Unfortunately I'm stumped. At first I decided it's smart to program my game in a 16:9 aspect ratio, but then I thought about it... The iPad and Nexus 9 work in a 4:3 aspect ratio. How would one make a game (like a flapper) scale to both aspect ratios?

Edit: If it helps at all, I will be using JS... Primarily the Pixi.js library.


In the case of flapper, if centered, the 16:9 aspect ratio would give a 16.666% bonus vision ahead.

If this isn't an issue just crop it down for 4:3, penalizing those players a tiny bit.

You can also scale the obstacle sizes & movement speed to match the aspect ratios while keeping pixels square (complicated).

Otherwise "borders" for 4:3 are an option and they don't need to be black. They could be aesthetically pleasing game background. Just limit the bird range to 16:9 ratio. Put clouds that block you on top and the ground at the bottom a little higher.

| improve this answer | |
  • \$\begingroup\$ The complected answer is the solution i'm looking for, unfortunately. The other issue is that most android phones have a part of the screen cut off for the back/home/tabs button. This can mess with the aspect ratio. \$\endgroup\$ – Cygnini - ShadowRi5ing Dec 18 '14 at 4:41
  • \$\begingroup\$ There is not 1 single good answer to this question, this is trying to fit a rectangle peg in a square hole, quite literally. You stretch, you crop, and/or you border your game. \$\endgroup\$ – Stephane Hockenhull Dec 19 '14 at 22:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.