UI: Coordinate Systems

Studio

UI: Coordinate Systems

1. Introduction

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, screenLeft and 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 Z.screenRight.

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.

9. Preview

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.

We hope this tutorial was helpful and urge you to take a look at our documentation for further articles regarding Coordinate Systems, as well as our reference materials.

If you have any issues feel free to get in touch, we're support@zappar.com.

Open in new window