a simple shoot em up game

swift kickThis article is part two in a series that looks at a simple “Shoot ‘Em Up”-style game for iOS written using Sprite Kit and Swift. If you missed the first installment, which provides the complete code, the necessary graphics and sound resources, as well as instructions for assembly, it’s here.

In this article, we’ll look at:

  • How the code is organized, both in the way it’s ordered, and through the use of MARK: comments, and
  • The operator overloads and extensions to CGPoint that support vector math

How the code is organized, and those MARK: comments

The code in the Simple Shoot ‘Em Up game is divided into two major sections:

  1. A set of operator overrides and extension properties for doing vector math on CGPoints
  2. The GameScene class, which defines the entire game

The GameScene class is divided into three subsections:

  1. Properties
  2. Event-handling methods
  3. Game state methods

Each section is marked with a MARK: comment. If you’re familiar with iOS development with Objective-C, // MARK: is Swift’s answer to good ol’ #pragma mark. If you’re not familiar with #pragma mark, read on…

Organizing code with MARK: comments

There’s a jump bar at the top of every editor window in Xcode, which makes it easy to navigate throughout your project. If you’re editing the GameScene.swift file (go edit it right now if you’re not), it should look like this:

jump bar

Click on the part of the jump bar just to the right of GameScene.swift, as shown below:

click on the jump bar

A menu will appear. It will display the various named entities — functions, classes, properties, methods, and so on — inside GameScene.swift:

jump list menu

You might notice that the menu lists the entities in the order in which they appear in the code, and that they’ve been organized into the following sections. You’ll see that:

  • There’s a line above each major section: one for the vector math stuff, and one for the GameScene class, and
  • The code has named sections, namely:
    • Vector math operators and CGPoint extensions: A set of operator overloads and extension properties to allow for vector math on CGPoints.
    • Properties: Properties of the GameScene class.
    • Events: Methods that respond to events.
    • Game state: Methods that change the game state.

These divisions were created using MARK: comments:

  • The Properties, Events, and Game state sections were created using the comments // MARK: Properties, // MARK: Events, and // MARK: Game state respectively,
  • The Vector math operators and CGPoint extensions section, complete with a line above it, was created using the comment // MARK: - Vector math operators and CGPoint extensions. Note the - (minus sign) that comes between // MARK: and the section name.
  • The dividing line separating the vector math stuff and the GameScene class was created with the comment // MARK: - — that is, // MARK: followed by a - (minus sign with nothing after it).

Using // MARK: and its Objective-C cousin, #pragma mark to organize your code is a good habit to take up.

Vector math

In the game, the player’s ship remains stationary and dead-center at the bottom of the screen. The player shoots at the aliens passing overhead by tapping on the screen, and the ship fires shots in the direction of that tap:

vector 1

In order to program this action, we’ll need to make use of vector math.

Before we begin: Sprite Kit’s coordinate system

Most UI and computer graphics programming systems have their origin at the upper right-hand corner of the screen, with X increasing as you go rightward, and Y increasing as you go downward. Sprite Kit is based on OpenGL, which uses the same coordinate system that you use in math, with X increasing as you go rightward, and Y increasing as you go upward:


With this coordinate system, the origin (0, 0) is located at the lower left-hand corner of the screen rather than the upper left-hand corner.

Vectors and points

An ordered pair (x, y) can represent:

  • A point located at (x, y), or
  • A vector that starts at (0, 0) and ends at the point (x, y)

vector 2

We’re going to use the connection between point coordinates and vector coordinates to create some overloads and extensions that will help simplify programming our game.

Vector addition

The first overload we’ll implement will allow us to add two vectors together, as pictured below:

vector 3

If you take a vector (x1, y1) and add another vector (x2, y2) to it, the resulting vector is (x1 + x2, y1 + y2).

In Swift, we’ll implement vector addition by taking advantage of the point coordinate/vector coordinate connection and use CGPoints to represent vectors. As a result, our vector addition overload of the + operator takes two CGPoints (x1y1) and (x2y2), and returns the vector sum (x1 + x2y1 + y2):

With this overload, you can add any two vectors represented by CGPoints just by adding them with the + operator.

Vector subtraction

It’s easy to picture vector addition, but it’s a little harder to picture vector subtraction. The diagram below should help:

vector 4

Subtracting a vector is easy to see in equation form: taking a vector (x1y1) and subtracting another vector (x2y2) gives you a resulting vector (x1 – x2y1 – y2). Here’s our game’s implementation of vector subtraction:

This overload lets you subtract a vector represented by a CGPoint from another vector represented by a CGPoint through the use of the - operator.

Vector multiplied by a scalar

Multiplying a vector by a scalar preserves the vector’s direction, but changes its magnitude:

vector 5

Multiplying a vector (xy) by a scalar k gives you the resulting vector (kx, ky). Here’s how we implement vector-scalar multiplication in our game:

With this overload, you use the * operator to multiply a vector represented by a CGPoint by a scalar factor represented by a CGFloat. Note that order is very important in this operation: the first operand must be the vector, and the second operand must be the scalar — it won’t work the other way around!

Length of a vector and normalizing a vector

We’ll need to get the length of a vector, and for that we’ll use the Pythagorean theorem:

vector 6

Being able to get the length of a vector will come in handy when we want to normalize it. By “normalizing”, we mean preserving its direction, but changing its length to 1:

vector 7

I wrote an extension to the CGPoint struct that provides two properties:

  • length, which returns the length of a vector represented by a CGPoint, and
  • normalized, which returns a CGPoint representing 1-unit-long vector that has the same direction as the vector in question.

Here’s the code:

Next steps

With the code organization explained and the vector math taken care of, we’ll cover the actual workings of the game in the next installment.


What I’d love to see at Tuesday’s Apple unveiling

by Joey deVilla on September 7, 2014

pocket watch - stonehenge - casio - turkey leg

Photo by Adam Lisagor (@lonelysandwich). Click to see the source.

I’m hoping that Tim Cook uses the slide shown above, channels Steve Jobs’ 2007 iPhone keynote and says:

“A pocket watch, Stonehenge, a Casio, and a turkey leg. A pocket watch, Stonehenge, a Casio, a turkey leg. Are you getting it? These are not four separate devices. This is one device!

{ 1 comment }

InfoSec Taylor Swift on Windows Phone security

by Joey deVilla on September 6, 2014

inforsec taylor swift on windows phone

Click the screen capture to see the original tweet.

It’s tweets like this that make her my favorite singer/songwriter/information security expert.


This fall’s new phones at IFA 2014

by Joey deVilla on September 4, 2014


IFA 2014, Europe’s largest consumer electronics show, takes place in Berlin starting tomorrow (September 5th) and runs until September 10th. It’s a great forum to do international launches for consumer devices that you want to sell during the holidays, and the mobile hardware vendors are promoting their wares there right now. Here’s a quick review of some of the new phones that have been presented so far by Samsung, Sony, HTC, and Microsoft Devices.

Samsung Galaxy Note Edge

samsung galaxy note edge

Samsung’s Galaxy Note Edge is going to be its next flagship “phablet”, a portmanteau of “phone” and tablet, typically used to describe mobile devices with screens between 5″ and 7″ diagonally. It takes its name from the way the screen curves around its right edge like so:

galaxy edge edge

This curved right edge functions as a sort of second screen. By default, it holds the icons for often-used applications, functioning in the same way the taskbar in Windows or the dock in MacOS does. Apps specially written for the Note Edge can take advantage of it, using it as a place for a menu bar or toolbar for often-used functions. It’s even possible for an app to only use the edge — a stock or news ticker is one possible application, as is an alarm clock app that lets you see the time without having to take your head off the pillow. It’ll be up to developers to come up with creative uses for the edge of the Edge.

It’s got some nice specs and features:

  • A fast processor – either a 2.7GHz quad-core chip or a 1.9GHz octa-core one, depending on the country and carrier where it’s purchased
  • Lots of memory for a mobile device: 3GB RAM
  • Decent storage: 32GB, plus a micro SD slot that lets you add another 32GB
  • A large, high-resolution screen – a 5.6 inch quad super HD AMOLED display with 2560-by-1440 resolution
  • Two high-resolution cameras:
    • A rear-facing 16 megapixel auto-focus camera with “Smart OIS”
    • A front-facing 3.7 megapixel camera
  • A heart rate monitor and “S Health” software that uses it
  • The “S Pen” for accurate handwriting and drawing

No price or release date has been announced at the time of this writing, but it should come out this fall.

Here’s are some “hands-on” reports showing the Edge in action:

The Edge will be available through AT&T, Sprint, T-Mobile, and Verizon this fall.

Samsung Galaxy Note 4

samsung galaxy note 4

If the Galaxy Note Edge’s screen and flagship status don’t excite you, or if it’s outside your budget, you may want to consider the Galaxy Note 4. Apart from a very slightly larger conventional screen (it’s 5.7 inches, a tenth of an inch bigger than the Edge’s) it’s got the same specs as the Edge.

Sony Xperia Z3, Z3 Compact, and Z3 Compact Tablet

sony xperia z3 and z3 compact
Sony’s new flagship smartphone is the Xperia Z3, which takes the Xperia Z2′s features — 5.2 inch 1080p display, a 20.7 megapixel camera, and waterproofing — puts them in an aluminum frame, gives the processor a slight speed boost (2.5GHz vs the Z2′s 2.3), and adds a wide-angle 25mm lens and extra light sensitivity to the camera.

If you like the Z3′s features but want a slightly smaller version, you may be interested in the Xperia Z3 Compact. It has a smaller, lower-resolution screen (4.6 inches, 720p) and skips the aluminum frame, but its other specs, including the processor, 20.7 megapixel camera, and waterproofing, are the same as its bigger sibling’s.

z3 compact tablet

If you like the Z3′s features but wanted a bigger screen instead of a smaller one, the Z3 Compact Tablet is for you. It’s got the same processor, camera, and waterproofing as the Z3, but has an 8-inch screen and a larger battery (which can accommodate, thanks to its larger form factor, and which it needs, thanks to the larger screen).


Owners of the PlayStation 4 gaming console will have an additional incentive to choose a member of the Z3 family for their mobile device: if a Z3 is on the same wifi network as the console, they’ll be able to stream and play games away from the console. You can even attach them to a Sony game controller!

Here are a couple of “hands-on” reports showing the Z3 family:

T-Mobile has confirmed that they’ll carry the Z3 when it launches in the fall.

HTC Desire 820

htc desire 820

The HTC Desire 820 is one of the first Android devices to ship with a 64-bit processor, which will enable it to run larger, more complex applications and even gain a little speed boost. These advantages won’t be realized until there’s a version of Android that supports such a chip, but that will happen with the upcoming release of Android L. It also features a 5.5-inch screen with 720p resolution, a rear camera with a 13-megapixel sensor, and for videoconferencing and selfie fans, an 8-megapixel front-facing camera.

Here are some “hands-on” reviews of the Desire 820:

Microsoft (a.k.a. Nokia) Lumia 830

lumia 830

Microsoft Devices — the organization formerly known as Nokia’s phone division — have refreshed their mid-level mobile device offerings with the Lumia 830, which they’re billing as “the affordable flagship”. With a decent processor (a quad-core running at 1.2GHz), 5-inch 720p display protected by Gorilla Glass 3, and a 10-megapixel rear camera with a Zeiss lens, this phone is aimed squarely at the middle of the market.

Here are a couple of “hands-on” reviews of the 830:

this article also appears in the GSG blog


1989 Tandy cell phone

Here’s a 1989 ad from Radio Shack Canada for the Tandy CT-300 mobile phone, which went on “sale” for $1499 Canadian, an $800 price cut.

What’s that worth in 2014 dollars? If we do the math based on this data:


  • The full price of the phone, $2299 Canadian, would be US$3689 in present-day money, enough to pay for 5 16GB iPhone 5S or Galaxy S5 smartphones, including sales tax.
  • The sale price of the phone, $1499 Canadian, would be US$2405 in present-day money, enough to buy 3 16GB iPhone 5S or Galaxy S5 smartphones, including sales tax.

Another big difference between then and now: 28 ounces, the CT-300 is a cinder block compared to today’s phones. The “Big Two’s” flagships are much lighter: the Galaxy S5 weighs 5.11 ournces, and the iPhone 5S weighs 3.95 ounces.

And finally, there’s that “40-number memory”. The photo for just one person in your smartphone’s address book would fill the RAM allotted to that 40-number memory several times over.

Ain’t modern technology grand?

this article also appears in the GSG blog


magic 8-ball

enlightened lazinessIn the last installment of the Enlightened Laziness series (my new series of articles on cross-platform mobile development with Xamarin), I gave you the code for a slightly more complex “Hello, World!” app: a “Magic 8-Ball” app for Android and iOS. It’s pretty simple: the user is presented with a button which gives a random yes/no/maybe answer.

My options

I had a choice of approaches I could take when writing the app. I could’ve written it the standard way, which is diagrammed below:

standard xamarin apps

The standard way — the one that’s been available since Xamarin 1.0 — is to write some iOS-specific C# code (typically for the UI and other iOS-specific APIs and features), some Android C# code (once again, typically for the UI and other Android-specific APIs and features), and some C# code common to both versions, typically the app’s “business logic” and other code that’s specific to the app’s domain rather than the platform. It’s still less work than dealing with an iOS Xcode project with code in Objective-C and an Android ADT or Android Studio project with code in Java, but it’s still not quite the “write once, run anywhere” dream.

The other way — the way I chose — is new to Xamarin: the Xamarin.Forms route, which is diagrammed below:

xamarin.forms apps

With Xamarin.Forms, you’re coding to a single, platform-independent UI toolkit, and Xamarin does the necessary conversions during the compilation process. This sounds like the “write once, run anywhere” dream, and I’ll be spending the next few weeks playing with it. If you’ve used similar tools or platforms, you know that these sorts of systems are never perfect, and one of the things I’m going to be exploring is the set of trade-offs you have to make when using Xamarin.Forms for cross-platform development.

The full code for the Magic 8-Ball app

Here’s a screenshot of Xamarin running on my Mac that shows the structure of the Magic 8-Ball solution:

screen 1

Click the screenshot to see it at full size.

The solution has three projects:

  1. Magic8Ball: Contains the code for the app itself
  2. Magic8Ball.Android: Contains the necessary code for building the Android version
  3. Magic8Ball.iOS: Contains the necessary code for building the iOS version

If you look at the contents of the MainActivity.cs file in Magic8Ball.Android, you’ll see this. It bears a strong (if C#-flavored) resemblance to the sort of MainActivity.java file that gets auto-generated when you start a new Android project in ADT or Android Studio:

Note the last line of code: it contains a call to the GetMainPage() method of the App class. The App class is defined in the App.cs file of the platform-independent project, Magic8Ball.

There’s similar code in the AppDelegate.cs file in Magic8Ball.iOS. It looks like the AppDelegate.m or AppDelegate.swift file that gets auto-generated for new iOS projects in Objective-C or Swift, but in C#:

As with the Android version, there’s a call to App.GetMainPage() in the iOS version. That’s where your part of the app begins — let’s look at the App class and its GetMainPage() method.

Since it’s simple and the point of the exercise is to provide a quick-and-dirty intro to Xamarin.Forms, I’m foregoing the general rules about keeping interface and implementation separate (you shouldn’t stuff all the code into the view in a “real” app). The code for the entire “Magic 8-Ball” app is in the GetMainPage() method:

The Magic 8-Ball app’s UI structure

magic8ball's ui structure

As you can see in the code, the GetMainPage() method’s job is to draw the app’s main (and only) screen, which in Xamarin.Forms parlance is a Page. Xamarin.Forms’ Page class represents different things on different mobile OSs:

  • An Activity in Android
  • A View Controller in iOS
  • A Page in Windows Phone

Xamarin.Forms pages come in 5 different flavors:

xamarin forms page types

A page can contain a single child. Typically, this child is some sort of container for other controls.

For this app, our main screen is a ContentPage, the simplest type. If you’d like to find out about the other page types, see Xamarin.Forms’ Pages documentation.

Since a page can have only one child and we need two controls, we’ll need to make that child something that can hold other controls. That’s what the various subclasses of the Layout class are for:

xamarin forms layout types

For this app, we’ll use the StackLayout layout, which is used to lay out controls in a single horizontal or vertical line. We’ll give it two children:

  • A Button, which the user will tap to get a random yes/no/maybe answer, and
  • A Label, which will display that random yes/no/maybe answer.

As I showed in the previous article, Xamarin converts these UI-independent views into their equivalents on their respective platforms:

eightballforms screenshots

A walk through the code for C# newbies

If you’re familiar with C# programming, you can skip this final section. This is for the benefit of people who are new to C# or haven’t coded in it in a while.

Creating the set of answers

Here’s the first line of the GetMainPage() method. It defines the app’s randomly-selected answers:

C#’s var keyword lets you declare variables at the method level without having to explicitly specify their type — given enough information, the compiler is smart enough to figure out the type all by itself. After all, why type in this redundancy-filled line:

Thingy myThingy = new Thingy();

when you can simply type:

var myThingy = new Thingy();

If you’ve been coding in Swift, you’re familiar with this sort of implicit declaration.

C# has a built-in array type, but it’s generally recommended that you ignore it most of the time in favor of using the the List<T> type instead. Lists offer more features than arrays (even when you factor in LINQ), and unlike arrays, they’re resizable. Like arrays, the List collection has an initialization syntax that filling it simpler.

Setting up the random number generator

The next line sets up the random number generator by initializing a new instance of the Random class:

This is pretty close to the way you’d do it in with Android in Java. Both the .NET and Java libraries have a class called Random which is used to generate pseudorandom integer and real numbers. In this case, we want to generate a random integer that we’ll use to select an answer to give the user.

Random number generation is a little different in Objective-C/Swift and iOS. There, we’d use some version of the arc4random() function from the standard C library  – most likely arc4random_uniform(), which avoids the “modulo bias problem” — to generate a pseudorandom integer.

Setting up the controls

These lines initialize the controls: the Button, the Label, and the StackLayout that will contain them both. These are pretty straightforward:

Note the object initialization syntax. This:

is the equivalent of this:

It makes for less typing, which according to Corbato’s Law, is a good thing (as long you don’t make the code hard to read).

Responding to a tap on the button

Let’s define what happens when the user taps the button, which raises the Clicked event. We want to attach an event handler to the Clicked event that selects a random answer and sets the text of the label on the screen to that answer:

The => is C#’s lambda operator. The ability to define anonymous functions which can then be passed about is also available in Objective-C in the form of blocks and in Swift in the form of closures, and well as in Java 8.

Defining and returning the page

With the UI completely defined — layout, controls, and even an event hander — it’s time to lay out the content of the page and return it:

Keep an eye on this blog — I’ll be doing a lot of exploring of Xamarin and especially Xamarin.Forms and sharing my findings here!


Feeling bored and evil at an airport? Try this prank.

by Joey deVilla on August 30, 2014

power outlet sticker at jfk

Found via Joe Martinez. Click the picture to see the source.

Of course, if you’re caught doing this, it’s likely that a number of business travellers and people looking to charge their tablets for a long trip will draw and quarter you, and no court in the land will convict them.

This article also appears in The Adventures of Accordion Guy in the 21st Century.