Smart phones and tablets contain several kinds of “sensors” to sense information about their environment. For example, an accelerometer provides information about movement of the phone (or tablet) – letting us know the speed and direction of travel in x, y and z coordinates (three dimensions).

The orientation sensor tells us if the phone is tilted to the left or right, or up or down (or flipped over). App Inventor provides a simple to use interface to the orientation sensor. We can use this to control a sprite or ball on the screen – by tilting our phone, we can make graphic items move around on the screen!

Sample source code that you can download is at the bottom of this post!

After going through this tutorial, you now know enough to create your own interactive smart phone game!

Review

Before we get started, please review these earlier tutorials:

• How to Create a Bouncing Ball Animation in App Inventor 2
• Using ImageSprites for Animated App Inventor Graphics
• Controlling the sprite animation with the finger on your screen

What the Sample Program Does

The sample program, in this tutorial, adds the orientation sensor to the earlier sprite-based animation. By tilting the phone, we control the image sprite (or if you prefer, a ball object) on the screen. The sprite moves in the direction of the phone’s tilt angle – the steeper the tilt, the faster the sprite moves in the tilt direction.

Here’s a video clip to illustrate how this works:

This program also adds a button “Orient” and introduces a simple way to see what’s going on inside an app.

When the program starts running, it operates as it did in the earlier tutorial – the sprite just moves around and bounces off the wall. But if we press the “Orient” button, the app switches to using the orientation sensor to control the sprite’s movement.  Press the “Orient” button again, and the orientation mode is switched off.

Tip: Turn off Auto-Rotate on your phone

When rotating your phone around in odd directions, Android may think you are switching from “portrait” viewing mode to “landscape” viewing mode. Which is probably not want you want the phone to do when using this demo program. You can turn off the automatic screen rotation by going to:

Settings | Display | Auto-rotate screen

and remove the check mark next to this item.

Additionally, the “txtCurrentHeading” text box displays the values returned by the orientation sensor so we can see what the program is doing on the “inside”.

Introduction to the Orientation Sensor 

The orientation sensor appears in the “Sensors” section of the Palette – drag the OrientationSensor component to the Viewer and drop on your app.

The sensor is added as a non-visible component, at the bottom:

 

The orientation sensor provides the angle of tilt of the phone in an x and y axis – known as roll and pitch.

Think of an airplane in flight. When the plane turns to the left, the left wing drops down and the right wing raises up – that’s called “roll”.

When the pilot pushes the control wheel (or stick) forward, the nose drops down – that’s “pitch”. When the pilot pulls back on the controls, the nose moves upwards – in fact, we say “the nose pitched up”.

Hold your phone in front of you in “portrait” mode so that the short sides are at top and bottom and the long sides at left and right. Hold the phone so that it’s basically flat (backside down).

(You don’t need to know the next two paragraphs to use this example – but it may be helpful to understand some of the orientation sensor features.)

If you rotate your phone so the right edge goes up at a 45 degree angle, then its “roll” is +45 degrees. If you rotate your phone so the left edge goes up instead, at a 45 degree angle, this “roll” is -45 degrees.

If you tilt the phone so that the top of the phone is pointed down, then the pitch might have a value -45 or even -90 degrees if you point the top all the way down. If you pitch the top up, then the pitch goes in positive degrees between 0 and 90 degrees.

The amount of roll in the x and y axes (roll and pitch) can be used to calculate the angle of trajectory for the the sprite, on the screen, and the speed of movement. That is, the steeper we tilt the phone, the faster the sprite should move on the screen. (Please see “Afterword” at the bottom of this post.)

Using the Orientation Sensor

In the Blocks editor, we can look at the code. When the phone is moved, the orientation sensor throws an event “OrientationChanged“. Our blocks code handles this with a “when OrientationSensor1.OrientationChanged” event handler. In the sample code below, the last two lines are the two lines that change the direction and speed of the sprite based on the phone’s angle – the rest of the blocks code is to display the orientation sensor values in txtCurrentHeading.

The orientation sensor has a property value called “Angle“, which conveniently is the angle determined by the phone’s tilt, and in a form that we can assign to the sprite’s Heading property.

Similarly, the sensor returns a “magnitude” value that we can use to set the sprite’s movement speed. The Magnitude has a value between 0 and 1, while the Speed is set to positive integer values, like 10 or 20 or 30, and so on. To convert the fractional magnitude to a useful speed, we multiply by a constant value – in this example 50. Why 50? I experimented with the program and found that 50 produced a nice speed that felt right – but you can certainly change this value to something else and see what happens!

Important Note – not all Android devices have an orientation sensor built in! You can check the OrientationSensor1 property “Available” – if true, then there is an orientation sensor on board the device. The sample demo code in this tutorial does not check the Available property – its possible that if your device is missing an orientation sensor, then this code will not work for you.

How the Orient Button Works

The orient button acts like a “toggle”. Press it once and the orientation feature is switched to on; press it again, and the orientation feature is switched to off.

There are many ways to implement a “toggle” in software – the method I used relies on a “boolean” variable. A boolean variable may have only one of two values – “true” or “false”. When set to false, the orientation mode of the program is off, but when set to true, the orientation mode of the program is on.

The Orient button’s Click event turns the orientation feature on or off. We could implement this with an if-then-else block (if orientation is off then set orientation on, else set orientation to off). But instead we implement this using a Boolean algebra operator: the “Not” function in Boolean algebra inverts the value of a boolean. If the value is true, then NOT true is actually a value of false and NOT false is actually a value of true.

The following blocks code inverts the current orientation setting from true to false or false to true.

Downloads

• Source code App Inventor “.aia” source file (App Inventor source code files have the filename extension .aia)
• Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select “Import project (.aia) from my computer…”

Afterword

The roll and pitch values can be used to calculate the appropriate angle and speed.The roll and pitch can also be combined using trigonometry to calculate the new Heading for the sprite. And the greater the angles, the greater the resulting speed.  It just takes a little math to convert the angles into a heading and speed.

But some days I can be dense. I actually scribbled out circles and triangles and started down a path of calculating the arc tangent for the heading and the slant distance for the speed. As the code became complex I said to myself, “You know, App Inventor is supposed to be easy – this approach isn’t easy. May be I’d better look at the documentation again!“.

Followed by a whopping big DUH: The Angle and Magnitude properties do all these calculations behind the scenes, making it easy to use the orientation sensor for controlling sprites. I didn’t need to do all those calculations myself!