All posts in Tutorials

We’ve been using SpriteKit for some projects recently and wanted to document it’s use as a retrospective. SpriteKit is a 2D “game engine” that is very simple to use, but at the same time complex creations can be crafted.

When it was first announced we used it for an initial App for kids, Peek-A-Boo so when we had an idea for a new game we turned straight to SpriteKit.

Some of the drawbacks to using SpriteKit mean you are limited to targeting devices running ios 7+ and you can’t (easily) port your product to Android, but for ease of use and speed these compromises are worth it.

SpriteKit for Prototyping
If you have an idea for a 2D game then SpriteKit is a great tool for getting something up and running very quickly. You can use its easy to use animation and sprite systems and combine them with the input control provided by gesture recognisers.

Audio
Sound in SpriteKit is also very easy and slots nicely into the Action engine. Sounds are added to nodes and run as an action just like any other. It means they can be combined into an action sequence, or played independently. Importantly, sounds can be flagged as instantly completed, or following actions can be forced to wait until the sound has completed, meaning you don’t need to worry about the length of the sound.

Art Style
For Monster Tower we wanted to create a hand drawn style to give it some character. Initially Gareth, our talented artist turned to his Wacom and did what he does best. The results looked interesting, but lacked soul. So Gareth whipped out some old school Crayons and paper instead. The results were great, suddenly the game came to life. We wanted to try and push the style further so tried using SpriteKits inbuilt sprite sheet animation action to give the characters some movement. Gareth redrew the same sprite a few times and we animated between them. Initially the difference between the frames was too much and it look jarring, but with some trial and error with both the assets and the frame rate we got a result we are really happy with.

Fonts
A problem created with the animated texture approach for the style was that suddenly anything that wasn’t dynamic looked out of place. Although we ignored the text for a while, for lack of a good solution, eventually it stood out too much and needed to be tackled. We explored creating our own font, but found some good free hand drawn fonts we were able to use. Some of the things we tried to blend the fonts in included changing the colours of the SKLabel, randomly adjusting sizes and positions of the text along with changing the strings from capitals to lowercase on a timer. Changing the case of the text worked best, but still looked odd as everything was changing at the same time just didn’t look “right”. Eventually we had to bite the bullet and do away with straight SKLabel nodes as they weren’t flexible enough and we created our own variation. These consisted of an skspritenode that had many sklabelnodes, one for each character of the string. This meant we can loop through and adjust the individual characters position, size and case independently to create movement that is more fluid and fitting for the style of the rest of the game.

To finish the effect off we did go in and adjust some of the font characters to polish the effect off. We ended up with a flexible system that could replace any text throughout the game.

If you are having problems adding custom fonts to XCode for use in iOS projects, ensuring that you’ve added them to the projects resources, have correctly referenced their filename in the project’s .plist file and setup your custom font with:

UIFont *customfont = [UIFont fontWithName:@"font name" size:16]

If it’s still not working then check the string you’re using for the font. It has to match what font name XCode has for the font, not the font’s name or even what Font Book says the name is for the font. Here’s an easy way to log all of the fonts included in your project and therefore use the correct reference:

for ( NSString *familyName in [UIFont familyNames] ) { NSLog(@"Family %@", familyName); NSLog(@"Names = %@", [UIFont fontNamesForFamilyName:familyName]); }

Easy.

Here’s some more discussions on Stack Overflow with various other problems and solutions.

An app we’re working on required the background of a UIView to animate through a number of colours in a loop and we wanted to share the solution with you.

Create an array of as many colours as you want and set-up your array index in your view (we did it in viewDidLoad but it could be anywhere)

self.backgroundColours = [NSArray arrayWithObjects:
[UIColor colorWithRed:64/255.0 green:70/255.0 blue:69/255.0 alpha:1],
[UIColor colorWithRed:221/255.0 green:71/255.0 blue:77/255.0 alpha:1],
[UIColor colorWithRed:221/255.0 green:77/255.0 blue:117/255.0 alpha:1],
[UIColor colorWithRed:227/255.0 green:124/255.0 blue:168/255.0 alpha:1],
[UIColor colorWithRed:228/255.0 green:136/255.0 blue:115/255.0 alpha:1], nil];

self.backgroundLoop = 0;

Then create an animateWithDuration function that calls itself:

- (void) animateBackgroundColour
{

	if (self.backgroundLoop < self.backgroundColours.count - 1)
	{
		self.backgroundLoop ++;
	}
	else
	{
		self.backgroundLoop = 0;
	}

	[UIView animateWithDuration:4 delay:0.5 options:UIViewAnimationOptionAllowUserInteraction
					 animations:^(void)
					{
						self.backgroundView.backgroundColor = [self.backgroundColours objectAtIndex:self.backgroundLoop];
					}
					 completion:^(BOOL finished) {
						 if(finished)
						 {
							[self animateBackgroundColour];
						 }
	}];
}

And that’s it. The UIViewAnimationOptionAllowUserInteraction is important so that input can be used for the rest of the interface as by default when an animation is playing interaction is disabled. You can include as many colours as you require. If you need to stop the animation then either call:

[myView.layer removeAllAnimations];

Which will remove all of the animations currently playing, which is fine if this is the only one. Alternatively you can start a new , very short, animation on the background colour that returns it to its original (or new) state. This will override the looping animation nicely. Here’s a few tricks people have used to do this very thing, you may find one or more works for your situation.

We recently had a mobile project with lots of video content, all of which needed to be subtitled and work on the iPhone and iPad.

Many hours of research, hair pulling and frustration later it became clear that the Closed Captioning world is a broken, horrible place to be. We had the videos, we had the transcript but there seemed no way of putting them together in a timely and cost effective fashion. The business model in the closed captioning world (like many others) is make it really complicated so that you either have to pay someone to do it (at a cost of around £10 per minute of video) or buy software with a price tag on multiple thousands that although sounds like the saviour, is actually just makes things even more complex.

The problem? Multiple incompatible formats of subtitles, multiple broadcast formats, all requiring their own solution and no-one place to find out reliable, up-to-date information from. Eventually we got it figured out, a nice in-expense (but not free) way to get your own closed caption service up and running.

Continue Reading →