
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.
Leave a Reply