UI: Coordinate Systems
Download the completed project.
In this tutorial we're going to look at how to build simple user interfaces that display consistently across multiple devices.
We'll cover coordinate systems and how we can use the
relativeTo property of a node to align it to the edges of a device's screen.
You can see in this completed project, a simple UI that works across a number of different devices, regardless of the size or aspect ratio of their screens.
2. 3D View Settings
We'll begin in a project with a few UI elements already positioned within our 3D view. These are simply images styled to look like buttons that we've dragged from our Media Library into the Hierarchy.
Before we venture any further, there are a number of setting along the top toolbar that will help us build our experience.
The magnifying glass icon lets you zoom out the 3D view. This gives you a greater field of view - allowing you to see and place objects outside of the defined visible area.
It's useful for placing UI objects that start off screen before transitioning into view. For now we'll set this at 75%.
The phone icon lets you set the aspect ratio of the 3D view to that of a number of popular devices, allowing you to see what your UI will look like at different sizes and aspect ratios from within ZapWorks Studio. Let's keep this at default for the time being.
3. The Problem with Different Devices
Let's get back to our UI. While the elements may look right in the default 3D view of the Studio, if we preview our project on a number of different devices we will see varying results depending on the size and aspect ratio of the device's screen.
To solve this problem, we will first need to understand more about the coordinate systems within ZapWorks Studio. The coordinate systems define where objects are placed in 3D space.
4. Screen Space
In ZapWorks Studio there are two main coordinate systems, but we'll be focusing on screen space - an orthographic coordinate system that's great for 2D UI elements. We will be placing our UI elements within screen space.
With the device in landscape the screen coordinate system is defined like this:
- A center point of 0,0 in the middle of the screen,
- the X coordinate positive to the right,
- the Y coordinate positive towards the top of the screen,
- and finally the Z coordinate positive out of the screen towards the user.
Screen space is scaled such that a Y value of +1 is always at the top of the screen and a Y value of -1 is at the bottom of the screen.
You can see the values for the
position of an object in the Properties panel on the left. If we move the object up to the top of the screen the second entry - the Y coordinate - has a value around 1.
5. screenLeft and screenRight
ZapWorks Studio provides two additional spaces,
screenRight, which have the x coordinate centered on the left and right sides of the screen respectively.
Both of these help define the edges of any screen regardless of the size and aspect ratio. We'll use them to build a UI that works across multiple devices.
To do so we set the
relativeTo property of our UI elements to
Z.screenRight. This will ensure their positions stay the same distance away from the right hand side of the screen.
6. Using screenRight
As we have a number of objects we want to make relativeTo
Z.screenRight; we can save time by creating a new group within the Hierarchy, setting the
relativeTo property of the group to
Z.screenRight and then dragging our UI nodes into it.
This will cause the UI elements to appear relative to the parent group node, which in turn is relative to
You'll notice that when we do this, our objects seem to disappear from the 3D view. This is because their starting x position combined with their new
relativeTo property has moved them further to the right, outside of the visible area. We can see this by clicking on the zoom icon and setting our zoom amount to a lower value.
We can fix this by setting their individual x positions to 0, centering them on the right hand edge of the visible area, and then alter the position of our group until we find a look we're happy with.
7. Using screenLeft
If we wanted our UI on the left hand side of the screen in landscape orientation then we would simply set our parent group relative to
Z.screenLeft in the properties panel, then reposition it.
We don't have to worry about the Y position of our nodes because screen space guarantees that the top and bottom of the screen will always be at one and minus one respectively - regardless of the device.
8. Camera Space
The other coordinate system, camera space, has perspective - where objects further from the camera in Z are smaller than those closer. As camera space is mainly used for 3D objects in order to render them correctly with perspective we will not discuss it here.
If we preview our project now on the same devices from earlier, we can see that the UI elements are uniformly positioned from the right hand edge of the screen.
10. Next Steps
Download the completed project.
That completes our video tutorial on building a simple UI that displays consistently across multiple devices.
If you have any issues feel free to get in touch, we're email@example.com.