Wednesday, March 24, 2010

Evolution of the Zengaku Interface

Developing the Zengaku UI has been an interesting experience. It has gone through several revisions, for both technical and artistic reasons. Below are some screen shots outlining the evolution of our interface.

Zengaku was my first iPhone app, and my first using Objective-C and the UIKit. It was a big learning curve. The first thing I worked on was trying to draw the actual Zengaku puzzle screen. Below is the result.



The basics are there. We have an appropriately sized grid, filled with a bunch of numbers. Of course, its horribly ugly... so the next step was to make it a bit prettier.

At first, I was using a single UIView for the grid, and drawing everything in its callback. After reading the API documentation a bit, I thought it might be a good idea to make each of the grid squares its own Core Animation layer.



I then added some numbers, and changed the colour scheme a bit. Notice that the numbers decrease in size when there are more of them in a single grid square. Also notice that the puzzle isn't actually a valid puzzle yet -- I was just randomly generating a bunch of grid squares just to test the rendering code.



Andrew and Tim worked on getting the puzzle loading working, and I was able to modify the UI to render it. Tim and I added some number buttons along the bottom of the window, and then Andrew added some actual game play logic, and below is the result. You are looking at the very first Zengaku game ever played!



You may notice that the right most column, and the bottom row do not have any consecutive bubbles. This was a bug I discovered while trying to solve this puzzle. If you look closely, you'll also see that the borders of the cells are visible inside the bubble itself. Another bug.

We then tried working on the colour scheme a bit. As you can tell, we are not artists...



Up to this stage, each grid square was its own Core Animation layer. This seemed to work fine for us, until we got our iPhone developer account. When Zengaku was running on the actual hardware, we found that the rendering was horribly slow. As in half a frame per second slow. Definitely unplayable (especially when zooming and panning).

We tracked the problem down to our overuse of Core Animation layers. I re-wrote the rendering code to once again use a single UIView, and below is the result. The performance was dramatically better.



Notice that the grid edges no longer peek through the bubbles. Also notice that there's an ugly white border around the screen. I did this because the number of cells (13) did not evenly divide into the resolution of the screen. So to avoid having some grid squares being at fractional pixel locations, I just padded the borders to make the pixels integers again.

The image below shows some more progress on the graphics front.



We finally decided to get a real artist to help us. We recruited the help of Cheyney Sadler, and the result was fantastic! Its amazing what a big diffence it has made. Thanks Cheyney!



Finally, I'll leave you with this montage of some of our other screens. I hope you'll agree that the final version turned out much better than these prototypes!


3 comments:

  1. We should have stuck with blue text on red background. :D

    ReplyDelete
  2. Or that wood floor texture for the main screen background :)

    ReplyDelete
  3. State governments receive no licensing fees or tax income from online playing sites but should fund therapy programs for casino.edu.kg pathological gamblers, a rising number of whom are online gamblers. The federal government collects earnings taxes from the massive winners of lotteries and conventional on line casino games, but no taxes are collected from online playing winners. That means want to} have access to over 300 slots and desk playing games by way of your pc or mobile gadget. As well as actual money games, you should to} be able to|be succesful of|have the ability to} use demo software begin out|to begin} enjoying in} at no cost. Moreover, you should to} in a position to|be succesful of|have the ability to} use these games to satisfy the wagering circumstances for a deposit bonus and some other promotions. The money for online playing can come from bank card, digital verify, certified verify, money order, wire transfer, or cryptocurrencies.

    ReplyDelete