Modal Alerts for Cocos2D

Cocos2D is insanely great for game development, and a lot of otherwise complex or tedious gaming tasks are almost no-brainers here. The one thing, however, that I found less straightforward, is bringing up small alerts to ask for some user confirmation, while at the same time blocking the rest of the application.

There are actually tons of bits and pieces around that solve the one or the other part of it, but no one-shot solution as I wanted it to be. What I was looking for is:

• Small alert-box with custom design fitting to the overall game look-and-feel
• Alike support for iPad and iPhone, incl. retina
• Predefined “Ask”, “Confirm” and “Tell” type of alerts that can be easily called from within the code
• Modal operation, i.e. lock and dim the game scene and ideally have a no-hassle modal kind of control-flow within the calling code without the need for additional callbacks that make the code hard to read from there on
• Fire-and-forget operation without need for any further cleanup
• Nice animations

So what I finally came up with is actually a bit more powerful and complex than what I want to present here. But this stripped-down version is a great start to do your own further customizations, and it is fully functional and can be integrated right away. You just ask for the dialog to be brought up with your own message, and you’re done. Code that should be executed when pressing a button is written inline as a block, thus being kind of a modal control-flow schema. And if you want code to be executed right away, just put it directly after the statement itself. Asking the user for a simple confirmation is as easy as this:

[ModalAlert Ask: @"Do you want to cancel the game?"
        onLayer:self // this is usually the current scene layer
       yesBlock: ^{
           // code that should be executed on "yes" goes here 
           ...
           }
        noBlock: ^{
           // code that should be executed on "no" goes here
           ...
           }];
// control flow proceeds here right away (non-modal) ...

That’s all. Everything is encapsulated into simple class-functions and requires no allocations or anything on the caller side. There is a predefined call for a Yes/No question, an OK/Cancel confirmation and a Tell-function that is just to be confirmed with an OK-button.

In principle a semi-transparent black color layer is created that covers the whole current scene and swallows all touches, except those that should go to the dialog sprite and the buttons on it. The dialogbox itself and the button are images that fit for your purpose, and you can design them any way you like (color and size). For this sample, I provided three different sizes for iPhone retina and non-retina, and an extra one for the iPad. The non-retina size would be too small for the iPad, and HD resolution too large and would look clumsy. So from the HD retina resolution, the iPad is sized 70% of it, and the SD non-retina is as usual 50%. If you change the size you might also need to tweak some of the sizings, however they are relative to the dialog box size and should fit at least as long as you approximately retain the height/width relation.

Beside the fact that you now have a fully functional base to start from for the ultimate and universal alerting library, you can take away some interesting things from the code, if you are new to Cocos2D or iPhone programming in general, like animations and block programming (which BTW is only available starting with iOS 4).

Where could you go from here? Include localization for the predefined buttons, provide more formats, provide a function where you can also customize the button texts, center the message text vertically, draw all boxes dynamically using OpenGL (instead of having to provide images), include a nice image in the dialog box to make it more friendly, etc…there is tons you could elaborate on. But probably you won’t even need much more.

So here is the coding of the ModalAlert class. I leave out the *.h file here, because it is pretty unspectacular. All the code files and the required images for the sample can be downloaded as ZIP file to get you jump-started.

 
// ModalAlert.m
// 
// Created by Hans-Juergen Richstein
// Copyright 2012 ROMBOS. All rights reserved. 

#import "ModalAlert.h"
#import "cocos2d.h"

// constants
#define kDialogTag 1234
#define kAnimationTime 0.4f
#define kDialogImg @"dialogBox.png"
#define kButtonImg @"dialogButton.png"
#define kFontName @"MarkerFelt-Thin"

// class that implements a black colored layer that will cover the whole screen 
// and eats all touches except within the dialog box child 
@interface CoverLayer : CCLayerColor {
}
@end
@implementation CoverLayer
- (id)init {
    self = [super init];
    if (self) {
        [self initWithColor:ccc4(0,0,0,0)
                      width:[CCDirector sharedDirector].winSize.width
                     height:[CCDirector sharedDirector].winSize.height];
        self.isTouchEnabled = YES;
    }
    return self;
}

- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
    CGPoint touchLocation = [self convertTouchToNodeSpace: touch];
    CCNode *dialogBox = [self getChildByTag: kDialogTag];

    // eat all touches outside of dialog box
    return !CGRectContainsPoint(dialogBox.boundingBox, touchLocation);
}

- (void) registerWithTouchDispatcher {
    [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:INT_MIN+1 swallowsTouches:YES];
}
@end

// the actual ModalAlert implemenation class
@implementation ModalAlert

// this is called to gracefully close the alert, cleanup everything
// and call the according block belonging to the pressed button
+ (void) CloseAlert: (CCSprite*) alertDialog onCoverLayer: (CCLayer*) coverLayer executingBlock: (void(^)())block {
    // shrink dialog box 
    [alertDialog runAction:[CCScaleTo actionWithDuration:kAnimationTime scale:0]];

    // in parallel, fadeout and remove cover layer and execute block 
    // (note: you can't use CCFadeOut since we don't start at opacity 1!) 
    [coverLayer runAction:[CCSequence actions:
                           [CCFadeTo actionWithDuration:kAnimationTime opacity:0],
                           [CCCallBlock actionWithBlock:^{
                                [coverLayer removeFromParentAndCleanup:YES];
                                if (block) block();
                            }],
                           nil]];
}

+ (void) ShowAlert: (NSString*) message onLayer: (CCLayer *) layer
          withOpt1: (NSString*) opt1 withOpt1Block: (void(^)())opt1Block
           andOpt2: (NSString*) opt2 withOpt2Block: (void(^)())opt2Block {

    // create the cover layer that "hides" the current application     
    CCLayerColor *coverLayer = [CoverLayer new];
    [layer addChild:coverLayer z:INT_MAX]; // put to the very top to block application touches
    [coverLayer runAction:[CCFadeTo actionWithDuration:kAnimationTime opacity:80]]; // smooth fade-in to dim with semi-transparency

    // open the dialog 
    CCSprite *dialog = [CCSprite spriteWithFile:kDialogImg];
    dialog.tag = kDialogTag;
    dialog.position = ccp(coverLayer.contentSize.width/2, coverLayer.contentSize.height/2);
    dialog.opacity = 220; // make it a bit transparent for a cooler look

    // add the alert text
    CGSize msgSize = CGSizeMake(dialog.contentSize.width * 0.9, dialog.contentSize.height * 0.55);
    float fontSize = (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)?42:30;

    CCLabelTTF *dialogMsg = [CCLabelTTF labelWithString:message dimensions: msgSize alignment:UITextAlignmentCenter
                                               fontName:kFontName fontSize:fontSize];
    dialogMsg.position = ccp(dialog.contentSize.width/2, dialog.contentSize.height * 0.6);
    dialogMsg.color = ccBLACK;
    [dialog addChild: dialogMsg]; 

    // add one or two buttons, as needed
    CCMenuItemSprite *opt1Button = [CCMenuItemSprite itemFromNormalSprite:[CCSprite spriteWithFile: kButtonImg]
                                                             selectedSprite:[CCSprite spriteWithFile: kButtonImg]
                                                                    block:^(id sender){
                                                                        // close alert and call opt1block when first button is pressed                                                                         [self CloseAlert:dialog onCoverLayer: coverLayer executingBlock:opt1Block];
                                                                    } ];
    opt1Button.position = ccp(dialog.textureRect.size.width * (opt2 ? 0.27f:0.5f), opt1Button.contentSize.height * 0.8f);

    CCLabelTTF *opt1Label = [CCLabelTTF labelWithString:opt1 dimensions:opt1Button.contentSize alignment:UITextAlignmentCenter
                                               fontName:kFontName fontSize:fontSize];
    opt1Label.anchorPoint = ccp(0, 0.1);
    opt1Label.color = ccBLACK;
    [opt1Button addChild: opt1Label];    

    // create second button, if requested
    CCMenuItemSprite *opt2Button = nil;
    if (opt2) {
        opt2Button = [CCMenuItemSprite itemFromNormalSprite:[CCSprite spriteWithFile: kButtonImg]
                                             selectedSprite:[CCSprite spriteWithFile: kButtonImg]
                                                      block:^(id sender){
                                                          // close alert and call opt2block when second button is pressed
                                                          [self CloseAlert:dialog onCoverLayer: coverLayer executingBlock:opt2Block];
                                                      } ];

        opt2Button.position = ccp(dialog.textureRect.size.width * 0.73f, opt1Button.contentSize.height * 0.8f);

        CCLabelTTF *opt2Label = [CCLabelTTF labelWithString:opt2 dimensions:opt2Button.contentSize alignment:UITextAlignmentCenter
                                                   fontName:kFontName fontSize:fontSize];
        opt2Label.anchorPoint = ccp(0, 0.1);
        opt2Label.color = ccBLACK;
        [opt2Button addChild: opt2Label];
    }

    // add the menu to the dialog
    CCMenu *menu = [CCMenu menuWithItems:opt1Button, opt2Button, nil];
    menu.position = CGPointZero;

    [dialog addChild:menu];
    [coverLayer addChild:dialog];

    // open the dialog with a nice popup-effect 
    dialog.scale = 0;
    [dialog runAction:[CCEaseBackOut actionWithAction:[CCScaleTo actionWithDuration:kAnimationTime scale:1.0]]];
}

+ (void) Ask: (NSString *) question onLayer: (CCLayer *) layer yesBlock: (void(^)())yesBlock noBlock: (void(^)())noBlock {
    [self ShowAlert:question onLayer:layer withOpt1:@"Yes" withOpt1Block:yesBlock andOpt2:@"No" withOpt2Block:noBlock];
}

+ (void) Confirm: (NSString *) question onLayer: (CCLayer *) layer okBlock: (void(^)())okBlock cancelBlock: (void(^)())cancelBlock {
    [self ShowAlert:question onLayer:layer withOpt1:@"Ok" withOpt1Block: okBlock andOpt2:@"Cancel" withOpt2Block:cancelBlock];
}

+ (void) Tell: (NSString *) statement onLayer: (CCLayer *) layer okBlock: (void(^)())okBlock {
    [self ShowAlert:statement onLayer:layer withOpt1:@"Ok" withOpt1Block: okBlock andOpt2:nil withOpt2Block:nil];
}

@end

Advertisement