Zebulon Part 2: Status Update

I’ve been focused on writing my game for a week now, and I’m happy to say that I achieved the (modest) goals I set out in my last post. The artificial deadline approach worked as a motivation!

The wise approach would have been to focus on workshopping the gameplay by starting with crappy graphics targeting one particular device, like an iPhone 6. This would have let me figure out what ideas work, and which ones didn’t.

I took the opposite approach, and instead worked top-down on “first impressions” such that the game would look decent on any iOS device, starting with the launch icon and home screen. While these are just placeholder graphics, being able to have something that looks kind of like a game from the start has the important emotional impact of making me feel like I’m making progress.

Simulator Screen Shot Apr 5, 2016, 12.53.39 PM.png

The home screen was adapted from a vintage sci-fi book cover; I’d love to follow this aesthetic if I can.

Simulator Screen Shot Apr 5, 2016, 12.54.52 PM.png

What’s interesting about the home screen is that different iOS devices have much different resolutions and aspect ratios. The above is an iPad air; for an iPhone 4s, the aspect ratio makes this screen look like:

Simulator Screen Shot Apr 5, 2016, 1.03.15 PM.png

From day 1, I’ve worked to ensure that graphics and elements are scaled to work on any device. I’ve avoided making different graphics specific to different aspect ratios, preferring to scale, position, and clip in code.

For the game itself, I abstractly describe objects in a space that is logically 150 x 100 units. There are nodes (planets) and edges (paths between planets). I wrote a layout engine that  dynamically picks the actual size and position of objects based on the device’s screen.

Simulator Screen Shot Apr 5, 2016, 12.52.52 PM.png

Levels are described in a JSON file, using a 150 x 100 unit layout as e.g.:

    "version": 1,
    "name": "Getting Started",
    "nodes": [
        { "id": 1,
          "x": 0,
          "y": 0,
          "neighbors": [2,4],
          "properties": { "role": "colony"}
        { "id": 2,
          "x": 20,
          "y": 50,
          "neighbors": [1,3,4],
          "properties": { "role": "empty"}

JSON parsing in Swift (or Objective-C) is a bit more work than you’d expect, because the language is typed. The code looks like:

let data = JSONData.dataUsingEncoding(NSUTF8StringEncoding)
let json = try NSJSONSerialization.JSONObjectWithData(data!, options: .AllowFragments) as! [NSObject:AnyObject]
guard let version = json["version"] as? Int,
    let name = json["name"] as? String,
    let nodes = json["nodes"] as? [[NSObject:AnyObject]] else { return level }

Overall, I thought Spritekit does a great job of making it easy to build event-handling (for clicks), object display, and animation effects. Most of my time was spent on asset-wrangling and getting things to display at the right location and size. Weirdly, the one chunk of code that took me hours to get working properly was to display a texture as grayscale (for when a planet object is disabled). There are a variety of approaches; some lost the alpha channel, and others would simply not properly convert between the different image formats. Here’s the final version which works nicely:

func convertToGrayScale(texture: SKTexture) -> SKTexture {
    let originalImage = texture.CGImage()
    let context = CIContext()
    let inputImage = CIImage(CGImage: originalImage)
    let filter:CIFilter = CIFilter(name: "CIPhotoEffectMono", withInputParameters: [kCIInputImageKey : inputImage])!
    let result = context.createCGImage(filter.outputImage!, fromRect: inputImage.extent)
    return SKTexture(CGImage: result)

I plumbed in a dialog which opens when you click on a planet, so you can change its behavior (this is how you play the game). Nothing fancy here aside from a lot of layout work; though I’m still having a devil of a time getting the side-arrow to work uniformly on all devices.

Simulator Screen Shot Apr 5, 2016, 12.58.41 PM.png

And there you have it! A week of progress. Let’s see how the game is looking next week!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s