Screen Space Screen Space


The Delta Engine always uses Quadratic Space, you can convert from Pixel Space (whatever pixel space is native) or use Screen Space (going from 0-1, but not being quadratic, so sizes look strange and distorted). Quadratic Space is most useful if you do not put stuff at the borders and center things in the 0.2-0.8 area. It is incredibly easy to use and understand after working with it for a few minutes. Screen Space is sometimes useful to align stuff at the borders of the screen (e.g. an exit button in the lower right). Pixel space is never useful because you do not know much about the pixel size and all methods accept Quadratic Space input. It is only needed when pixel exact locations need to be calculated (e.g. for positioning fonts, there is no other use case right now).

Usually you don't have to think about it much, just design your game and do not care about the resolution until you find a problem when testing, then rethink your solution. For example if you only want to do a Mobile Phone game, just design it in the Mobile Phone mode in the Scene Editor (e.g. by using 800x480) and test it on the different devices (iPhone, Android, WP7). Only if you want both a Mobile Phone game, a Tablet game and maybe even a PC or Console game, you might have to rethink your design. Sometimes it makes no sense to have 10 buttons in a row on a small screen (e.g. an iPhone) because it is just too small to click. The other way around it makes no sense to only have 3 huge buttons on Tablet or PCs just because it made sense on a Mobile Phone. In this cases just design differently for Mobile Phone and Tablet and PC devices in the SceneEditor. Please also see below for a detailed discussion about different Physical Screen Sizes and how to deal with it and different devices.

Quadratic Screen Space (Red in the following image): This space is always quadratic, meaning it has an aspect ratio of 1:1. It's almost always bigger than the actual visible screen, unless you have a quadratic pixel size (e.g. 1280 x 720 pixels, default resolution from the Editor).

Pixel Space (Blue in the following image) Pixel space depends entirely on the selected resolution (e.g. 1280x720).

The following image gives a brief impression of how these three spaces interact. It assumes a game resolution of 1280x720 pixels, but any other resolution would work as well (somewhere in between -0.5,-0.5 and 0.5,0.5, use docking to put elements at the border of the screen, no matter what resolution is used).



Nested entities work in exactly the same way, their position is 0,0 initially and centered to their parent (or screen if there is no parent, 0,0 is the center).


All UI graphics should be created for HD (1280x720). If a graphic is created for Full HD (1920x1080) or 1024x600 the editor should be used to fit the image size in relation to HD (then scaled down or up by the engine). Once an image is imported it stays in ScreenSpace size.

For background images always try to use a quadratic one (if portrait and landscape mode both needs to be supported) or at least 5:4 (if you support that resolution), or 4:3 if you don't care about 5:4 (because 4:3 fits all other resolutions as well).

Below is the picture for the resolutions and how they compare.


Screen Resolutions


If you design for a Portrait mode game that can also be played in Landscape mode it makes sense to create quadratic background images that will be cut off (sides top/bottom or right/left depending on the rotation mode). A good example for this is the Blocks sample game, which works fine in Portrait mode on mobile devices, but can also be played in Landscape mode on a Tablet, PC or TV screen.

Jewel Blocks Background


List of common resolutions  - Wikipedia Article
Display Resolution Wikipedia Article  - Wikipedia Article
Screensiz.es - List of screen specifications of the most popular devices and monitors on the market.
www.iosres.com - iOS Resolution Quick Reference
Safe Area - Wikipedia Article
Supporting Mobile Screens - Android