iOS Training from beginner to advanced
The Slippy Flippy challenge was a success. The app was written in one week, debugged in another, and submitted it to the iTunes store in the third. Now a week of waiting to see what Apple thinks of it.
But how did I do it? Let’s make a version of Slippy Flippy. I’ll assume you have Xcode 5 at least, you are programming in iOS7 at least, have loaded it on a compatible Mac and know how to do some basic things, like getting a template. For this app tutorial, you can use the free developer license, but I would strongly suggest spending the $99 and get a paid a developer’s license. Only with the paid license will you be able to test your apps on your devices and the simulator has a lot of problems with running sprite kit games.
Start by Loading the sprite kit template:
Now we have set up and tested an environment for the sprite. Let’s add a sprite.
SFMyScene.m
file.initWithSize:
method, Under the line [self addChild:MyLabel];
Add the following code:/* Make a penguin */ //Declarations prior to making the sprite CGFloat penguinWidth = 64.0; CGSize penguinSize = CGSizeMake(penguinWidth, penguinWidth); SKColor *penguinColor = [SKColor whiteColor]; //initialize the sprite node SKSpriteNode *penguin = [SKSpriteNode spriteNodeWithColor:penguinColor size:penguinSize]; //set properties penguin.position = CGPointMake(100, 100); penguin.name = @“penguin”; //add to the scene tree [self addChild:penguin];
Now run the app. A white square representing your penguin appears at position 100,100. This is how to make a sprite of a solid color.The first three lines of code are just declaring variables to use in our initialization of the sprite. We set two properties, position and name for the sprite. The position property assignment makes our sprite show on the viewable area. Note the position is based on the center of the sprite, not a corner. Change the position from 100,100 to 0,0 and see what happens. Change it to another position afterwards. The name is not required, and there there are time it will not be needed, but it does allow for key searches for the sprite in the node tree, so it can be very useful.
However, most sprites, like the spaceship, are what are known as textures, and look a lot better than a white square. to add a texture easily, you need a .png graphic in the bundle.
/* Make a penguin */ /* =============Removed for use of a SKTexture //Declarations prior to making the sprite; CGFloat penguinWidth = 64.0; CGSize penguinSize = CGSizeMake(penguinWidth, penguinWidth); SKColor *penguinColor = [SKColor whiteColor]; //initialize the sprite node SKSpriteNode *penguin = [SKSpriteNode spriteNodeWithColor:penguinColor size:penguinSize]; //set properties penguin.position = CGPointMake(100, 100); penguin.name = @"penguin"; //add to the scene tree [self addChild:penguin]; ======================*/ //Initialize a sprite with a texture from a file. SKSpriteNode *penguin = [SKSpriteNode spriteNodeWithImageNamed:@"gray penguin"]; penguin.position = CGPointMake(100, 100); penguin.name = @"penguin"; //not required but VERY useful [self addChild:penguin];
We removed the required properties for the color sprite, and replaced them all with an image. The image sets the dimensions. Run this and you get a penguin on your game.
Next post we will move the penguin.
Pingback: The Slippy Flippy Challenge: How to Move a Sprite | Making App Pie