Skip to content

Guide: Aspect Ratios of Background Images

Jump to bottom
Shades edited this page Oct 14, 2018 · 8 revisions

Terminology

AR ... Aspect Ratio

AR0.75      AR = 0.75   = 3/4      like with a resolution of 1024 x  768
AR0.5625    AR = 0.5625 = 9/16     like with a resolution of 1920 x 1080

Facts

According to http://gs.statcounter.com/screen-resolution-stats/desktop/worldwide AR0.5625 is the prevalent AR as of 2018-10.

Criteria for good background images

  • To be displayed undistorted, background images must be of AR0.75 .
  • To make an image look good on an AR < AR0.75 , use one which does not lose it's main content when cut to an AR < AR0.75 . Either by selecting an image that satisfies this naturally, or by adding black fillers at the top and bottom.

How the game engine handles background images

  • The game engine expects all images to have AR0.75 , nonregarding the actual AR of the game window.
  • Images with a different AR than 0.75 can be used though.
  • The engine always stretches/crunches the image width to fit the width of the game window.
  • Images with AR < AR0.75 are vertically stretched to make them AR0.75 .
  • If the game window is of AR < AR0.75, the image is cut at the top and bottom equally.

Example 1 of a bad background image

An image of AR0.75 is used for the loading screen. The important content fills the image from top to bottom.

If the game window is of AR0.75, the image is fully displayed.

If the game window is of AR < AR0.75, the image is cut at the top and the bottom.

Example 2 of a bad background image

An image of AR0.5625 is used for the loading screen. The important content fills the image from top to bottom.

If the game window is of AR0.75, the image is vertically stretched to AR0.75 and thus displayed vertically distorted.

If the game window is of AR < AR0.75, the image is vertically stretched to AR0.75 and then cut at the top and the bottom, thus displayed vertically distorted and cut.

Clone this wiki locally