A side-project to track my video game backlog.
This is a side project that was built somewhere around the time when iOS7 was just being released, if I remember correctly. Therefore the design follows the somewhat outdated iOS7 philosophy.
I play a lot of games. So many in fact that I have accumulated quite the back log of games I have not finished (particularly on Steam).
The thing is: I am not the only one with this problem. If you look anywhere on Internet message boards revolving around games, there is a good chance someone else has the same issue.
The simple answer to this problem is just make a to do list of games you have not finished yet. But what motivates you to pick a game and do it?
Knowing this, I designed the product around being able to see colorful imagery to support that list item as well as provide the user with some general information about what the game is about.
The app taps in to thegamesdbs API to pull a list of games when a user searches for it to add it to their Backlog. I used FDRequestClient to make the calls to thegamesdb.
On each game detail view, I do two things to the images I get back from thegamesdb:
Create a circle mask on the main boxart image
__gameCoverView.layer.cornerRadius = roundf(__gameCoverView.frame.size.width/2.0);
__gameCoverView.layer.masksToBounds = YES;
Blur and darken the background image
CIImage *inputImage = [[CIImage alloc] initWithImage:self];
CIContext *context = [CIContext contextWithOptions:nil];
//First, create some darkness
CIFilter* blackGenerator = [CIFilter filterWithName:@"CIConstantColorGenerator"];
CIColor* black = [CIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:alpha];
[blackGenerator setValue:black forKey:@"inputColor"];
CIImage* blackImage = [blackGenerator valueForKey:@"outputImage"];
//Second, apply that black
CIFilter *compositeFilter = [CIFilter filterWithName:blendModeFilterName];
[compositeFilter setValue:blackImage forKey:@"inputImage"];
[compositeFilter setValue:inputImage forKey:@"inputBackgroundImage"];
CIImage *darkenedImage = [compositeFilter outputImage];
//Third, blur the image
CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
[blurFilter setDefaults];
[blurFilter setValue:@(radius) forKey:@"inputRadius"];
[blurFilter setValue:darkenedImage forKey:kCIInputImageKey];
CIImage *blurredImage = [blurFilter outputImage];
CGImageRef cgimg = [context createCGImage:blurredImage fromRect:inputImage.extent];
UIImage *blurredAndDarkenedImage = [UIImage imageWithCGImage:cgimg];
CGImageRelease(cgimg);
return blurredAndDarkenedImage;
Since the project is not quite finished, there were a number of additional features I wanted to add.