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.m file.

•   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.