SpriteKit: The Runner Chronicles

Part 1: The coordinate system

Hello! First of all, cool title am I right? 😉

Second, hi, if you do not know me, I’m Mirza. I develop iOS apps mostly for the fun of it and this past couple of weeks, I’ve been dipping my toes into SpriteKit, essentially a framework in iOS for you to make games.

I’ve been following this tutorial, go check him out if you have not already, amazing tutorials. I’ve only touched on SpriteKit briefly so that’s the only tutorial I’ve followed. I wanted to apply the same concepts except I put my own twist on the game.

I don’t know how long this post is going to be, but I shall see at the end of this write up if I ever need a part 2.

I’ve been messing around with this idea in my head. Tell me. Would you like to see like a vlog explaining what I’ve learned or would you rather read through these types of blog posts?

I’ve seen people do vlogs on this types of subjects and frankly speaking, they look cooler but I may not necessarily be as engaged.

Anyways, enough talk. Let’s get in right away.

Game explanation

Alright, so the basis of the game is simple. Rather than having the player shoot projectiles to an infinite sea of enemies coming at it like what the tutorial did, I decided to make an endless runner game.

Imagine Temple Run. Imagine Flappy Bird. But more like Super Mario.

You have a “moving” background, you have a player that can only go up and down and you have rectangular pipes, in this case green blocks.

Player in blue, blocks in green, moving background and the score

Objective? Avoid the green blocks.

1 point is given for each green block avoided. Hit it and you will be redirected to the Game Over screen.

First bug

Honestly, I went into this blog post with two bugs in mind but I forgot the first one. I think the first one was the coordinate system. I’m going to explain it anyway.

Okay, the screen you are seeing here is the screen players are going to be seeing. In SpriteKit, unlike most other frameworks, (0, 0) is at the bottom left.

Imagine your high school Maths lessons with all those graph drawing. I’m not sure how many game frameworks use this coordinate system. I’ve tried SDL and SFML with C++ and I totally forgot which they use.

For iOS developers who come from developing apps, which mostly are, the coordinate system starts (0, 0) at the top left. At least that’s what I’ve been told from several Stackoverflow answers.

So, I’ve been rendering a green box with a size of 100x100 and displaying it with the other half hidden.

Alright, what do I really mean when I say the bottom left is (0, 0)?

The screen above that you are seeing is 1/4 of the whole coordinate system. Zoom out a little bit and paste 3 more until it makes a rectangle. That’s the real size of the coordinate system.

Let’s put it in perspective of a Maths graph. The one side of the graph that you usually start with is the top right of the graph. There are 3 more rectangles right?

So technically if you were to put a green block with size 100x100 on (0, 0) , you are going to see a green block with size (50, 50). 50, because the other half of the green block is on the other half of the graph.

So, lesson learned. The coordinate system is bigger than expected and the origin of the green block is at the center. Not the bottom left.

What if the origin is at the bottom left? Well, we are going to see the green block sitting just right at the bottom left of the screen. Just imagine a pin punctured into the middle of the green block. Where you place your green block has an effect on how it is displayed on the coordinate system.

Read Part 2 here !