4 – Aspect Ratios and You

Creator includes a feature to help developers accommodate the large number of target devices currently on the market – Aspect Ratio Adjustment.

Aspect ratio adjustment determines how your game will look when played on a device that has a different aspect ratio than the game. You have three options which can be selected during the publishing process: overscan, letterbox, and stretch.

 

  • Overscan – This option will crop the scene in order to retain a full-screen game on various device aspect ratios. This method will prevent Android rejections due to “black bars” on screen.

  • Letterbox – This option will maintain the original aspect ratio of the app, but will fill any unused space with the scene’s background color.
    Note: The default color is black, but in this example blue was used to emphasize the results.

  • Stretch – As the name implies, takes your existing scene and “stretches” it to fill the complete screen of the device. While this method can be quite effective when the difference is very small (like from 16:9 to 16:10, it can result in image distortion in more drastic cases (like from 3:2 to 16:9).

To fully understand how these methods work we must look at 3 very important, yet very different aspects of a published project.

  1. Screen size – The size of the screen of the device your project will be on.
  2. Display size – This is the resolution of the platform chosen from the drop down in Creator’s home menu. The Display size is unable to be edited. To change the Display size, you would need to select a different platform from the drop down menu.
  3. Camera size – This is what you would like people to see on their device when playing your game.
Screen size and Display size are what affect how these work. Essentially, if the Display size you selected in Creator is a different aspect ratio than the Screen size of the device running the app, the app will be modified, per your choice. If the aspect ratio of both the Screen size and Display size are the same, there will be no changes made. This is why its best to design a game with a similar aspect ratio to many other platforms to avoid drastic modification. Doing so will allow you to submit to many app stores without necessarily needing to make a new project for each platform.
Below you will see a table that shows you the aspect ratios of the platforms in Creator.

You see that developing a game for the Nook will result in very little cropping when placed on a Kindle or iPhone 5. However, on iPad, your project would have heavy cropping and may require additional logic and design considerations to compensate.Now lets talk about the Camera!The Camera reflects the part of the scene you would like see on the device. The Display size determines how the contents of the Camera will look when on device. For example, if the Camera is larger than the Display size, the contents of the Camera will be squished into the Display size. If the Camera is smaller than the Display size, the contents of the Camera will be zoomed in or stretched onto the Display size. The Camera works in conjunction with the Display size – the Camera does not know what device the game is running on or the aspect ratio. The Camera only knows what part of the scene you would like displayed on the device and to stay confined within the Display size. For this reason, Camera adjustment is typically done by more advanced users and can lead to problems if not used correctly.

Here is a link to some example templates that demonstrate this new feature – Overscan example template