How To Make A Multi-Directional Scrolling Shooter – Part 1

A while back in the weekly tutorial vote, you guys said you wanted a tutorial on how to make a multi-directional scrolling shooter. Your wish is my command! :] In this tutorial series, we’ll make a tile-based game where you drive a tank around using the accelerometer. Your goal is to get to the exit, […] By Ray Wenderlich.

Leave a rating/review
Save for later
You are currently viewing page 3 of 3 of this article. Click here to view the first page.

Adding Accelerometer Support

For this game, we don't actually want to move the tank by tapping, because we want to be able to shoot wherever the user taps.

So to move the tank, we'll use the accelerometer for input. Add these new methods to HelloWorldLayer.m:

- (void)onEnterTransitionDidFinish {
    self.isAccelerometerEnabled = YES;

- (void)accelerometer:(UIAccelerometer *)accelerometer 
        didAccelerate:(UIAcceleration *)acceleration {
#define kFilteringFactor 0.75
    static UIAccelerationValue rollingX = 0, rollingY = 0, rollingZ = 0;
    rollingX = (acceleration.x * kFilteringFactor) + 
    (rollingX * (1.0 - kFilteringFactor));    
    rollingY = (acceleration.y * kFilteringFactor) + 
    (rollingY * (1.0 - kFilteringFactor));    
    rollingZ = (acceleration.z * kFilteringFactor) + 
    (rollingZ * (1.0 - kFilteringFactor));
    float accelX = rollingX;
    float accelY = rollingY;
    float accelZ = rollingZ;
    CGPoint moveTo = _tank.position;
    if (accelX > 0.5) {
        moveTo.y -= 300;
    } else if (accelX < 0.4) {
        moveTo.y += 300;
    if (accelY < -0.1) {
        moveTo.x -= 300;
    } else if (accelY > 0.1) {
        moveTo.x += 300;
    _tank.moving = YES;
    [_tank moveToward:moveTo];
    //NSLog(@"accelX: %f, accelY: %f", accelX, accelY);

We set isAccelerometerEnabled in onEnterTransitionDidFinish (I had trouble getting it to work if I put it in init because the scene wasn't "running" at that point).

The first part of this method comes directly from Apple sample code, to filter the accelerometer values so it's not so "jiggly". Don't worry if you don't understand this, all you really need to know is that it makes things more smooth. If you're insatiably curious, this is called a high-pass filter, and you can read about it on Wikipedia's high pass filter entry.

We check the acceleration in the x and y axis, and set the move target for the tank based on that.

That's it - build and run (make sure your home button is to your left), and now you should be able to move your tank around the map with the accelerometer!

Gratuituous Music

I can't leave ya guys hanging without some gratuituous music! :] Just make the following mods to HelloWorldLayer.m:

// Add to top of file
#import "SimpleAudioEngine.h"

// Add to end of init
[[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"bgMusic.caf"];
[[SimpleAudioEngine sharedEngine] preloadEffect:@"explode.wav"];
[[SimpleAudioEngine sharedEngine] preloadEffect:@"tank1Shoot.wav"];
[[SimpleAudioEngine sharedEngine] preloadEffect:@"tank2Shoot.wav"];

Build and run, and enjoy some groovy tunes as you explore! :]

Where To Go From Here?

Here is an example project with all of the code form the tutorial series so far.

You're ready for the Part Two of the tutorial, where you'll add shooting, enemies, and action!

In the meantime, if you have any questions or comments on the tutorial so far, please join the forum discussion below!


Over 300 content creators. Join our team.