Detecting movement with the Accelerometer
Video: Detecting movement with the AccelerometerCurrently this game works great as a desktop game or any browser because all of the interaction just moves based on the mouse position. So it will work fine on a mobile device, but what I want to do is I want to tap into mobile-specific technology, such as the accelerometer. So what that means is I want my spaceship player to move. As I tilt the device to the left, I want that player to slide to the left; as I tilt it to the right, he is going to slide to the right.
- Next steps
Viewers: in countries Watching now:
In Flash Professional CS5: Creating a Simple Game for Android Devices, author Paul Trani shows how to translate existing Flash skills from the web to mobile devices while designing a game in Flash and publishing it as an AIR for Android app. The finished application includes collision detection, random enemy creation and movement, shooting capabilities, multiple levels, and even a high score screen. This course also goes beyond game functionality and shows how to use mobile capabilities such as the accelerometer and gestures to control graphics, use the hardware keys to activate menus, and also how to optimize content so it plays well on mobile devices. Also included are instructions for distributing an app through the Android Market. Exercise files are included with the course.
- Designing for mobile platforms
- Creating and optimizing game graphics
- Adding random movement and interactivity
- Moving players based on the accelerometer
- Using gestures
- Detecting collisions
- Implementing audio
- Adding scoring and levels
- Implementing a high score screen
- Publishing an app on both Mac and Windows
- Uploading to the Android Market
Detecting movement with the Accelerometer
Currently this game works great as a desktop game or any browser because all of the interaction just moves based on the mouse position. So it will work fine on a mobile device, but what I want to do is I want to tap into mobile-specific technology, such as the accelerometer. So what that means is I want my spaceship player to move. As I tilt the device to the left, I want that player to slide to the left; as I tilt it to the right, he is going to slide to the right.
So that's the interactivity that I want to introduce for this game, and I am going to do that by using the Code Snippets panel. So in the Code Snippets panel, there is this Mobile Game folder, and just refer to the Code Snippets movie if you don't have this. Right down at the bottom is this Move with Accelerometer code snippet. So I am just going to go ahead and double-click on that to add that code. All right, here is the code. I'd say that looks pretty good. It seems like a lots going on, but I am just going to break this down for you, because it is this pretty straightforward.
So just like anything else that needs to be added, there is, first off, a variable that's created var accel. So I am just going to go ahead and take this, and I am going to cut it and I am going to move it up into position, up near the top, right in here. And I am basically telling Flash that accel is from the accelerometer class, so treat it as an accelerometer. Right here, this is where a new accelerometer is created. It's called accel. And next up right here, if the phone has accelerometer support, then do what you need to.
In this case, there is an event listener. Basically, as the user tilts their device, it's going to fire off this function called accelMove. If the user does not have accelerometer support, we need to provide something else, or some other way for the user to interact with that content, and then right down here, here's the accelMove function right here. So let's move some of this into place. In fact, let's go ahead and take this code and I am going to cut it--the accelerometer, the if and the else statement-- I am going to cut it and I am going to move it up into position, right up here, right in here for START_PLAYER.
Notice here is my START_PLAYER function, and right in here this is what makes the player move. There is this Enter frame event that fires off this movePlayer function. So that's sort of the typical functionality that we've been dealing with. But what I want to do is I want to go ahead and right in here I just want to paste in that code, just about that event listener. I am going to go ahead and hit this Auto Format button, so that the code formats appropriately. All right, a new accelerometer is made. It checks for support, and if there is support, then it's going to fire off that accel move.
Otherwise, if it does not have accelerometer support, well, I want to include this event listener. So I am going to cut this and paste it right in here. So it will work just as usual if they don't have accelerometer support; otherwise, if they do, just go ahead and call this Excel move function. I am going to move that function up as well, so I am going to take this, I am going to cut it, and I am going to move it up near the top right in here. Here we are, just beneath that START_ PLAYER function but before that move player function, I'm pasting in the accelMove.
Okay, all of this red I need to replace, and what I am going to reference is the player, so I am going to type in player. So for the player, move its x position, move it to the left and right, take its x position -= so it's going to move in that direction based on the accelerationX. So right in here this is going to basically say that the accelerationX is a property of the accelerometer. So that's moving it to the left and right. This actually returns a number between 0 and 1.
So it's not a very big number, and that's why we multiply it. Okay. The higher number, the faster it will move as you tilt the device. But there are other properties as well. There are properties such as a Y position and even the Z position as well. So you can really have a player move around in many different directions, but for our needs, we are just going to go ahead and use accelerationX. So this does all the work. It moves the character. If the player is off to the left, then make sure you stop the player. There we are, and I will just copy this name; otherwise if it's off to the right, so the stage width minus the width of the player, then move that player back into position.
So that's what's going on here. It's pretty much the same thing that's going on down here with the move player. So they both move the player. And I would say this is pretty much good to go. So I can go ahead and run this, but I can't run this in Flash and expect to be able to test out the accelerometer. What I need to do is I need go ahead and test this in Device Central. So I am going to go ahead and select Device Central. It will launch Device Central. If you don't have it selected, just go ahead and select Motorola Droid 2, which was added earlier when I was browsing devices.
But here it is. And what I want to do is I want to go ahead and open up this Accelerometer panel. So here's a virtual device, and as I tilt it, that's actually going to change the x property as I tilt it to the left and to the right. Okay, so that's what I am going to use to control my player. If I click play, there is my player, and I play it by of course tilting the device and you can see the player move. It's tapping into the accelerometer, and it works quite well.
So I am just going to go ahead and play this for a little bit. There we are. So again, it's tapping into the accelerometer. Device Central does a great job of simulating the accelerometer, and obviously you can see how you can actually control your player using this device-specific technology.
There are currently no FAQs about Flash Professional CS5: Creating a Simple Game for Android Devices.