Feathered Scrolling

I think 2.0 really is an improvement over the original game in a number of ways. One aesthetic improvement depends on technology.

Our original multimedia engine, mTropolis, didn’t support alpha. A pixel on the screen came from only one asset. But iOS supports alpha blending, so we can have translucent effects.

iOS is also a multi-touch OS, designed for small screens. Scrollable areas don’t have always-visible scroll bars, so sometimes it can be hard to know that they can be scrolled. There are a number of approaches one can take to telegraph* this to the user. One is to fade the edges of the list. King of Dragon Pass does this.

The idea is that the list smoothly fades out when it can be scrolled. It may be a subtle cue, but it looks better than a hard crop. (And in my opinion, looks much better than drawing a box around the list, which we usually had to do in the original.) The list above is feathered on both top and bottom.

The implementation is a UIView that embeds a UIScrollView, and sets a layer mask. It’s the scroll view’s delegate, and changes the mask so there’s no feathering if the view can’t scroll in a particular direction. Here’s what one of the key methods looks like:

- (void)featherTop

{

if (fMaskStyle == kFeatherTop)

return;

fMaskStyle = kFeatherTop;

// Set up a mask to fade just top

CAGradientLayer* gradientMask = [CAGradientLayer layer];

gradientMask.bounds = self.layer.bounds;

gradientMask.position = CGPointMake([self bounds].size.width / 2, [self bounds].size.height / 2);

NSObject* transparent = (NSObject*) [[UIColor clearColor] CGColor];

NSObject* opaque = (NSObject*) [[UIColor blackColor] CGColor];

[gradientMask setColors: [NSArray arrayWithObjects: transparent, opaque, opaque, nil]];

[gradientMask setLocations: [NSArray arrayWithObjects:

[NSNumber numberWithFloat: 0.0],

[NSNumber numberWithFloat: kPickListFeather / self.bounds.size.height],

[NSNumber numberWithFloat: 1.0],

nil]];

self.layer.mask = gradientMask;

}

And, here’s what the effect looks like up close.

The iPhone screen is really small, and you need to pay attention to every pixel. Polish like this is really important. It may be subtle, but it just makes the app feel a little better.

* OK, I really wanted to use this word because its meaning is now so divorced from the original literal meaning.