Join Paul Trani for an in-depth discussion in this video Detecting movement with the Accelerometer, part of Flash Professional CS5: Creating a Simple Game for Android Devices.
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.
- 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