Let’s build a mobile puzzle game from scratch — Part I
It’s Christmas time, and millions of people from all around the world are having fun. This means it’s a perfect moment to build something cool, I thought a month ago when I started working on a very simple puzzle game called “Snowman: Winter Puzzle”.
I’ve had a few years of experience in iOS development before, thus a simple project like this could be a good practice.
First, I wondered what type of game it should be. I did some research on the topic and found this report.
The report suggests that Puzzle games get the most engagement while their downloads claim the #3 spot after Arcade and Action. Most puzzles utilise simplicity and minimalism so that anyone can play these games. As a result, they are much easier to design and develop. And, there are success stories like “2048”, “Threes”, “1010!” — you name it.
So, I spent a few days brainstorming ideas, and finally, after a few iterations of prototyping and testing, I came up with something good.
Game Concept
A 5x5 board is big enough to support the game mechanics, and its size fits the iPhone screen pretty well. Tap is the only game action users can take which is super easy to learn. Finally, the game is tricky to master if you want to reach higher ranked tiles before you are out of moves (there are no groups of 3 or more adjacent tiles of the same rank).
However, a good game needs its own unique atmosphere. Just having colored tiles is not enough to be catchy on the App Store. I thought the way kids make a real snowman and the game mechanics have actually a lot in common: with snowflakes you can make a snowball, then a snowman body, then you add two sticks to imitate hands, then its face, a scarf, a cap and a broom! Instead of merging yellow tiles into an orange one, then orange tiles into a green one etc, we merge snowflakes to create a snowball, then snowballs are merged into a snowman body, etc. Looks like now we have something to start with, don’t we?
Designing our game
Alright, let’s jump right into it! I’ll outline what we are going to have as a result of this stage:
- Tiles for each rank
- Illustrations
- UI elements
- Make sure the design works great on both iPhone & iPad
And, of course, we will only use vector graphics to have 2x and 3x version of each asset.
When the snowmen are done, they must be put on tiles. I decided to use an ice-like tile backgrounds first:
I was curious what would the board look like with these tiles, and it turned out the shades of blue do not help a user distinguish different tiles in a split of a second, slowing down the game process too much. It was clear I need colors. Look how the board changes when they are applied.
Now when the board is done, we should think about the UX. Yeah, I do it after a significant part of the UI is done :) Don’t blame me too much — in this particular case the board was essential in my opinion. It’s obvious we’ll have it somewhere in the middle of the screen.
Our users should always see their best result and the game score. Also, there must be a way to get to the global leaderboard and the list of in-game achievements in a single tap. To achieve this, I decided to place the current game score on top of the board with the leaderboard and achievements buttons on its sides while the best score and illustrations are at the bottom of the screen.
The snowman on the right changes depending on what tile rank the user reached in the game.
Now let’s make it even better! When users reach, say, 10k points total, the background changes and more illustrations appear.
For the game achievements we will use bronze, silver and gold badges. Each badge will be unlocked when a certain amount of tiles of a given tile rank is collected. For example, when you will get a bronze badge for 1,000 snowflakes or a gold one for 15 snowmen with brooms.
Because not everyone is using the Game Center, we need to have a special page for achievements. The badges will look like these:
Finally, the design should look good on tablets:
I think you noticed some space on top. I saved it for the ad banners we will add later on. This space should be at least 50px.
That’s it for today! In the second part we’ll dive into the coding stuff. Hope you enjoyed my very first post here on Medium! Check out the second part of the story if you like this one.
Check my designs on Dribbble or contact directly for collaboration!
