Backlog

A side-project to track my video game backlog.

Foreword

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.

Intro

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.

More Than Just A List

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.

  • What platform might they be interested in playing on?
  • Do gamers have a lot of single player games on their back log?
  • Maybe they are in the mood for a particular genre? Or Co-op?
  • The description of the game might also entice gamers to pick up and play.
The Flow
  • A user hits the add button on the first screen of the app that brings on a modal.
  • On that modal, the user searches for the game they want to add
  • The game gets added to their backlog!

Objective-C

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;

	
Considerations

Since the project is not quite finished, there were a number of additional features I wanted to add.

  • Steam Integration: Since a lot of peoples backlogs are from Steam, and Steam does have an API, I thought why not make it easier for users and onboard them with a list of their Steam games to quick-add?
  • Picking up where you last left off: There is also the idea that people have started these games on their back log but have not been able to finish it. How do they pick it up again? This info would add to the contextual information that I mentioned earlier.
  • Game Time: I have not yet found a resource for this yet, but thegamesdb does not include how many hours it may take to finish certain games. I would love to have data for this as gamers sometimes do not want to invest hundreds of hours on one game.
© 2019 Elsie Ng. All rights reserved. RSS