Basic concepts of a side scroller

Basic concepts of a side scroller

April 13, 2017

If you have never built a side scroller before, this introduction will help you understand the basic concepts. You will be tackling this by constructing an obstacle treadmill. The player effectively flies on the spot and must navigate the obstacles coming towards them by moving up or down.

You will learn to implement the following:

  • A physics controlled bunny
  • Dynamic obstacle object generation and removal
  • Animation and actions
  • World scrolling
  • Implement physics based collision detection
  • Create your own custom button class

Create a new project

Time to make a SpriteKit project in Xcode and get started with Hoppy Bunny!

Your first step is to create a new SpriteKit Xcode project, open Xcode and select Create a new Xcode project. Then select iOS > Application > Game as shown below:

Select New game project

Adding artwork

After the project is created, you should download our art pack for this game. Next you will add the art pack you just downloaded to your Xcode project by first unpacking the archive. Select the Assets.xcassets folder in Xcode project navigator, then drag the downloaded assets into Xcode as shown below:

Dragging assets into project

Asset Scale

This would be good time to touch on the subject of asset scale. You may have noticed when you select an asset in Assets.xcassets you are presented with 1x 2x 3x Scale options and by default they will be set to 1x Scale as the filename contains no implied scale e.g. @2x or @3x

Have a look at this handy Device resolution guide

In particular look at the Rendered Pixels section and notice the reference to scale factor. These assets were designed for retina 2x resolution devices.

Ensure you have the Assets.xcassets selected in the Project Navigator and then select each asset file and drag them from 1x to 2x. You can remove the spaceship asset, you will not need it.

Summary

Great, you've setup a basic project and added the artwork. In the next section it's time to start building our game.

Feedback

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

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations across the USA and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more