When we last left off on Operation ReSkin, I had just defined the concept of the reskinned app through some intense brainstorming and market research. The winning concept, “Wham a Llama, Whack a Duck”, won’t be winning any Apple Design Awards any time soon, but hey, we all have to start somewhere!
After several rounds of failed doodles, I settled upon a minimalist cartoon art style for the two characters in the game. The original Whack-A-Mole game that I am reskinning had animated moles coming out of a hole in the ground. I have replaced the hole with a bush from which the duck and llama will emerge. Once I settled on the design, I went to work in Illustrator and converted them into vector format. What do you think?
Now that I have a finalized design, its time for the hard part. I will need to create some simple animations to match the mole animations in the original app. This may pose a challenge as it appears the original developer of the Whack-A-Mole game used some type of program to export out each frame of the animation as individual images.
Since I don’t want to rename these images so as not to interfere with the code, and I don’t know which program was used, I will need to edit/replace each image with my own art assets. Considering there are hundreds of these, this may be a bit time consuming. We shall see…
Before I move on to animation, I will first need to replace the original background image with a design of my own. I plan on creating a cartoon Machu Picchu background to go with the Llama theme. More to come!
Morten says
The program that was used is TexturePacker: http://www.codeandweb.com/texturepacker
Check the comments section on Codecanyon
Keep up the good work on these articles!
Shane K. says
Thanks Morten! I will look into this tool. Thanks for the recommendation!
I hope to have some more articles on this project up soon.