Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
manual:adding_uikit_elements_on_top_of_sparrow [2014/08/06 13:41]
178.219.160.178 [Adding UIKit Elements on top of Sparrow]
manual:adding_uikit_elements_on_top_of_sparrow [2014/08/25 08:32] (current)
daniel Removed vandalism ...
Line 1: Line 1:
 +====== Adding UIKit Elements on top of Sparrow ======
  
 +Sparrow renders all its contents directly into the ''​view''​ object of its ''​SPViewController''​. Since the ''​view''​ is a normal ''​UIView''​ object, you can add any conventional UIKit view objects on top of Sparrow. The UIKit objects will always be drawn on top of the Sparrow elements, though; you cannot place Sparrow elements on top of UIKit elements.
 +
 +{{ :​manual:​scaffold_layers_v2.png?​width=450px |}}
 +
 +===== Mission Objective =====
 +
 +In this tutorial, we will add a simple ''​UISwitch''​ object on top of Sparrow. Changing the state of the switch will then affect the color of an object within the Sparrow display tree. 
 +
 +While the sample itself does not look super-useful,​ it will show everything you need to know to be able to combine UIKit and Sparrow elements in interesting ways.
 +
 +This is how the scaffold app looks like in its original state:
 +
 +{{ :​manual:​scaffold_startup_unmodified.png?​nolink&​width=165 |}}
 +
 +===== Adding the Switch =====
 +
 +The unmodified version of the Scaffold project plays a sound when you touch the bird. Let's say we want to show the UIKit switch instead. To do this, we add a new method call to the event handler.
 +
 +<code objc>
 +- (void)onImageTouched:​(SPTouchEvent *)event
 +{
 +    NSSet *touches = [event touchesWithTarget:​self andPhase:​SPTouchPhaseEnded];​
 +    if ([touches anyObject])
 +    {
 +        [self showSwitch];​
 +    }
 +}
 +</​code>​
 +
 +The ''​showSwitch''​ method is responsible for adding that switch. For this to happen, add the member variable ''​_switch''​ to the class, and implement the ''​showSwitch''​ method like this:
 +
 +<code objc>
 +@implementation Game
 +{
 +    SPSprite *_contents;
 +    UISwitch *_switch; // <- Add the member variable here
 +}
 +
 +- (void)showSwitch
 +{
 +    if (!_switch)
 +    {
 +        _switch = [[UISwitch alloc] initWithFrame:​CGRectMake(15,​ 15, 0, 0)];
 +        [_switch addTarget:​self action:​@selector(onSwitchValueChanged)
 +                 ​forControlEvents:​UIControlEventValueChanged];​
 +                 
 +        [Sparrow.currentController.view addSubview:​_switch];​
 +    }
 +}
 +
 +- (void)onSwitchValueChanged
 +{
 +    NSLog(@"​switch value: %d", _switch.isOn);​
 +}
 +</​code>​
 +
 +This is where it gets interesting! Creating the ''​UISwitch''​ is straight-forward;​ just init the class and add a UIKit-style event handler.
 +
 +But how do we get access to the basic UIKit view object? In Sparrow 2, you can access that object from anywhere in your code like this:
 +
 +<code objc>
 +SPViewController *viewController = Sparrow.currentController;​
 +UIView *view = currentController.view;​
 +</​code>​
 +
 +The ''​currentController''​ method of the ''​Sparrow''​ class always points to the view controller you created in the Application delegate. And that controller contains a reference to the ''​UIView''​ object it renders into. Thus, you can easily access that view from anywhere in your game with the one-liner we're using in the ''​showSwitch''​ method.
 +
 +Now let's start up the project and see what happens. After tapping the bird, the switch should appear, and Xcode should log 1s and 0s when its state changes.
 +
 +{{ :​manual:​scaffold_with_switch.png?​165 |}}
 +
 +===== Updating the Bird =====
 +
 +To make it a little more interesting,​ we modify the event handler so it changes the color of the bird.
 +
 +<code objc>
 +- (void)onSwitchValueChanged
 +{
 +    NSLog(@"​value:​ %d", _switch.isOn);​
 +    ​
 +    SPImage *bird = (SPImage *)[_contents childAtIndex:​2];​
 +    bird.color = _switch.isOn ? SP_RED : SP_WHITE;
 +}
 +</​code>​
 +
 +(It would have been cleaner to save the bird object as a member variable instead of accessing the child at index '​2',​ but I'll leave that as an exercise for you ;-) ).
 +
 +{{ :​manual:​scaffold_active_switch.png?​165 |}}
 +
 +That should be it! You successfully added an UIKit object on top of Sparrow and are using it to modify a Sparrow display object! Cool, isn't it? Now you can add any other UIKit element just like that.
 +
 +===== Universal Apps =====
 +
 +There'​s one more thing you need to take care of. If you are developing a universal application with the ''​doubleOnPad:''​ strategy of Sparrow, the coordinate system of UIKit won't be the same as that of Sparrow. Remember, Sparrow will double the content scale factor in that case (it's called ''​doubleOnPad:''​ for a reason), but UIKit doesn'​t know about that.
 +
 +For this reason, you have to multiply the coordinates of your UIKit objects by a certain factor; on the iPad (both retina and non-retina),​ that factor will be ''​2.0''​.
 +
 +<note idea>
 +To find out the required multiplication factor at runtime, you can simply divide "​Sparrow.contentScaleFactor"​ by \\
 +"​Sparrow.currentController.view.contentScaleFactor"​.
 +</​note>​
 +
 +Also note that some standard interface elements (e.g. switches) have a fixed size and should not be scaled. You have to take that into account when you place those objects on the screen.
 +
 +----
 +
 +//Continue to [[Dynamic Textures]]//​
  manual/adding_uikit_elements_on_top_of_sparrow.txt · Last modified: 2014/08/25 08:32 by daniel
 
Powered by DokuWiki