iOS Animation of A Spinning Tile – Part 1

We recently released a new iPhone game call Memory Gizmo Words and in this project we had to have an animated spinning tile.  Since I had never tried to animate anything before, this turned out to be quite a challenge.

I quickly realized the first thing I had to do was break the animation into pieces and draw each frame.  I started in Photoshop, but trying to get all the sizes, angles, and the perspective just right was a pain.  So I gave up on that idea pretty quick.

Next, I tried Google SketchUp.  Searching though the SketchUp gallery I was able to find a tile someone else had already drawn, and using the free version of SketchUp, I could easily create an animation of the tile spinning.  I exported the images as PNG files, but they looked horrible.  Clearly, I wasn’t going to be able to use these in a final product, but they were a good starting point.

Finally, I went back to Photoshop and cleaned up each image.  SketchUp had output six images, but I only needed three of them.  The first and last images were identical.  The other four were just mirrored images of each other.  After playing with the shading and lighting for a while I was able to modify the three images I needed into something I could use in the game.

In Part 2 we’ll open up Xcode and write the code that will make these three images start to move.