iPhone Game Scoreboard using Core Animation
I have been helping out recently with a project running between UCLAN and Lancaster University which involves two teams of students working together to create a couple of iPhone games.
Last week one of the teams raised a question about how to create a rolling score board and we worked through a couple of ideas with some sample code but did not implement it fully. The idea stuck in my mind all week though and so in a little free time this morning I felt inspired to knock something together around it and this is what dropped out of Xcode at the end of it.
It has been implemented as a simple CALayer subclass that takes care of all of the management of the internal layers and animations and exposes a very simple interface to set the score value.
The images must be named 0.png through 9.png and included in the resources bundle but as long as you do that it should cope with any sized images as long as they are all the same size. The code can be found on github.
UPDATE: Thanks to John McKerrell for the suggestion that to give a little more realism, digits should transition in from the bottom coming from a lower number and in from the top from a higher number. This needed a bit of a hack around the 0/9 boundary but I think the outcome is pretty good. This is how it looks.
This was also a nice break from writing code on large projects, I have been really slacking on writing any code that isn't going into a shipping codebase recently and so this was a very refreshing little break from the grind.
This blog is written by Dave Verwer, owner of Shiny Development and developer of several successful iPhone and iPad apps. Dave is an iOS developer and trainer and brings direct experience in designing, developing, shipping and marketing successful apps to his training courses.
Interested in learning how to develop iPhone apps? Check out our training courses.