Sparrow Framework – The Open Source Game Engine for iOS

Hi folks,

today I have another announcement for you:

Some of you will already know Stencyl and their no-code-instant-release game creation suite called Stencylworks. I am happy to inform you that they have a new product available that may very well be of interest to you: iStencyl.

iStencyl makes you create native iOS games in a no-code fashion and uses the Sparrow Framework to bring it’s games to life! Woo-ha!

Thou shalt also check out this video trailer for Feed My Zombie to see what iStencyl is capable of:

That’s it! Happy holidays!

Hi folks,

today we are very happy to brief you on something a bit aside from this blog’s default candy:

We just got word from Villain that their newest game Lil’ Birds landed in the AppStore today. Lil’ Birds allows you to breed, pet, feed, collect and share birds to your liking. It transforms your device into a feathered cuteness machine.

“But what does this have to do with Sparrow?”, you ask.

Well, for one it’s about thousands of cute little birds and we obviously love birds. But there is more to it than the eye can see:

Lil’ Birds is based on the Sparrow Framework!

Yes you heard right. All those birds are flying by the power of Sparrow. Lil’ Birds is a production of huge value done by a team of experienced game developers. This is exciting news for us since it verifies what most of us already knew:

Sparrow easily carries the weight of a large and professional game production.

By the way: The game is free as a bird and thus I recommend you check it out to see what Villain created on top of Sparrow!

Well, that’s it for today. Happy coding, happy breeding and see you soon!

Hi everyone,

Daniel has already teased this in the recent podcast about Sparrow but now it is official: Our fun little project Kabaam has hit the App Store today. Naturally it’s a single malt Sparrow App seasoned with just a little bit of UIKit.

As if that wasn’t enough happiness for today, there is one more sparrow-related thing I’d like to share that came up during development:

How to convert SPRenderTextures to UIImages

One thing Kabaam does is overlay some text bubbles onto a photo the user shot. The photos/comics can then be exported to email and diverse social platforms. In order to accomplish that the whole display tree has to be rendered to an exportable image. Although we’d love to stay 100% pure Sparrow for most of the time it makes sense to use UIKit to help us here. That’s why I extended the SPRenderTexture to allow rendering it to an UIImage. Many of you most likely already know how to do this, but maybe this snippet still helps one or the other to get earlier results.

Here is the interface extension:

@interface SPRenderTexture (RenderToImage)
- (UIImage*)renderToImage;
@end

And here is the magical part. In short, it makes use of the bundleDrawCalls method on the SPRenderTexture to get to the current GL context. It then allocates memory for the resulting image and reads the pixels from the GL context into the allocated array. After that we can feed that array to a CGDataProvider, a CGImageRef and then to an UIImage. All that’s left to do is tidy up some memory, which is unfortuantely very C-ish in this case: We have to register a releaseRawImageDataBufferCallback with the CGDataProvider in order to release the allocated array when everything is over. Check it out:

@implementation SPRenderTexture (RenderToImage)

void releaseRawImageDataBufferCallback(void *info, const void *data, size_t size)
{
	free((void*)data);
}

- (UIImage*)renderToImage
{
	__block UIImage *image = nil;

	[self bundleDrawCalls:^() {
		float scale = [SPStage contentScaleFactor];
		int width = scale * self.width;
		int height = scale * self.height;
		int nrOfColorComponents = 4; //RGBA
		int bitsPerColorComponent = 8;
		int rawImageDataLength = width * height * nrOfColorComponents;
		GLenum pixelDataFormat = GL_RGBA;
		GLenum pixelDataType = GL_UNSIGNED_BYTE;
		BOOL interpolateAndSmoothPixels = NO;
		CGBitmapInfo bitmapInfo = kCGBitmapByteOrderDefault;
		CGColorRenderingIntent renderingIntent = kCGRenderingIntentDefault;

		CGDataProviderRef dataProviderRef;
		CGColorSpaceRef colorSpaceRef;
		CGImageRef imageRef;

		@try {
			GLubyte *rawImageDataBuffer = (GLubyte *) malloc(rawImageDataLength);

			glReadPixels(0, 0, width, height, pixelDataFormat, pixelDataType, rawImageDataBuffer);

			dataProviderRef = CGDataProviderCreateWithData(NULL, rawImageDataBuffer, rawImageDataLength, releaseRawImageDataBufferCallback);
			colorSpaceRef = CGColorSpaceCreateDeviceRGB();
			imageRef = CGImageCreate(width, height, bitsPerColorComponent, bitsPerColorComponent * nrOfColorComponents, width * nrOfColorComponents, colorSpaceRef, bitmapInfo, dataProviderRef, NULL, interpolateAndSmoothPixels, renderingIntent);
			image = [UIImage imageWithCGImage:imageRef];
		}
		@finally {
			CGDataProviderRelease(dataProviderRef);
			CGColorSpaceRelease(colorSpaceRef);
			CGImageRelease(imageRef);
		}
	}];

	return image;
}

@end

As soon as we have that UIImage in our hands we can (thanks to UIKit convenience) very easily convert this into JPG or PNG format using the UIImageJPEGRepresentation and UIImagePNGRepresentation helpers.

We are very happy to inform you that Find it! 2 hit the AppStore today!

Find it! 2 is our latest game and is a full-blown 100% single-malt Sparrow App that makes use of all the cool Sparrow features. It is built as an universal App and works on iPhones and iPads as well.

There is a truckload of things we’ve experienced and learned while developing Find it! 2 and I want to fill you in on some of them now:

SPRenderTexture for performance and visual quality

Find it! 2 has a – if I may say so myself – very cool main menu animation where Polaroids are flying and fluttering into the screen. To make this look interesting and cool every time the player enters the main menu the Polaroids are created on-the-fly and in a random fashion from a huge Texture Atlas in the back. Their flying paths and target positions are random too.

So every time the player opens the main menu Sparrow digs down into this Texture Atlas and unearths about 50-150 textures from it – depending on the hardware the game is played on. A polaroid consists of a background SPImage, an SPTextField and the photo itself, which is of course another SPImage. Leaving this as is would make OpenGL throw around a huge pile of objects ergo using a lot of CPU power just for the sake of a cool main menu animation. In addition to this each object would have an aliasing problem at its edges.

Using an SPRenderTexture instead is a very easy way to fix this problem:

SPImage *background = [SPImage imageWithTexture:bgTexture];
SPImage *image = [SPImage imageWithTexture:texture];
SPTextField *text = [SPTextField
  textFieldWithWidth:background.width
  height:10 text:@"SX-70 Gamua"];

SPRenderTexture *rendered = [SPRenderTexture
  textureWithWidth:background.width
  height:background.height
  fillColor:0xAAAAAA];

[rendered drawObject:background];
[rendered drawObject:image];
[rendered drawObject:text];

Instead of 3 SP* objects we now have a single rendered texture and the devices CPU has way less to do than before. Additionally rendering the Polaroids into a single texture also improves the visual quality of the whole thing, since textures get anti-aliased pretty good when you leave it to OpenGL.

Picasso wanted!

Find it! 2 by nature brings many many photos. Each photo has to feature several differences that can be found by the player. These differences of course have to be skillfully photoshopped into the original photos. Since we are way to slow (and bad) in any image manipulation application to do hundreds of photos ourselves, we got us some help.

If you are willing to spend some money on good artwork instead of fiddling around with the paint brushes yourself there is help: As many of you know ManiacDev has a great article on how to outsource game art to freelancers. There are many very skilled people out there and although it takes up time to find the right one for your job, it is totally worth it.

GameCenter and iTunes on shore leave

Find it! 2 features in-app purchases as well as a tight integration with Apple’s GameCenter, which both are awesome services for small game developers. As you well know the production servers and the development servers of these services are separated and you are working in a development “Sandbox” while you are coding your App. This makes sense in many ways and one is that development server load must not impact production performance.

However, the Sandbox is not always behaving like the production environment:

• First of all: It’s slower. Authenticating against GameCenter in the Sandbox takes way longer than authenticating against the production server. Don’t freak out if your trunk build takes several seconds to authenticate the player against the Sandbox server. Funny thing is having a slow development Sandbox has an advantage: If your code works quite okay in the Sandbox it will work very well in production.
• Second: It’s not always available. While the production servers are virtually online 24/7 the Sandbox servers were down pretty often while developing for Find it! 2. Sometimes the whole server is down, sometimes just some services like the GameCenter matchmaking do not answer. Hint: If your SKProductsRequest does return an empty list instead of your in-app purchases, you may be experiencing exactly what I am talking about.
  So don’t wreak code havoc just because you are unable to authenticate against the GameCenter sandbox. It will be a bug in your code many times, but there is always the chance that the Sandbox is down.

So long, and thanks for all the fish

That’s it for today! Thanks for reading and if you are interested what Sparrow does for Find it! 2 find it (no pun intended) out right here.

A little late, but hey! better than never , we will have a look at the linchpin of Sparrow’s animating powers: Tweening.

What’s a Tween, you ask? Let’s have a look at Wikipedia: It tells us that tweening is “the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the key frames which help to create the illusion of motion.”

That’s about right for Sparrow too. Like e.g. in Flash/ActionScript Sparrow allows you to smoothly transition the (numerical) properties of your stage objects from an initial value N to a final value M in time X.

Tweening Object Properties

Let’s go with a simple real-world example: Imagine a nice little stage containing a blast door that is going to be shut.

For those of you who need a background story: “It’s Oct-13 in 2043. Ruth Lezz, your 25-year old female main character and down-and-dirty mercenary, just intentionally overheated the central nuclear power core of the first human colony on Mars. The automated disaster containment sub-routine of the station’s master control program requires all blast doors to be shut down immediately in order to minimize station personnel casualty numbers.” Knock yourself out!

What we are going to do is animate the closing of the blast door:

  //Create a door of the blast persuasion.
  //The initial Y value is -440 which means that the door is wide
  //open. (We are going to see 40px of the door.)
  BlastDoor *blastDoor = [[BlastDoor alloc] initWithY:-440];
  [self addChild:blastDoor];

  //Create the corresponding tween and feed him the door object,
  //state the time it takes to close and the final value for Y.
  //In our case this is 0, since we want the door to shut
  //completely.
  SPTween *tween = [SPTween tweenWithTarget:blastDoor
    time:4.0f transition:SP_TRANSITION_LINEAR];
  //Delay the tween for two seconds, so that we can see the
  //change in scenery.
  [tween setDelay:2.0f];
  //Tell the tween that it should transition the Y value to 0.
  [tween animateProperty:@"y" targetValue:0];

  //Register the tween at the nearest juggler.
  //(We will come back to jugglers later.)
  [self.stage.juggler addObject:tween];

…aaand that’s it! We now have an animated blast door that moves (closes) from Y=-440 to Y=0 in 4.0 seconds. Cool, right? But wait, it gets better!

Transition Types

Sparrow offers a variety of transition types which you can use for your tweens. A transition type defines the way the object properties value will travel from N to M, in our case from -440 to 0. Typically you will start with a linear transition (SP_TRANSITION_LINEAR) and your property value will travel from -440 to 0 in a straight fashion. There are, however, some other cool transition types that help adding fun to your animations. Here is a chart of the other currently available transition types:

For our blast door example it makes sense to let the door fall down from the ceiling instead of slowly lowering it to the floor. So instead of using SP_TRANSITION_LINEAR we are going to do this:

  //Change the transition type to an ease-out-bounce and
  //adjust the tween duration to fit our needs.
  SPTween *tween = [SPTween tweenWithTarget:securityDoor
    time:1.5f transition:SP_TRANSITION_EASE_OUT_BOUNCE];

  //Leave the rest of the code as is.

Alright! The door finally slams into the ground as one would expect it to. It feels way heavier now and heavier means more secure. We achieved that by changing only two variables of our code.

But what if Ruth Lezz needs to get off the station, hacks into the security system and stops the doors from closing? Read on…

Canceling A Tween

Sometimes it may be necessary to cancel a tween while it is already in its tweening phase. There are three ways to achieve that:

1. You can keep track of your SPTween object and remove it from its juggler when the time has come.
2. You can remove all tweens of a certain object.
3. Or you can stop the whole juggler from executing any more tweens.

We are going to use the second option and stop all tweens targeting the door as soon as Ruth Lezz has successfully hacked into the security system:

- (void) closeTheDoor {
  //Create the tween.
  SPTween *tween = [SPTween tweenWithTarget:securityDoor
    time:1.5f transition:SP_TRANSITION_EASE_OUT_BOUNCE];
  [tween animateProperty:@"y" targetValue:0];
  [self.stage.juggler addObject:tween];
}

//This method gets called when Ruth Lezz has hacked the
//security system.
- (void) onSecuritySystemHacked {
  //Remove the tween when the time has come.
  [self.stage.juggler removeTweensWithTarget:securityDoor];
}

So what we did is react to the players actions and stop the blast door from closing as soon as the security system got hacked. That’s enough for today. Keep in touch, because there is going to be more on tweens and jugglers soon!

Soon To Come

• Jugglers: What are jugglers and how to use them elegantly?
• The Stage Juggler: What is the stage juggler?
• Delaying Invocations: How am i supposed to delay method calls?