Sunday, December 19, 2010

iPhone face up/face down: Quick and Dirty UIAccelerometer

One thing I love about smartphones is all the little trinkets built into the device... even something as trivial as detecting if the device is "face up" or "face down".

For the iPhone, the natural way to detect the device orientation is to use the "UIDeviceOrientation" class... like so:

This is great, but I found that this method wasn't always giving me exactly what I wanted. I needed a way to detect the exact moment in time when the user flipped the phone, but it didn't seem to work as I had planned.

Instead, I found a just-as-simple way to detect the phone being face up/face down using the UIAccelerometer class. You need to do three things:

First, tell your view controller you will be using the delegate

Next, write your UIAccelerometer delegate.

If you play around with the accelerometer, you'll see that the "z" coordinate is around -1.0 when the device is face up, and around 1.0 when the device is face down (and somewhere in between as the device is being moved). I'm going to assume the device is "face up" when the z value is less than 0, otherwise I will assume it is "face down".

Finally, set up the UIAccelerometer and tell it to use your delegate:

You can get the source here.

Saturday, December 4, 2010

HTML 5 game: catch the ball

(demo game)

Well, I decided to add on to my "project" only to find that my app threw an exception if the user hadn't logged in to Facebook yet. Oops. Guess that's only one of the many reasons nobody's reading my blog.

Anyway, after getting that fixed, I decided it's about time to start playing around with HTML 5. Here in Japan, there's talk of big social networks including Gree and Mobage moving towards platforms that integrate with smartphones. What a better time than to understand canvas and SVG?

In this blog, I'm going to start simple and create some basic interactions using canvas and SVG.

To get started I shamelessly copied a blogger's code - this time it was Disorganized's demo canvas Pong game.

The code worked beautifully on the first try. I just made a few tweaks. First, I changed the game from "Pong" to a kind of rescue game, where you need to catch the ball before it falls to the bottom. This involved adding some event listeners to let the user control the direction of the catcher.

Since I want this game to work on my iPhone, I can't use the traditional "mouseup" or "mousedown" operations for standard browsers. Instead, I used the "a" tag with an "onclick" to call a Javascript function. The onclicks called functions like so:

Pretty straight-forward. To fully jump on the HTML 5 bandwagon, I also wanted to play with some SVG. Inside the "moveLeft" and "moveRight" tags, I added some polygons in the shape of arrows using the HTML 5 "polygon" tag.

To play with the HTML 5 SVG elements, I downloaded the beta version of Firefox 4. Unfortunately, since these tags aren't yet supported in most browsers, I also had to add standard "left" and "right" buttons as pngs as well.

The game moves much slower on iPhone, but works nonetheless.

Here's the game in action, and the source, if you are curious. It's not finished yet, but I hope to improve on it next time I get a chance. Again, thanks to Disorganized for the original pong game source, which you can get here.