Adding a Sprite (Character) to a Game in iOS

In this series of tutorials, we are going to create a 2D (Super Mario/Sonic the Hedgehog style) Platform game for iOS from scratch. By the end of this tutorial, you will have built a complete game. This tutorial is not designed to go over many of the technical details involved in creating the game, but rather as a jump-start to allow you to build your first game quickly.

The requirements below may be flexible, but to ensure a successfully created game, I suggest following them as close as possible. iOS programming can get very complicated for new users, and leaving out any key “ingredients” may result in project failure.

Requirements

  • Mac with OS X Yosemite
  • XCode

For this tutorial, we will be using Objective C and SpriteKit with iPhone in mind. If you have little experience in programming, don’t let that stop you from trying out this tutorial. You may post questions big or small in the comments section.

OK – let’s jump right in to the tutorial!

1.0 Create  Your First Project

  1. Launch Xcode 
  2. Click FileNew and select Project
  3. Select Game and click NextScreen Shot 2014-12-10 at 5.51.15 PM
  4. For the Project Name, enter PlatformExample and click Next

    Screen Shot 2014-12-10 at 5.52.05 PM

  5. Finally, select a folder and click Create
  6. Click Product and Run

iOS Simulator will now launch. Depending on the speed of your Mac, you may see a black screen – this is normal. Just wait a few minutes and the project will eventually load. You’ll know your game loaded once you see the FPS (Frames Per Second) displayed in the bottom-right corner of the simulator’s screen.

1.1 Adding a Player Sprite 

A sprite is simply a moving object within your game. In this case, it’s the player.

  1. Drag and drop player.png into your project. The project name will be highlighted in blueScreen Shot 2014-12-10 at 6.14.30 PM 
  2. In the next screen, leave all the default options selected and click FinishScreen Shot 2014-12-10 at 6.14.43 PM
  3. Double-click on GameScene.m and replace the existing code with the following:
  4. Double-click on GameViewController.m and replace the existing code with the following:
  5. Run the code

Note: The player sprites are included in the assets which can be downloaded at the bottom of this post, or right here:

player1 player

What did the code above do? The SKScene loads the player.png image into memory. Note that you don’t need to type the PNG part of the filename as xCode automatically finds the necessary file. The player.position line sets the image in the center of the screen. Otherwise the player sprite would appear at 0,0 (the bottom-left part of the screen).

Screen Shot 2014-12-11 at 7.08.48 PM

Congratulations, you’ve just added a sprite to your first game!

1.2 Simple Physics and Collisions

You want your player to be able to interact with its surroundings, and having an immovable image displayed on the screen would make for a very boring game. Luckily Apple has taken all of the complicated science out of the equation by giving access to pre-built physics functions. In order for the physics to work, your player must collide with something. For example, if you drop an egg, you expect it to smoosh onto the floor, as opposed to falling endlessly through space.

First, let’s create a bounding box by adding this line of code after the self.BackgroundColor line:

Now, let’s make our player solid by adding this line after the player.position = myPosition line:

Now, run your program in the iOS Simulator. Notice how the player now drops to the bottom of the screen? The player interacts with the edges of the screen by “sitting” on top of it. Think of this as a platform.

Here’s the code in it’s entirety:

Well, there you have it! You’ve taken the first leap into building a 2D iOS game with SpriteKit…but why stop there? Jump over to Part 2 of the tutorial for more game building goodness.

Download the Asset Files

Check out Part 2 >>