Hubbub has gone into hibernation.

Beestenbende technical wrap-up

I usu­al­ly tell peo­ple that devel­op­ing games is the most chal­leng­ing and also the most reward­ing dis­ci­pline in pro­gram­ming out there. You get to solve real­ly rather dif­fi­cult prob­lems with aston­ish­ing reg­u­lar­i­ty and every­thing you can squeeze out of the tech­ni­cal envi­ron­ment has a sig­nif­i­cant impact on the play­er expe­ri­ence.

That makes it a bit strange that we haven’t talked about the tech­ni­cal details of the stuff we’ve made here. That is going to change with this tech­ni­cal review of the game Beesten­bende we recent­ly made for the Uni­ver­si­ty Muse­um Utrecht.

From the project page:

Beesten­bende is a game for fam­i­lies vis­it­ing the cab­i­net of curiosi­ties at Uni­ver­si­ty Muse­um Utrecht. Play­ers are invit­ed to look at the objects on dis­play through the eyes of sci­en­tists. In the game, a num­ber of ani­mals in the cab­i­net are con­fused about the ani­mal group they belong to.

From the onset it was rather clear that this should be a mobile game of some sorts that takes place in the muse­um, so off we go.

Phonegap

Ini­tial­ly, because I had hard­ly any expe­ri­ence devel­op­ing for iOS I tried set­ting up this project in Phone­Gap. The promise of being able to use my exist­ing web devel­op­ment skills to cre­ate an app and then be able to deploy it to mul­ti­ple plat­forms was very appeal­ing.

After a cou­ple of days this turned out to be a dead end. Even in the basic game engine I set up, where some screens tran­si­tioned into each oth­er, per­for­mance was dis­as­trous. Attempts at throw­ing opti­miza­tions at that prob­lem did not show much progress. Addi­tion­al­ly Phone­Gap doc­u­men­ta­tion was not very help­ful and tool­ing to debug these issues near­ly non-exis­tant. So rather quick­ly we made the switch to native iOS devel­op­ment for this project.

In ret­ro­spect see­ing how far we took the project, how much con­tent even­tu­al­ly went in there and how much pol­ish we want­ed to apply, I think the attempt to do it with­out native code was mis­guid­ed in the first place. But even for sim­ple apps the thresh­old to go native is not that high. Pro­gram­ming in Objec­tive C is not much more dif­fi­cult than JavaScript with the recent addi­tion of sto­ry­boards and ARC. In fact for those with a more for­mal pro­gram­ming back­ground in either Java or C#, Objec­tive C’s clean object mod­el with its del­e­gates and prop­er­ties may be more appeal­ing.

This was my first iOS project but I found a bunch of API knowl­edge along with ample use of Stack Over­flow to be more than enough to start build­ing with con­fi­dence.

Storyboards

We heav­i­ly used sto­ry­boards in mak­ing this app. How heav­i­ly you can see in this screen­shot (click through for the entire thing):

Beestenbende storyboard detail

Work­ing with sto­ry­boards is real­ly excel­lent and some­thing lack­ing in most inte­grat­ed devel­op­ment envi­ron­ments. They work equal­ly well if you want to quick­ly pro­to­type some­thing or if you want to real­ly go for a pix­el per­fect design. Inter­ac­tion design­ers cas use a sto­ry­board with Nav­i­ga­tion­Con­trollers to quick­ly pull togeth­er the basic flows and con­trols of an app. But they also enable you to fine tune the final 10% of your app.

What proved espe­cial­ly use­ful is the fact that non-pro­gram­mers can eas­i­ly make deep changes to the user inter­face with­out break­ing code. Cre­at­ing new screens or tweak­ing exist­ing views and assets proved to be very easy and source con­trol con­flicts that did turn up reg­u­lar­ly (MainStoryboard.storyboard could have been a bit less mono­lith­ic) were eas­i­ly resolved.

I would say that seri­ous web devel­op­ment needs some­thing equiv­a­lent to a sto­ry­board edi­tor very des­per­ate­ly. I know the par­a­digms are dif­fer­ent, but that is not the point. The main point is that an envi­ron­ment where devel­op­ers and non-devel­op­ers can com­fort­ably work togeth­er with­out inte­gra­tion prob­lems is the future.

Camera

The default cam­era con­trol in the iPhone works well but its intro­duc­tion of a new mode is jar­ring and unnec­es­sary. We saw the pos­si­bil­i­ty to use AVFoun­da­tion based video with­in an exist­ing view (as seen in for instance Grid Lens) and we went for that. It did prove to be a bit finicky to get right but over­all the vast­ly supe­ri­or user expe­ri­ence was more than worth it.

Rik modeling the game's photo team photo mode

Rik mod­el­ing the game’s pho­to team pho­to mode

Fonts

We had quite some issues with enabling cus­tom fonts on the iPhone. The ones that we orig­i­nal­ly want­ed to use had a mis­set ascen­der. Cor­rect­ing the font met­rics using a tool (see this Stack Over­flow answer) then caused oth­er prob­lems down the road which made us even­tu­al­ly go back to one of the fonts includ­ed on the iPhone.

The custom typeface we use for titles and buttons

The cus­tom type­face we use for titles and but­tons

If you want to set cus­tom fonts in the sto­ry­board edi­tor a sim­ple trick to do that is to cre­ate a cus­tom class (for instance Cus­tom­La­bel) which changes its own font. Then in the sto­ry­board any label you want to have that spe­cial font you can assign that class in the iden­ti­ty inspec­tor. The cus­tomiza­tion does not need to be lim­it­ed to the fonts but can be any­thing. We used this method to cre­ate uni­form mas­ter styles for the var­i­ous labels, but­tons and oth­er views that we were using in the app.

Sounds

We added sounds rel­a­tive­ly late in the game but it can­not be over­stat­ed how much of a dif­fer­ence they make to a game. We can say that the sound effects pro­vid­ed by Rik Nieuw­dorp from Claynote real­ly made the game come to life.

Besides need­ing sound effects for the actions one can per­form in the game, we need­ed voic­es for the var­i­ous char­ac­ters and tunes for some of the intro­duc­tion and sum­ma­ry screens. Rik did an excel­lent job on what was prob­a­bly not the most straight-for­ward brief.

The game is host­ed by the Nau­tilus who sounds like:

Then we start off with a squir­rel who thinks it’s a bird and sounds like:

Next there’s the eel that is sad because it thinks it’s a snake:

And final­ly you can get a hint of the drag­on who is serves as our boss:

And all in between there are tran­si­tions such as:

I used Cocos2D’s excel­lent Cocos­Den­sh­ion sound library for the audio play­back which is a sim­ple drop-in and very easy to use.

Polish

Final­ly to talk about pol­ish­ing a mobile app: what starts out as a small project quick­ly bal­loons into some­thing rather daunt­ing. Being able to con­trol the entire user expe­ri­ence car­ries with it the respon­si­bil­i­ty to ensure that it is a good expe­ri­ence, but that takes an enor­mous amount of time.

But all in all mak­ing a game like this is very reward­ing, espe­cial­ly if you see the fam­i­lies in the muse­um play­ing it.

This entry was posted in Projects and tagged , , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.