07/23/2014

A Flappy Bird Swift Example – FlappyBowst (Part 1 of 3)

mobile

You’ve been living under a rock, or you were recently zapped by a radioactive iPad causing all electronics within a 1 mile radius of you to shut down; these are the only acceptable reasons why you might not know about Apple’s new language: Swift.

You can’t push a Swift app to the App Store — not until iOS 8 hits — but that hasn’t stopped it from gaining traction. So as a developer, why should you care about Swift? Well, if you’ve been writing Objective-C for the last ten years, maybe you don’t need to care for a while. However for a developer with minimal or no Objective-C experience, the barrier to entry for iOS development was just lowered.

Swift’s syntax will be familiar to most developers as it borrows from some of the best features of other languages. The best thing about the syntax is that you don’t notice it; for an Objective-C newbie, I find the Objective-C syntax requires a lot of my attention; with Swift I find I’m thinking about business logic rather than syntax.

This post will kick off a multi-part blog series on building a SpriteKit game with Swift. We’re going to build a Flappy Bird clone called Flappy Bowst. We’ll start by getting a project up-and-running, get the game assets in place and get our hero loaded and ready to flap.

As of the time of this writing Xcode 6 beta 4 is the latest version, so that’s what I’ll be using.

Click File -> New -> Project and select Game

Fill out the project form

If you run the app now, the simulator should show this:

If you’ve built a SpriteKit app before you know where all this “Hello World” goodness comes from. If not, open up the GameScene.swift file and behold Swift in its natural habitat.

Before we start adding any code let’s add the **assets.

Click on the Images.xcassets group in the navigation window and drag the assets from the Finder window into the middle pane.

Okay, now that the boring stuff is out of the way let’s start writing some Swift code. We’ll start by removing the contents of the methods: didMoveToView and touchesBegan.

The code should look like this:

Now we’re going to take a little bit of a detour and add in some code to make the logo appear on screen, respond to touch events and setup up the game physics. We’ll refactor the code in a later blog post to get it back on track and complete our flappy bowst app.

Start our detour by making GameScene implement the SKPhysicsContactDelagate protocol.

Next we’ll add some instance variables and implement our detour version of didMoveToView

Most of this code should make sense, if any of it doesn’t yet it should by the end of this series.

By this point you may be wondering why I’m using images instead of text. Which is a very good question. The answer is, because you’ll learn more about this by typing it out for yourself, creating typos and cursing at me for not just allowing you to copy and paste. You’re welcome!

At this point the logo will load and then fall off the screen, which isn’t without it’s charms but let’s add some code to make it start to flap.

For this we’ll implement the touch handler:

Okay, if you’ve done everything correctly you should now be able to click the simulator’s screen fast enough to keep the logo from falling into the Nightosphere.

For what we’ve done so far, we haven’t had any real code savings over Objective-C, however it’s clean and concise. If you’re an Objective-C developer the code so far won’t be impressive to you, however if you’re Ruby, PHP, Python or even a C# developer that has wanted to develop native iOS apps you probably see the value in Swift with just the few lines of code we have so far.

In the next article in this series make the parallaxing ground and skyline.

Until then, Happy Coding!

*The full source can be downloaded from https://github.com/bowst/flappybowst

** Asset folder https://github.com/bowst/flappybowst/tree/master/Assets

More Thoughts

Need help with your next digital project?

Click on that button and fill in the simple form.