Using Gesture Recognizers with Cocos2D and CCNode + SFGestureRecognizer

One of the most interesting and useful features that iOS includes is the gesture recogniser. Gesture recognisers are objects that are attached to views, and look for specific patterns of touches. When a gesture recogniser notices that the user has interacted in the way that it’s looking for, it notifies a delegate.

Prior to gesture recognisers, handling complex gestures like pinching or rotation was a lot harder than it had to be. Time was, developers had to manually track the touches involved in a gesture, and measure how they were moving over time; nowadays, we just do this:

And then have a method that gets run when the user interacts with the view with a rotation gesture:

Gesture recognisers are one of those APIs that are completely obvious once you think about them, and solve a potentially tricky problem very cleanly. However, gesture recognisers have to work within the bounds of how views in iOS work, which can have some interesting consequences for using them in games.

To put it briefly: how can we use gesture recognisers in OpenGL-based games?

Here’s the problem: gesture recognisers work by being attached to views; when a touch lands on the screen, UIKit determines which view the finger belongs to, and this information is used for tracking gestures.

However, all OpenGL games do their main work using a single view - the OpenGL view in which all rendering takes place. This is true regardless of whether you’re drawing complex 3D graphics or simple 2D sprites. And this can mean that gesture recognisers are trickier to do, because when the finger lands on the screen, UIKit will say, “hey, the view that was touched was the OpenGL view! Job done, you’re welcome, see you later!”

So, if we want gesture recognisers, and we’re drawing using a single OpenGL view, what needs to happen is this that gesture recognisers need to be added to the OpenGL view, but are limit the areas in which they’ll look for touches to areas that depend on what’s happening in the game.

This is possible through the use of the gestureRecognizer:shouldReceiveTouch: method in the UIGestureRecognizerDelegate protocol. If a delegate implements this method, it’s possible to make a recogniser only track touches in certain areas.

This is the approach taken by Krzysztof Zabłocki’sCCNode+SFGestureRecognizers, which is a zlib-licensed extension to Cocos2D. CCNode+SFGestureRecognizers performs some very clever hacks, including dynamically creating classes that operate as delegates and using the Objective-C runtime’s new associated object support, that allow you to add gesture recognisers directly to CCNodes.

We’re using CCNode+SFGestureRecognizers in Leonardo’s Moon Ship, an adventure game that we’re looking forward to talking about further in the coming weeks and months, to support dragging items from the player’s inventory onto items in the game world.


Swipe Conference 2012

Jon from Secret Lab presenting at Swipe Conference 2012
Jon from Secret Lab presenting at Swipe Conference 2012

Last week in Sydney was the second ever Swipe Conference –– an Australian iOS and OS X developer event. Secret Lab was again in attendance and, as always, the Apple developer community was great fun to hang out with and learn from –– and the organisers, Jake MacMullin, Mark Aufflick and Sean Woodhouse really put on a fantastic event. We were also again fortunate enough to have a chance to contribute to the conference (Paris spoke at the first ever Swipe Conference, in Melbourne last year), with Jon presenting Cocos2D for Fun and Profit, a quick guide to the Cocos2D graphics library. Designed as a fast introduction to this time-saving library, this talk leads the audience from a minimal starting point to a full game.

We're incredibly fond of Cocos2D, as it provides a very nice middle option for people who want more power than what UIKit can provide, but don't want to deal with the.. joy that is OpenGL. With Cocos2D, it's straightforward to create a scene comprising a number of quads, and even more trivial to animate these quads in useful ways.

We've uploaded the code and slides to GitHub and Speakerdeck, and encourage you to take a look! We had a number of people approach us after the talk and mention that they were now interested in making games with this library, so hooray, we're sharing the love!

We also took a lot of photos at Swipe Conference –– you can find them on Flickr.