Device Orientation

• General
• Project Templates
• Projects
• Studio

This project demonstrates the use of states and an accelerometer node to alter the UI when the user rotates the device from landscape to portrait. You can find this example project within the New Project modal in ZapWorks Studio.

Click here learn more about Device and UI orientation.

The UI consists of a button (WebsiteButton) which has its relativeTo property set to three groups. These groups are positioned as follows:

The landscapeGroup is positioned at the bottom of the screen (y position value = -0.8). The portraitGroup is relative to Z.screenRight. The landscapeInvertedGroup is rotated by 180 degrees (y position value = 0.8).

The button's location on screen is determined by the relativeTo property (as set above) and the relativeToProp parameter, which specifies the degree of influence of each group on the final location.

The three states in the orientation controller change the relativeToProp value of the WebsiteButton so that the button becomes the child of the group and takes the orientation and position values.

The accelerometer node is set up to activate the states based on the orientation of the device.

Editing the project

Repurposing this example project requires very few steps and can be achieved with a simple asset swap.

1. Delete the WebsiteButton from the LandscapeGroup in the Hierarchy.
2. Import your content into ZapWorks Studio, this can be an image, text, 3D model or video.
3. Drag the content into the landscapeGroup.
4. Preview and view the content rotate with the device.