Applications open until spots fill up - Apply now.

Set up the Game Scene

Set up the Game Scene

April 13, 2017

Let's get started setting up the main game scene, SpritKit Scene Editor is a powerful Xcode tool that lets you rapidly layout the scene.

Setting the stage

Select GameScene.sks from the Project navigator:

It's helpful to see the scene size, zoom out so you can see the yellow border which represents the scene size. Select Editor / Zoom Out or use the shortcut shown.

The default project may have a Label in the center with the Text "Hello World". Click it to select it and press delete on the keyboard.

Next modify the size parameters as shown in the Attributes inspector panel set width to 320 and height to 568 (width: 320, height: 568)

Adjusting GameScene size

Remember the device resolution guide in the previous chapter? You will be using a common design size of 320 x 568, this gives you a nice portrait view, perfectly suited to the artwork. You may be wondering what about supporting other devices?

Thankfully SpriteKit has your back and can automatically scale the view to fit other devices. This size will scale to fit iPhone 4, 5, 6, and 7.

Have a look through the code in GameViewController.swift. In particular:

/* Set the scale mode to scale to fit the window */

scene.scaleMode = .aspectFill

If you option+click scaleMode and look at the Quick Help inspector panel you can find out more about the scaling options available.

Move the center to the lower left

To make it easier to position objects on the screen you will move the center point of the scene to the lower left.

Set Achor Point x and y to 0 (x: 0, y: 0).

Adding background image

Set the Background Color

With GameScene.sks set the color by clicking the color selector near the top of the property inspector. Set the color to a nice sky blue. You can use your own color or use (red: 72, green: 192, blue: 203).

Adding background image

Add the clouds

Drag in clouds.png to the scene Set the Position to (160, 385) or any other value you think looks good.

Adding the clouds

Creating the Bunny Scene

Now you're going to create a new SpriteKit Scene File for the bunny and animate it.

Create a new SpriteKit Scene File by selecting File > New > File > SpriteKit Scene:

Creating the Hero SpriteKit Scene file

Because bunnies are heroes, save the file as Hero.sks

Saving the SpriteKit Scene fike

Add the bunny

Select Hero.sks in the Project navigator

Drag bunny1.png into scene.

You may not be able to see the bunny, if not Zoom Out the scene, center your view on the bunny and then Zoom In a little.

You will be connecting the bunny in code later so you need a way to reference it. This is typically done using the Name property, so set Name to hero.

Adding the bunny

Personally I dislike using the huge default scene size, when only dealing with a single asset. It can also cause unexpected position issues later on when using it as a referenced object. Click anywhere other than the bunny itself and set the scene Size (as you previously did with the GameScene) to (33, 33). Why (33, 33), this is the Size of the bunny sprite. Set the Anchor Point to (0.5, 0.5)

Adding the bunny

Animating the bunny

Great, you have a static bunny. However, we want this bunny to fly and the bunny can fly by flapping it's ears! You are going to setup a sprite frame based animation ~0.5 seconds long and repeat forever.

Open Hero.sks, open the Timeline if it is not open already Timeline

Next open select the Object library panel Object Library and look for the AnimateWithTextures Action and drag this into the start of the bunny Timeline as shown:

Adding the animation action

Set the Duration to 0.5, feel free to have a play with this value.

Time to add the animation frames, click on the AnimateWithTextures Action in the Timeline then click on the Media library panel. Drag bunny1.png and bunny2.png into the Textures box as shown:

Adding the animation frames

Before we try the animation, let's make it loop. Click on the Circular arrow in the bottom left of your AnimateWithTextures Action as shown and click the Infinity symbol.

Loop animation option

Loop animation forever

Finally time to see the bunny in action! Click Animate in the Timeline and watch that bunny go.

Preview the animation

Summary

The game is already starting to take shape, you learnt to:

  • Build the layout for your game scene using the SpriteKit Scene Editor.
  • Create the hero of the game as a stand alone SpriteKit Scene
  • Used the timeline and added your first action
  • Added a sprite frame animation to bring the bunny to life

In the next chapter you will be adding physics to the game world.

Feedback

If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository.

Join Make School

Prepare for your career as a founder or software developer

Apply Now

Talk to Us

If you have any questions, please send us an email

Email Us