ZapWorks Studio contains two example projects that accompany this article. You can also check out our in-depth video tutorial on UI: Orientation.
ZapWorks Studio provides a number of tools for reacting to changes in the orientation of the device.
Zappar's native coordinate systems are arranged in landscape. For devices that have a dominant portrait orientation (such as the iPhone) landscape is defined such that the bottom of the device is on the right hand side.
Orientation is reported through Accelerometer nodes. The default templates for new projects and screen symbols contain an Accelerometer node in the hierarchy but one can be easily added, if necessary, from the "New" right-click menu.
Accelerometer nodes activate states whenever the orientation of the device changes:
landscape- the default orientations, as defined above
portrait- rotated 90 degrees clockwise from
landscapeinverted- rotated 180 degrees from
portraitinverted- rotated 180 degrees from
The properties panel can be used to associate the states in a project with an Accelerometer node.
Responding to Changes in Orientation
The Zappar platform does not automatically modify the coordinate systems or display of a zap as a result of changes in orientation. Thus it is necessary to use Accelerometer states to modify a zap's user interface to better suit the device's current orientation when it changes.
It's common practice for a project to contain an 'orientation' controller with states that modify the user interface to this end. Timelines can be created between the states to customize the animation that occurs when as the user rotates the device between orientations.
It's important to consider device orientation at the outset of a given project and plan the user interface accordingly. Many devices don't have a dominant orientation (such as the iPad) and the user may be most comfortable in an orientation that hasn't been anticipated. That said certain game mechanics may call for a fixed orientation and use of the Accelerometer node may not be necessary in such cases.
In addition to activating states, Accelerometer nodes can trigger events when the device orientation changes. These can be added beneath an Accelerometer node by right-clicking on it in the Hierarchy and selecting New > Script and selecting an event.
Accelerometer nodes with event handlers will still activate any states set in the node's properties.
The next article introduces Actions - the easiest way of incorporating simple interaction into experiences.