This shows you the differences between two versions of the page.
manual_v1:adding_uikit_elements_on_top_of_sparrow [2013/03/05 10:19] – external edit 127.0.0.1 | manual_v1:adding_uikit_elements_on_top_of_sparrow [2013/05/25 12:43] (current) – [Adding UIKit Elements on top of Sparrow] daniel | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Adding UIKit Elements on top of Sparrow ====== | ||
+ | |||
+ | //The following article assumes that your game is based on the Scaffold project that comes with Sparrow 1.3.// | ||
+ | |||
+ | The scaffold project contains an additional '' | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | In this tutorial, we will add a simple '' | ||
+ | |||
+ | While the sample itself does not look super-useful, | ||
+ | |||
+ | This is how the app looks like in its unmodified state: | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | ===== Adding the Switch ===== | ||
+ | |||
+ | The world of Sparrow and the world of UIKit are separated. As the image at the top of this article shows, their content is placed within 2 different layers: | ||
+ | |||
+ | * a '' | ||
+ | * an '' | ||
+ | |||
+ | The '' | ||
+ | |||
+ | Currently, when you touch the egg, a sound is played. Let's say we want to show the UIKit switch instead. To do this, we update the event handler and dispatch a custom event instead: | ||
+ | |||
+ | <code objc> | ||
+ | - (void)onEggTouched: | ||
+ | { | ||
+ | NSSet *touches = [event touchesWithTarget: | ||
+ | if ([touches anyObject]) | ||
+ | { | ||
+ | SPEvent *event = [SPEvent eventWithType: | ||
+ | [self dispatchEvent: | ||
+ | |||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Why do we dispatch an event here? Because this is the only way we can communicate with the '' | ||
+ | |||
+ | The '' | ||
+ | |||
+ | <code objc> | ||
+ | - (id)initWithSparrowView: | ||
+ | { | ||
+ | if ((self = [super init])) | ||
+ | { | ||
+ | // ... | ||
+ | | ||
+ | [sparrowView.stage addEventListener: | ||
+ | forType: | ||
+ | } | ||
+ | return self; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Note that the stage is a property of the Sparrow view, and that's our connection to the Sparrow world. The event we dispatched above will bubble up to the stage, thus we can listen to the event through the stage. | ||
+ | |||
+ | We're going to need an event listener, of course. Add the following methods to the '' | ||
+ | |||
+ | <code objc> | ||
+ | - (void)showSwitch: | ||
+ | { | ||
+ | if (!mSwitch) | ||
+ | { | ||
+ | mSwitch = [[UISwitch alloc] initWithFrame: | ||
+ | [mSwitch addTarget: | ||
+ | forControlEvents: | ||
+ | | ||
+ | [self.view addSubview: | ||
+ | [mSwitch release]; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | - (void)onSwitchValueChanged | ||
+ | { | ||
+ | NSLog(@" | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Here, we create a switch and display it at the top left of the screen. Furthermore, | ||
+ | |||
+ | That '' | ||
+ | |||
+ | <code objc> | ||
+ | @interface ViewController : UIViewController | ||
+ | { | ||
+ | @private | ||
+ | SPView *mSparrowView; | ||
+ | UISwitch *mSwitch; // <-- here | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | And add the function declaration to the same file: | ||
+ | |||
+ | <code objc> | ||
+ | - (id)initWithSparrowView: | ||
+ | - (void)showSwitch: | ||
+ | </ | ||
+ | |||
+ | Let's start up the project and see what happens. After tapping the egg, the switch should appear, and Xcode should log 1s and 0s when its state changes. | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | ===== Communicating with our Game ===== | ||
+ | |||
+ | The previous step showed us how to send a message from Sparrow to the '' | ||
+ | |||
+ | First, we will update the method that is called when the switch changes its value: | ||
+ | |||
+ | <code objc> | ||
+ | - (void)onSwitchValueChanged | ||
+ | { | ||
+ | Game *game = (Game *)[mSparrowView.stage childAtIndex: | ||
+ | [game colorizeEgg: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Let's see what is going on here: | ||
+ | |||
+ | * We know that our stage is really the '' | ||
+ | * Now that we can access the game, we can call any method on it. Here, we colorize it. | ||
+ | |||
+ | The '' | ||
+ | |||
+ | <code objc> | ||
+ | // add a new method declaration in the file ' | ||
+ | - (void)colorizeEgg: | ||
+ | |||
+ | // then add the method in the class implementation, | ||
+ | - (void)colorizeEgg: | ||
+ | { | ||
+ | SPImage *egg = (SPImage *)[self childAtIndex: | ||
+ | egg.color = colorize ? SP_RED : SP_WHITE; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | (It would have been cleaner to save the egg object as a member variable instead of accessing the child at index ' | ||
+ | |||
+ | That should be it! Indeed, we have succeeded in communicating up from the '' | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | Cool, isn't it? Now you can add any other UIKit element just like that. | ||
+ | |||
+ | |||