Categories
computer games dev-process games design iphone

Made an iPhone game in 2hrs 15mins (native code)

How slow is making iPhone apps using native code?

You have to write HTML5, right, if you want FAST app development on iPhone? Or Unity? Or cocos2d?

Right?

Or … write it in Objective-C … a beginner-friendly “native” language: 2 hrs and 15 mins to create the artwork, design the game, code it in native Objective-C, debug it, and push to iPhone devices

NB: first half shows: “Collect the fish, avoid the dynamite, grow bigger!”
Second half shows: “if you hit dynamite, you shrink; when you’re tiny, if you hit dynamite, you’re fishfood :(”

For the love of … WHY?

Because I entered a voluntary “48-hour game jam” (you have one weekend to make a game), and last time I went to the Apple shop for a repair, they dislodged my network card. It fell out, internally, and it’s not user-fixable (believe me, I tried – even specialist screwdrivers aren’t enough :( ).

So I did something else with my weekend. But a few hours before the competition deadline, I figured “what the heck; what could I do in a couple of hours?” … with some encouragement from The Mighty Git.

The code?

222 lines of code, including comments, blank lines – and code that I commented out because I replaced it with other code.

That’s all it takes for a working, playable, iPhone game.

…and the art?

You can’t see it from the video, but the art is resolution-independent – as your whale gets bigger, it re-renders, so that all the curves ALWAYS have razor-sharp edges. No effort required on my part.

I did all the artwork in Inkscape (free image editor for vector images), and saved as SVG (web-standard for vector images).

Then, courtesy of the open-source SVGKit project (renders vector images on iOS, because Apple doesn’t add support to their libaries – shame), and the following few lines of code:

	self.sivWhale = [[SVGKImageView alloc] initWithSVGKImage:[SVGKImage imageNamed:@"whale-1.svg"]];
	sivWhale.frame = CGRectMake( 0, 0, sivWhale.frame.size.width * sivWhale.scaleMultiplier.width, sivWhale.frame.size.height * sivWhale.scaleMultiplier.height );
	sivWhale.center = CGPointMake( self.view.frame.size.width/2.0f, 0.75f * self.view.frame.size.height );
	[self.view addSubview:sivWhale];

If that looks rather like using a built-in UIImage and UIImageView … it’s because it’s intended to. SVGKit adds a new type of image – SVGKImage – that’s almost the same as an Apple UIImage, except it’s better (it’s resolution independent). And the SVGKImageView does for SVGKImage what UIImageView does for UIImage…

Want the code?

Sadly, the version of SVGKit I used here has some bugs in it – it’s live at: https://github.com/adamgit/SVGKit/tree/transforms – but until it’s been tested and fixed by the SVGKit maintainers, it won’t appear on the main SVGKit project page.

So, feel free to use that link and play with it – but be warned: it’s NOT as stable as the main SVGKit. Yet.