Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

Last week I submitted my sixth iPhone game—Michael Schacht’s Web of Power Card Game: The Duel—to Apple for release. All six games have been built with my own “MobileEuroGame” framework, which incorporates all the basic elements that I need to create card games.

Despite using a single framework, I can still produce games that are very different looking and are very different to play, as shown in these screenshots of my first and last games:

The trick to making graphical gaming frameworks of this sort reusable for somewhat divergent uses is to abstract data, separate that data, then create a controller to manipulate it. In this post, I’m going to show how to do so by first explaining the non-abstract way to display images in Core Graphics and then creating GraphicModel and GraphicController classes that paint those images in a better abstracted fashion.

The examples below are laid out using the “Single view application” project type in Xcode.

Preparing for Core Graphics

The simplest way to access Core Graphics is through the Core Animation layer that backs every UIView. I’ll need to create a UIView subclass as my game’s main window. I do so with “File > New > File”, creating an “Objective-C Class” subclassed from UIView:

I’ll next need to link my new GameWindow to my app’s main Window. This is done by going to my app’s storyboard file, selecting the “view”, and then selecting the “Identity Inspector” in the right pane. I then change the class from “UIView” to “GameWindow”.

I’m now ready to code Core Graphics by editing the drawRect: method in my GameWindow.

Some Sample Graphics

For the rest of this post, I’m going to use the following three graphic files as examples:

If you’re following along in Xcode, you should create your own graphics and then import them to Xcode with “File > Add Files …”

Writing Images to a Context

Drawing images using Core Graphics is quite easy. All you need to do is create a UIImage, then use its drawInRect: method to paint that image at a specific size. As long as you do all of this inside of the drawRect: method of your view, the images will automatically be drawn to that view.

Here’s the code to do so:

This draws: background.jpg at the view’s size; logo.png at regular size, starting at (5,5); and use.png at regular size so that it’s (5,5) from the bottom right corner. Here’s the result:

This code, though, also has a big problem: it’s not repeatable. By editing drawRect: by hand, I created code that’s only usable for this one game. To create code that’s instead usable for two (or six!) games, I need to create more abstract data classes, send those classes messages when starting a new game, and then draw upon the GameWindow using the results.

Reaccomplishing the results thus far with a more robust and repeatable code base is the goal of the rest of this post.

Creating a Data Class

Apple suggests using the MVC or Model-View-Controller software architecture to separate and thus abstract the individual elements of your code. I already have a view (GameWindow). I’m next going to create a model for the image data that’s used in the game.

As before, I select “File > New > File” and create an “Objective-C Class”, but now I subclass from “NSObject”, which is a common choice for data objects:

Most of the actual model will appear in the GraphicModel’s header file. For a first-cut, simple model I’m recording the name of the image and the rectangle to place it within:

However, a model doesn’t actually do anything. A controller is needed to manipulate it.

Creating a Controller Class

For my Controller class, I’ll need to create another new file that’s a subclass of NSObject. I’ve called it “GraphicController.h”. This controller will act as an in-between that analyzes graphics models for the GameWindow.

The controller needs to hold onto a list of all graphics in the game; an NSMutableArray can be used for that. The controller will also remember the GameWindow it was spawned from – which will allow for callbacks, as we’ll see momentarily.

A simple method can now add new images to the controller:

The setNeedsDisplay callback to the GameWindow ensures that its drawRect: method gets called; thus, every time a new image is added, the GameWindow is redrawn.

A final method outputs the array of GraphicModels:

Linking the MVC

Though the model and controller are complete, I still need to link them to the GameWindow. This requires a rewrite of the GameWindow class.

First, I add a GraphicController property in the header:

Then, in the main file, I initialize that controller:

Finally I rebuild the drawRect: method to draw everything that the controller knows about:

The Next Step

At this point, I’ve successfully abstracted my images class. To finish things up, I go to ViewController’s viewDidLoad, which will activate when the GameWindow is loaded. I can then draw any images I want to with the addImage:withFrame: command — and I can choose different images to load for the many different games I’m going to build with the GameWindow framework.

This is just the first step in creating a graphics framework that I can use in many games. With these bare bones, I could also create methods for manipulating my images.

That will be the topic of a follow-up post, which will build from this foundation.

Safari Books Online has the content you need

Check out these iOS books available from Safari Books Online:

iOS 5 Essentials will help you learn how to build simple, yet powerful iOS 5 applications incorporating iCloud Storage, Twitter, Core Image and Newsstand integration.
Building iOS 5 Games: Develop and Design offers real world iOS 5 examples and actual games the reader can code and play and is aimed at people who understand programming concepts but are new to iOS game development.
iOS 5 Programming Cookbook contains more than 100 new iOS 5 recipes covering iCloud, Automatic Reference Counting, storyboarding, graphics, animations, Grand Central Dispatch, threads, timers, audio and video and many other iOS 5 tools and techniques.
Assuming only a minimal working knowledge of Objective-C, and written in a friendly, easy-to-follow style, Beginning iOS 5 Development offers a complete soup-to-nuts course in iPhone, iPad, and iPod touch programming.

About the Author

  Shannon Appelcline is a versatile author and programmer. He currently works as the lead iOS developer for Skotos Tech, an online entertainment company. In the past two years, he’s written five iOS games for them, all based on tabletop releases by popular German designers. The first of these was Reiner Knizia’s Money (2010)—which has also been ported to MacOS—while the most recent was Reiner Knizia’s Modern Art: The Card Game (2011). Shannon’s two most recent books show the breadth of his interests. They are iOS4 in Action (2011), published by Manning Publications, and Designers & Dragons: A History of the Roleplaying Game Industry (2011), published by Mongoose Publishing.

Tags: Core Graphics, Data Classes, GameWindow, iOS5, MVC, Xcode,


  1.  iOS 5 Core Graphics: Adding Actions to Data Classes for Images « Safari Books Online's Official Blog
  2.  Developing Web of Power Card Game: The Duel | Mechanics & Meeples