How can I position a sprite in the same spot across different screen sizes?

| | August 4, 2015

Taking into account the multitude of screen sizes and resolutions, is there a way I can position a sprite so it’s at roughly the same spot on every iOS device?

Doesn’t matter if you are using SpriteKit or Cocos2D or just using UIKit. The principle for positioning a sprite is roughly the same.

One Response to “How can I position a sprite in the same spot across different screen sizes?”

  1. You have only two main options, both of which have serious pros and cons:

    • Use normalized positioning, so that the X and Y coordinates are expressed effectively as a percentage of the available width and height.

    • Use absolute positioning, so the X and Y coordinates are exactly the pixel or point coordinates of the sprite on the screen.

    Relative positioning will make sprites appear more-or-less in the same place, as you are asking for, so it’s probably what you want to use for the sprites in question.

    However, it will not preserve distances between sprites. Two objects at 10% and 90% of the screen width will be further apart on a wider screen. This may be detrimental for gameplay.

    You can scale the sprites up accordingly, which can make the distances the same, but that introduces either visual artifacts due to scaling or the requirement for multiple resolutions of sprite assets. A potential happy medium is to author the sprites at the highest resolution, as you can downscale cheaply with fewer artifacts than you can upscale cheaply. Although you could also employ a cleanup algorithm after upscaling if you have the computational bandwidth.

    Absolute positioning avoids the distance issues as well, but also means you don’t utilize the extra screen real estate. It’s left blank (or filled in with ‘letterbox’ UI chrome), or it allows a player to see more of the gameplay, possibly imparting undesirable gameplay advantage to those with larger screens. Or it implies you need to author layouts for every possible screen resolution, which is tedious.

    Using one method or the other universally is probably not a good idea. Instead, mix and match them according to the particular requirements of whatever visual component of your game you’re currently working on.

    For example, you might position all the game world objects with an absolute model, but use relative metrics for positioning UI elements on the screen.

    You can also hybridize the methods, which works particularly well for UI, where you specify absolute distances relative to other objects in the scene, usually expressed with min/max constraints, and re-flow the layout of the objects at runtime in a way that satisfies those constraints.

Leave a Reply