AmpKit Assets for the iPad Retina Display

I just finished doing a batch of AmpKit gear images for the new iPad Retina display, and was amazed at the clarity they provide at the larger resolution.

These are the stack view images at 1x and 2x: Click to see the full sized version

UITableView Parallax Background a la Path

Path does a clever little parallax trick when you overscroll the main timeline view. This effect gives a nice sense of depth between the tableview and background image.

Reproducing it is quite easy, and only requires a few entry points.

The gist: give the UITableView a transparent header, through which we see the positioned background image. When the user scrolls, if the scroll offset is negative, position the underlying image accordingly.

1. Add a UIImageView behind the UITableView and offset it a bit vertically from its natural state. This gives some room for it to move vertically and still be onscreen.

- (void)viewDidLoad {
    [super viewDidLoad];

    // Create an empty table header view with small bottom border view
    UIView *tableHeaderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 0.0, self.view.frame.size.width, 180.0)];
    UIView *blackBorderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 179.0, self.view.frame.size.width, 1.0)];
    blackBorderView.backgroundColor = [UIColor colorWithRed: 0.0 green: 0.0 blue: 0.0 alpha: 0.8];
    [tableHeaderView addSubview: blackBorderView];
    [blackBorderView release];
    
    _tableView.tableHeaderView = tableHeaderView;
    [tableHeaderView release];
    
    // Create the underlying imageview and offset it
    _headerImageYOffset = -150.0;
    _headerImage = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"header-image.png"]];
    CGRect headerImageFrame = _headerImage.frame;
    headerImageFrame.origin.y = _headerImageYOffset;
    _headerImage.frame = headerImageFrame;
    [self.view insertSubview: _headerImage belowSubview: _tableView];
}

2. Hook up your controller as a UIScrollViewDelegate and implement the scrollViewDidScroll callback.
3. For each call, move the underlying image a multiple of the scroll offset.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat scrollOffset = scrollView.contentOffset.y;
    CGRect headerImageFrame = _headerImage.frame;
    
    if (scrollOffset < 0) {
         // Adjust image proportionally
        headerImageFrame.origin.y = _headerImageYOffset - ((scrollOffset / 3));
    } else {
         // We're scrolling up, return to normal behavior
        headerImageFrame.origin.y = _headerImageYOffset - scrollOffset;
    }
    _headerImage.frame = headerImageFrame;
}

You could take this even further by having multiple images relatively offset, creating a nice multi-layer parallax.

Drafting Pencil

Specularity experiment. Depth of field is handled by exporting a depth map from Cinema 4D to After Effects, using Frischluft.

Traffic Control

Icon test

Offset Tiles

Hotlaps

modo to Cinema 4D to Photoshop. Here's a large version.

This is How to Launch a Kickstarter Campaign

Tim Schafer (Full Throttle, Psychonauts) launched a Kickstarter Campaign to create an old-school graphical adventure game. When I first heard about it, around $3,000 had been raised. Less than 24 hours later, that number is north of $650,000 (the goal was $400,000).

This is the perfect example of how Kickstarter can be a disruptive influence: a group of talented people are able to subvert the existing industry restrictions to do work directly for their customers. This style of game probably doesn't have enough potential to interest a big name publisher, but it has more than enough potential to interest the developers themselves.

Make sure you watch the into video, it's hilariously done and clearly conveys the goals of the project. Check it out.

Don't Forget About CGGeometry Reference

If you find yourself doing something like the following, there's a much easier way.

CGFloat xCenter = rect.origin.x + (rect.size.width / 2)

CGGeometry.h defines some incredibly handy macros (documented in CGGeometry Reference) that make easier.

For example, the above could simply be

CGFloat xCenter = CGRectGetMidX(rect);

A few more handy examples

// Determine if 2 rects intersect each other
if (CGRectIntersectsRect(rect1, rect2)) {
    // Collision
}

// Shrink a rect around its center, passing width and height deltas
CGRect smallerRect = CGRectInset(sourceRect, 50, 100);

// Grow a rect around its center, passing width and height deltas
CGRect smallerRect = CGRectInset(sourceRect, -50, -100);

// Create a new rect from the intersection of 2 rects
CGRect intersectionRect = CGRectIntersection(rect1, rect2);