Make App Pie
Training and Instructional Design
The Slippy Flippy Challenge: How to Program a Basic Sprite in Sprite Kit.
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:
- Start Xcode and you will get the intro window
- Select Create a new Xcode project
- Making sure the left column has iOS application selected, select the SpriteKitGame template. Click Next.
- On the next window, fill in your information. we’ll call the game PenguinDemo. For the organization name put your name, and for the company identifier use a reverse name for your website. My website is shlomosdrash.com so my identifier is com.shlomosdrash. For the Class prefix put SF. We will make the game for the iPhone this time, so the devices will be iPhone. click next. You will be asked where to save the files. I keep a folder called developer on my hard drive, so you might want to save it in a similar folder. Then Finish.
- In the center of the window you will find the deployment info. Make it match the setting below to keep us in portrait. We’ll cover dealing with landscape in another blog piece.
- Click the triangle run icon on the upper left corner of the window. The game will now run.
- Tap the screen, and a spinning spaceship will show up
- Stop the game by pressing the square stop button in Xcode.
Now we have set up and tested an environment for the sprite. Let’s add a sprite.
- Select the one
SFMyScene.mfile.
- In the
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.
Download the penguin at right to your desktop and save as gray penguin.png, or make your own 64×64 pixel image saved as a .png.
- Drag the file for the image into the file list for the game. Xcode will ask you if you want to import. Be sure to check the box to copy into the destination’s group folder.
- Change the code to the following, commenting out all of our previous code:
/* 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.
One Comment on “The Slippy Flippy Challenge: How to Program a Basic Sprite in Sprite Kit.”
Leave a Reply
Subscribe to A Slice of App Pie Newsletter
If you are making your own stuff, doing your own work and trying to sell it in the market, most advice isn't enough. You want it to work. You want to sell your works to those who most are touched by them. This newsletter is for you. I am one of those people like you, creative, independent and maybe a little bit crazy to the outside world. I'll talk about writing good apps for Apple platforms, the tools and API's to get there. Along the way I will show you how to become you best creative self. I will show you how to build and create, and make some money at it too.
Get exclusive content, new post notifications, tips and more in A Slice of App Pie.
Pingback: The Slippy Flippy Challenge: How to Move a Sprite | Making App Pie