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.


1 Answer 1


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.

  • \$\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\$ Commented Dec 18, 2014 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\$ Commented Dec 19, 2014 at 22:35

You must log in to answer this question.

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