Kablamo

In the last week or so, we have been very busy finishing up the game.

Luke has been driven insane by Gary’s mad story and having to create some very odd images. How exactly do you convey that a polar bear is hungry? Well, all is done now. The app has been created, all the images done, code linked up and story complete.

It’s even been uploaded to the app store.

That was a crazy process, uploading an app to the app store isn’t entirely clear. I know that apple have laid out precise instructions but it’s so easy to get lost and doing one small thing wrong mucks it all up and you have to start again. Boo hoo.

That happened four odd times, I created and uploaded the app only to have my binary rejected due to the fact I wrote my name slightly wrong when creating a certificate. Bloody thing.

Anyway, after the three hour struggle, it is uploaded and waiting review. Theres a few silly features in the game that need to be spruced up, but that can wait for the update. For now, we wanted a working version of the game instore and when we have more time, make it even better than it already is.

I hope you all buy this silly game now, it caused us all to have collective headaches, but at different times so it was almost like one continuous headache shared between three guys who just wanted to do an app with a Bowie joke.

Okay, so more of our story is completed and a whole level has the artwork done. So one level is essentially done, just needs buttons and some polishing. Three more levels to go with the second well on its way.

Considering I have no more coding to do really, i’ve just been starting to polish things up and add the extra elements that make a game special.

We now have an intro animation, music and an animated menu. Looks cracking so far. It reminds me of the older lucas arts games just purely because its over the top, ridiculous and has an odd animation style in the fact that its a bit jerky but still fun.

We are aiming to submit this to the app store in a few weeks. Hopefully we will make our target and even sell a few copies.

This app will essentially be our initial showcase. A “look what we can do” type of thing that demonstrates our humour, how we work and that we like to think big.

After all, in these times of chaos, we need a little fun. And if an Australian David Bowie koala liberator cant do that, nothing can.

Gary asked me to make it possible to have a tightrope balancing type mini game. Yes this is going to be one very strange game, thats kinda the point.

Anyway, this required two things, getting an image attached to the accelerometer and always point up no matter how you tilt your phone and having simulated “wind” that can throw you off and make it more of a game.

The first part turned out to be nothing more than a code snippet I happened to find in my quest for knowledge.

- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {

// Get the current device angle
float xx = -[acceleration x];
float yy = [acceleration y];
float angle = atan2(yy, xx);

// Add 1.5 to the angle to keep the image constantly horizontal to the viewer.
[imageView setTransform:CGAffineTransformMakeRotation(angle+1.5)];

if(angle >=-1.3){
MvtutAppDelegate *delegate = (MvtutAppDelegate *) [[UIApplication sharedApplication] delegate];
FirstViewController *thirdView = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
[delegate switchView:self.view toView:thirdView.view];
}else if(angle<=-1.7){
MvtutAppDelegate *delegate = (MvtutAppDelegate *) [[UIApplication sharedApplication] delegate];
FirstViewController *thirdView = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
[delegate switchView:self.view toView:thirdView.view];
}

This not only keeps the image balance but also sets boundaries for when you move it too much.

For the “wind”, i set up a timer and a variable that would change

[imageView setTransform:CGAffineTransformMakeRotation(angle+1.5)];

at given time periods. This meant to throw the user off and keep them from just sitting still.

I think thats all of Gary’s crazy ideas sorted out now. Just need them to finish up story and art so I can implement the code properly.

I probably should have posted about this first, but i’m gonna do it now instead.

Fungineers do more than just silly iPhone apps, we also do interactive art and other nonsense. We were asked to help with a method of interaction for an animation piece. A senior lecturer in animation, Leonie, is animating a short film about a girl in a light house. The story pivots around phone calls and she wanted people to come in and select their own endings. Her initial idea was to have people use their own phone to call into the art piece. We persuaded her that this was a silly idea as no one would want to use their own phone and that it would be very, very expensive. So instead we came up with the idea of using a rotary phone and have people dial one of three numbers to select one of three endings.

We just needed to get a rotary phone to interface with a pc and have the pc know what number was dialed. For that we used a combination of an arudino and flash. Luckily, someone had already done the ground work for us and produced a tutorial on how to get an arduino to know and display a number just dialed on a rotary phone. Fantastic, we just needed to get it working with flash and have flash know when a specific string of numbers has been dialed so it can show the correct frame. For that we used some strings and arrays. Every time a number was dialed, flash would push that number into a string and then we check if that string matches up to a set telephone number.

Okay, so that all works. Now we needed the phone to cancel the call when you hang up. Well, we just took the output from the switch inside the phone and directed that straight into the arduino. We could then tell flash that when that was pressed to clear the array and send the frame back to the first frame. Genius.

Well that was the bigger part of what she wanted done, she also wanted a microphone input on another piece so that when you shout at it, it displays an animation. Well thats simple, thats just a few lines of AS3 and you check to see if it has hit a certain value or not. How fantastic is that ay?

Gee, the last 24 hours have been quite productive for me. I achieved three separate, but important, things.

• Microphone Detection
• Flipping a coin
• Saving

Now, yes, technically I cheated by following code tutorials. But how else am i meant to garner this new knowledge? Guess? Stab the keys alot until things magically work? No, bugger that I like things explained to me.

So lets start with the microphone thing. It’s all in chronological order anyway.

Microphone

So the point of the microphone input was that for the story we may have things like leaves or dust covering the screen and you had to blow them off. How would I do that?

Well I could explain the code I used but this tutorial explains it pretty well anyway.

http://www.mobileorchard.com/tutorial-detecting-when-a-user-blows-into-the-mic/

Well that works all fine and dandy. But, I wanted it to animate an image or something when you blow. Ideally, I would like the animation to pause when you arent blowing but that caused a lot of problems due to how its structured so I dropped that. Of course, if you use an if statement for if blowing or not, not blowing constitutes the view starting up and that tended to crash things when i tried to pause an animation that didnt exist yet.

Anyway, it just required a general if statement and an action to be set up with the animation held in it. Turns out to be very simple! Hooray!

Flipping a coin.

Gary requested this one off me. He asked if it was possible to flick the phone up as if flipping a coin then having a 50/50 chance of going to two different views.

How hard could it be? Just needed an accelerometer class with the outcome being a random function set between the parameters of 1 and 2. It then had to read that outcome and then move to the associated frame.

Apparently there are two types of random function. That alone seems odd to me. One, random(); requires a lot more code and only works one time then the app has to be restarted. Is there a need for this one?

The other arc4random(); works a lot better. One line of code and it is random each time you run it.

Lets go for that one then.

int randomNumber = 1+ arc4random() %(2);

if (randomNumber == 1){
MvtutAppDelegate *delegate = (MvtutAppDelegate *) [[UIApplication sharedApplication] delegate];
ThirdViewController *thirdView = [[ThirdViewController alloc] initWithNibName:@"ThirdViewController" bundle:nil];
[delegate switchView:self.view toView:thirdView.view];
}

if(randomNumber == 2){
MvtutAppDelegate *delegate = (MvtutAppDelegate *) [[UIApplication sharedApplication] delegate];
FirstViewController *thirdView = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
[delegate switchView:self.view toView:thirdView.view];
}
}

Simple yes? Sets up the random function and reads the results. Marvelous.

Making the flip action work is simple too. Just a minor edit to my accelerometer code and we are away. Just had to set it to read from the z axis alone rather than all 3. I also lowered the tolerance so it reacted easier than before.

Saving.

Now this was tricky. Not because it was hard to implement because it wasnt. But because its all explained rather poorly.

What I did was to create a new button on the first screen. It reads continue and when you click it it goes to where you last left off when you closed the app. So you can close the app at any time and return to it exactly where you were.

To do this, you need to use NSUserDefaults.

For the main bulk of the remembering code, I followed along from this tutorial:
http://icodeblog.com/2008/10/03/iphone-programming-tutorial-savingretrieving-data-using-nsuserdefaults/

It handled it quite well. I just needed to get it to pick up what view it was on.

aha, well, what you need to do is to declare an integer on each page (annoyingly) so that when the user visits that page, the string gets updated and holds it in memory.
NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults];
[prefs setInteger:2 forKey:@"saveFile"];

Replace 2 with what ever view you are on. Then just use if statements so that when you click the button it knows what view you were on last and sends you to the appropriate view.

I’m betting theres a less codey version to what I did though. Mine had a lot of lines of if statements. Crude but it works. Im pretty sure there is now some dev pro out there who’s head exploded.

wheeee hew. Now with saving sorted, the part I was most dreading seeing as the few explanations of it i found previously were horrible and involved lots of confusing words.

Everything else, interface wise will be making it look pretty now. All the hard engineering work is done I believe. I say that now but theres bound to be something else I need to do.

Today, myself, luke and gary met up and had a meeting. We needed to discuss the story that gary was constructing and agree on how it should take shape and the type of things that we wanted in the story.

Well it went great. We had a lot of laughs and pretty much cemented the general plot of the adventure.

There are eight different strands that you can take in our game and in all of them you have several choices that either lead to great jokes or death. Also David Bowie.

Now that a general structure was decided upon, I could start putting together the frame work ready to drop in the images that luke will create. Currently I have 20 pages in this frame work done and thats just getting the story started with its eight initial choices. Loads more to go yet.

Its working well so far. I had a few near breakdowns when constructing the one narrative branch that we have written. It all stopped working for reasons I couldn’t see. Luckily, doing the time old method of slowly copying and pasting in segments at a time solved the odd problem. Lets see if it sticks.

I also made the menu system look snazzy. Gave it a fungineer brushed steel look. Swanky.

Oh yeah, the other day I got bored and made the title screen graphic. Here’s my work so far.

[slideshow]

Screens so far. Title screen looks pretty good I think. With graphics like this and fantastic jokes I think this could be a kick ass little timewaster game and we could make a bit of money off this bad boy.

An email came through today from the newport tourist board. It was quite interesting and promising as it basically gave us permission to build our tourist app and use the info from their website. Great.

There was also mention of the name Dr. Ray something something. He happens to work at our university and is doing heritage trail things. This is unusual since we have already had meetings with IDL who are doing heritage trails at the university. How have we not heard of this guy before?

Anyway, time to make that tourist app.

Well, this is quite interesting.

Appcelerator or Titanium as its currently know, is a program that lets you code native iPhone apps using java script. Sounds good right?

Well, yeah sorta. Its a decent program to use. Very very simple. No where near as confusing as xCode when you first use it. But is that a good thing? I mean, with xCode you are kinda forced to read up and find tutorials on it which actually explain so much and once thats started, you start to get interested in the workings of it all. With appcelerator, its not so good like that. There are no tutorials, no help for it at all. The docs for it, well the explain something but it misses out so much of the basic things that you would want to learn.

Simple code, but implementing anything other than the basic stuff here is actually very difficult.

For example, one of the first things I tried to do was to create a button that change the view. There is nothing in the Appcelerator docs about this at all. This makes it very difficult to do anything except utility apps. You can also forget about games with this thing. Getting the detail view to appear when you click on a list item, thats also rediculous. Theres no reason its this hard without any documentation to explain whats going on. The examples are all well and good, but when you copy over code, it doesnt work!

This is basically all you can do without a lot of headaches. At least with xcode people explain to you whats going on.

Theres also something about the way it runs in the simulator. I dont know what it is and I know its a kosher app otherwise it wouldnt work. But it kinda feels a bit plasticy. A bit like its faking it.

It just didnt feel right to me to code an app in it. Felt a bit like cheating, which is odd since I’ve written none of my own code yet but instead referenced a load of sources.

Anyway, appcelerator gets the thumbs down from me. If they had better docs and better public support then maybe it would be a viable way to make an app, but right now, it’s not.

After a while, xCode is kinda like coding AS3 in the terms thats its quite modular and function heavy. I’m quite enjoying it now. Staring to make sense in my head.

The last aspect of what I currently have working in the app is the overlaid menu system thingy.

When you tap the screen, a navigation bar at the top and a tool bar at the bottom fades into view. On the bottom bar there are two buttons, one that shows another menu and one that restarts the game.

The tap the screen part was harder than I thought it would be to implement. Making the whole screen a button was fine, but hiding and showing the toolbars was harder. I knew it would require a boolean but I just didn’t know enough to implement a boolean action.

Once again I turned to the forums and found myself a handy piece of script that setup a boolean action and how I could implement it into a tap function.

Great! it all works. But that just covers the basic hiding and showing of the toolbars. This for me was far too jerky. It needed some animation to fade it in and out in a very handsome manner.

To do this I once again searched for some examples. What I found out was that I could use the UIViews beginAnimation code. Works a treat, especially when you add in correctly to the whole tap boolean thing.

Touchy touchy catchy monkey.
- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if (currentlyHidden) {
[self showStuff];
currentlyHidden = NO;
} else {
[self hideStuff];
currentlyHidden = YES; }
}

beginAnimation code. You just reverse it to fade out the toolbar. Handy huh.
[toolBar1 setAlpha:0.0];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.75];
[toolBar1 setAlpha:1.0];
[UIView commitAnimations];
toolBar1.hidden = NO;

Before a screen tap occurs.

Fading in after the screen tap has been made.

After the fade in. Looks lovely.