All posts in Tutorials

Next Metro Nexus Timetable for iOS and Apple Watch Features

Next Metro from Central to Monkseaton stations

Apart from actually wanting to have a Timetable App (download) that looked good and worked well for the Nexus Metro system in Newcastle, it was also a good excuse to try out some new technologies and test out features added to iOS9 and the Apple Watch. Here’s a breakdown of the some of those features and how they’ve been implemented.

Next Metro Main Features


Complications get their name from the traditional watch industry and mean anything on the face that isn’t the (main) time. I like to think of them as glances as you glance down at your watch to see them. Now Apple also has Glances, but they’re a forgotten, (at least miss-named) feature of the watch. It’s not a glance if you have to swipe through 5 screens to get to it. We do have a glance for Next Metro, but it’s not something that gets used much.

Despite their name, Apple watch Complications are supposed to be easy. In fact, they’re not. Well they are, but they aren’t at the same time. There’s a bit to understand to get them working in the way you intend and a fair few methods that need to implemented correctly to get them working. It would be a whole blog post in itself to explain, but the important stuff is:

  • The start time for the next complication is at the end time of the previous event, not the start time for the event, important to counting down to the Next Metro.
  • Implement every callback and request (there’s a lot) otherwise your complications will stop working after a period, like when the initial returned events run out
  • Complications can be updated based on users location and external events, so keep them current
  • There is a limit as to how often you can update a complication, although its undocumented, so update only when you have to. It’s also expensive, battery wise so think about the user too. We update the Next Metro complication when a location update triggers a jump to a new journey. It’s not as responsive as it should be, but works most of the time.
  • There’s nothing saying that each complication type has to show the same information, you can customise the amount and even what you show per complication style. That way two complications can be shown simultaneously on a watch face from your app showing different information
  • Use NSDate.distantFuture() for getTimelineEndDateForComplication if you have events that never end (like a Metro Timetable).
  • It’s not possible to combine TextProviders using Swift (as of writing). Use this Obj-C workaround for now if you want say a CLKRelativeDateTextProvider combined with CLKSimpleTextProvider.

3D Touch Shortcuts

The ability to jump to a place in an App from a shortcut on its icon is one of the best new features of the iPhone6S + iPhone6SPlus devices (just behind Live Photos). It can really speed up your access, from making a quick phone call to diving right into writing a new email. Next Metro has this feature implemented but takes it further. We order your journeys based on the distance from the start station and use this information to update the 3D Touch shortcuts to link you directly to your nearest journey. This feature is not something we’ve seen being used very often, or well, but used correctly it takes the shortcuts to the next level of immediacy and relevance. To do so, simply update UIApplication.sharedApplication().shortcutItems when you get an update (location or information). Here’s a full guide to how to get this working.


The final ‘cool’ feature of Next Metro is the ability to search for your journeys as they’ve all been indexed (CSSearchableIndex.defaultSearchableIndex().indexSearchableItems) and NSUserActivity when you are navigating the App so terms like ‘metro monument’ or ‘next central’ will show up in your search results and allow you to deep link directly to the journey within the Next Metro App. The next stage for this is to update the content with the next metro information in real time to make it even more useful.

SpriteKit iOS7: An Introduction

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.

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.

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.

Custom fonts in XCode and iOS

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]); }


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

Looping background colours of UIView

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 ++;
		self.backgroundLoop = 0;

	[UIView animateWithDuration:4 delay:0.5 options:UIViewAnimationOptionAllowUserInteraction
						self.backgroundView.backgroundColor = [self.backgroundColours objectAtIndex:self.backgroundLoop];
					 completion:^(BOOL 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.

Closed Captioning

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 →

iBooks Author

As soon as iBooks Author was introduced our minds boggled at what the possibilities were, outside of the textbooks that Apple expect you to use it for obviously.

So we set about creating some content and the result is an interactive version of our portfolio, that includes images, 3D models, Google Maps, Twitter feeds and a whole host of other cool functionality, that makes our work look pretty good!

Continue Reading →

Flash Enterprise Builds

We work with a lot of different clients here at Fluid Pixel, when we aren’t developing our own stuff, and sometimes that could mean a whole lot of different UDID’s getting sent to us so that our clients can have a look at the Work In Progress (WIP) and test out what we’re developing for them. This can be a bit of a problem as Apple only allows 100 Devices to be registered per year per developer account, and these tend to run out pretty quickly.

The solution for us was to get an Enterprise Developers account as this allows us to do an enterprise distribution build that lets us avoid having to register any UDID’s also we can distribute the WIP build to clients wirelessly through our own Development website, all through the browser on their iOS device.

Continue Reading →