Home Tutorials Download Beta Store Forum Documentation KnowledgeBase Wiki Blog

Rotate the viewport
16th March, 2011

Rotate the viewport

Scripting, System

1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 5.00 out of 5)
Loading ... Loading ...

Learn how to rotate the viewport according to the device rotation using the accelerometer


An accelerometer track the forces applied on the device. When the device don’t move, the only force recorded is the gravity.

You have to consider that your device defines the center of a (x,y) space.
When the viewport is set to 0, the basis is in this orientation:

If you rotate the device, the basis rotates too, in the same direction.

In fact, the basis follow the iPhone rotation. When you will change the viewport rotation, the basis orientation will get an additional rotation (here +90°):


Create a new AIModel named ViewportRotation, and create a variable named nOptionValue, type number. This variable will be used to store the current viewport rotation value. Add a onInit handler in which your set this variable to 0 and the viewport rotation to the same value:

Create now a onJoypadMove handler. The parameters we will use are nAxisX and nAxisY, corresponding to the position of the accelerometer on the x, y axis of the basis (don’t forget the accelerometer follow the gravity).

You can consider the device is enough rotated and the viewport has to changewhen the value of an axis is greater than 1.5 or lesser than -1.5,. In all the cases, you will add a value to the current rotation, and in all the cases, you have to modulate the result by 4, because the viewport rotation value is 0, 1, 2 or 3 (corresponding to the default rotation (0°) plus 1*90°, 2*90° or 3*90°).

When the device is the default position, the gravity force is on the Y axis only, in the negative side, but in this case, no need to change the viewport rotation because it is already the current one.

Starting with the ShiVa Authoring Tool 1.4, you have to call input.enableJoypadMotionSensors to enable accelerometer support. It is no longer activated by default.

Rotation 180

When you rotate the device backward, the gravity is on the Y axis, in the positive side. At this moment, the needed viewport rotation is the opposite of the current one. To know the new viewport rotation, you have add 2 rotations of 90° (+2) on the current value (modulus 4).

Rotation 90

When you rotate the device on the right, the value of the gravity on the X axis become greater. When it is greater than 1.5, the viewport rotation has to be changed by the current value plus 1 rotation of 90° (+1) (modulus 4).

Rotation 270

When you rotate the device on the left, the viewport has to be rotated 3 times: the new value is the current value plus 3 rotation of 90° (+3) (modulus 4).

Of course, don’t forget execute the modulus and to apply the new viewport rotation at the end of the script.

You can see the full code here:

Leave a Reply

You must be logged in to post a comment.