Question

I am working on a children’s book app and would like to dynamically populate speech bubble(s) for character dialogues as shown in attached screenshots. Screenshots are from Cinderella app which was developed using Cocos2D (or 3D) I guess. However, I would like to achieve this functionality using objective-c and iOS sdk.

One approach would be:

Calculate the size of the text given a font and size (using the NSString method sizeWithFont:constrainedToSize:), then draw a rounded rectangle (using CALayer) to enclose that size.

For drawing rounded rectangle, set up a CALayer with a background color, border width and border color and color radius, and add that to a UIView object. That would give a speech bubble effect very easily.

Now, how would I get a corner that pointed to the character’s mouth? How do I pop-out and pop-in the CALayer from character’s mouth, how would I implement this animation? My main scene (illustration) would be an UIImageview and this dialogue pop-op should appear from character’s mouth in a animated way and after few seconds it should disappear as if its going back in character’s mouth. You suggestions would be greatly appreciated.

If you are aware of some sample code/article some place, please route me accordingly.

Here is a video link of the app which shows how character dialogues pop-in and out as speech bubble: http://www.youtube.com/watch?v=umfNJLyrrNg

Answer 1

Another way of doing this is through the use of images with cap insets. Take a look at the UIImage method:

resizableImageWithCapInsets:

Basically you can create an image of a minimum sized bubble, and have it stretch indefinitely while maintaining the look of the ‘bubble’ borders.

The code below specifies an image where 12 pixels on the top, left, bottom and right be preserved when stretching/resizing the image:

UIImage *bubble = [[UIImage imageNamed:@"bubble.png"] 
                            resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)];
UIImageView *imgView = [[[UIImageView alloc] initWithImage:bubble] autorelease];
imgView.frame = CGRectZero;

Animating the size change of a UIImageView comes for free:

[UIView animateWithDuration:0.3
                 animations:^(void) {
                     imgView.frame = CGRectMake(50, 50, 200, 100);
                 } completion:^(BOOL finished) {

                 }];