Make App Pie

Training for Developers and Artists

The Slippy Flippy Challenge: How to Move a Sprite

iOS Simulator Screen shot Mar 26, 2014, 8.32.35 AM
The game when animation is working

Back in February,  I bragged once that I could put together  Flappy Bird in a week. Someone called my bluff, and I was challenged to do so.  I did put together a game like Flappy Bird, and now I’ll show you how I did it.

Last time we put a sprite  of a penguin on the screen . That might be cool, but if the penguin doesn’t move, it’s sort of meaningless.

There are several ways to move a sprite: SKActions, positing in update: and physics.

SKAction for animation

One is with an SKAction. In your code in initWithsize:, change your code to this:


//Initialize a sprite with a texture from a file.
SKSpriteNode *penguin = [SKSpriteNode spriteNodeWithImageNamed:@"gray penguin"];
penguin.position = CGPointMake(0, 0);
penguin.name = @"penguin"; //not required but VERY useful

SKAction *movePenguin = [SKAction moveTo:CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame)) duration:2.0];
[penguin runAction:movePenguin];
[self addChild:penguin];

We added a SKAction object. This will move the penguin from the left corner to the middle of the screen. SKAction objects are instructions on how to animate the sprite. They can be given once then let the sprite to without any more control needed.

This however puts the penguin right over the label. we can animate the label as well to move it 50 points up and out of the way of the sprite. Place this line just after the label.position assignment:

[myLabel runAction:[SKAction moveToY:myLabel.position.y + 50 duration:2.0]];

You can see another use of a SKAction in the code for the spaceship(s).

SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"Spaceship"];
sprite.position = location;
SKAction *action = [SKAction rotateByAngle:M_PI duration:1];
[sprite runAction:[SKAction repeatActionForever:action]];
[self addChild:sprite];

Instead of a move, the spaceship uses  a rotation, another thing you can do with SKAction. Refer to the SKAction Class Reference for everything you can do with actions.

Frame by Frame Animation in update:

A second way is to control the sprite frame by frame. Remove the code for the space ship so it no longer is a distraction.

Comment out the following two lines in initWithSize:

//SKAction *movePenguin = [SKAction moveTo:CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame)) duration:2.0];
//[penguin runAction:movePenguin];

Now add the following in update:

CGPoint position = [[self childNodeWithName:@"penguin"] position];
    if (++position.y <= CGRectGetMidY(self.frame)){
        [[self childNodeWithName:@"penguin"] setPosition:CGPointMake(++position.x, ++position.y) ];
    }

Now build and run. While with SKAction, the system figured out how to move the sprite, here we are moving the sprite frame by frame. Before the app renders every frame of animation, it checks with update: to know what it needs to render. At it’s fastest that will be 60 frames a second. Much of the brute force animation and logic happens here in update:

Before rendering every frame, we check the position of the sprite, and see if is halfway up the screen. if it is not we adjust the position one point up and to the right.

Tommorrow, we will look at the third type of animation: Physics.

One response to “The Slippy Flippy Challenge: How to Move a Sprite”

  1. […] the last installment of this series I showed two kinds of animation: SKAction and using the update: method from frame […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: