I used Photoshop to create all the screens in the game as well as where the UI will be placed and how I want it to look.
The menu will have 3 buttons
They will all take you to a different screen
The background has
- A blue sky,
- The tree the cat will climb on
- The cat
If the player buys a new skin from the shop, the cat will also change its appearance on the main menu screen as well as in game.
I originally made the buttons grey to reflect the grey cat but it looks dull and unappealing so I went for a more brighter colour
The leader will show the top 10 in the world, the players score will be shown as well as their position at the bottom
Theirs also a back button which will take the player back to the main menu
In the shop the player can buy skins for the cat, this only changes the apprentice of the cat nothing more.
Theirs a box showing what the skin will look like on the cat in game. The player can use the arrows to show different skins. The player can also see how many coins they have.
At the bottom their will be a name for the skin as well as a brief description on the skin, perhaps some humor.
At the very bottoms hows the price of the skin, the grey cat is the default skin so their wouldn’t be a price for it in the actual game, if the player has already obtained a skin then it would say “skin purchased”.
I was thinking of not having a shop for skins because in game you only see the top of the cat and you don’t see the whole cat just half of it soI don’t think this feature is needed.
When the player selects play from the main menu they will be taken to the game screen.
Before the game starts the player has to tap the screen to begin so the player decided when their ready.
At the top will be the score, every the the player successfully climbs one surface at a time the score will increase by one point. I was thinking of moving tot he bottom left to get it out of the way for the player, it feels like when the player gets a rally going the score might get in the way or might be a little distracting. Some feedback from other people would be nice to see if the score will be an issue or not.
On the top left is the pause button which will stop the game and bring up the menu just incase the player needs to stop for something and doesn’t want to quit the game.
I moved the score to the bottom left so it’s out of the players way, the score can pressure the player once they reach a high score, I will decide if I want at the top or bottom.
Once the game is paused the background will darken and show a resume button and a menu button.
The pause button is their if the player really needs to stop for something but wants to keep going later, when the player resumes the game they have to get their bearings and get back in the rhythm really quickly especially if they got a high score going.
Once the player presses the menu button the game will tell them if they are sure they want to quit, this is just incase the players hit the menu button by mistake and lose the score
Game over screen
When the player loses the words game over will appear informing the player that they lost.
A box will appear showing
- The players score
- Their high score
- How many coins they earned
- Their total amount of coins
At the bottom will be a retry button so the player can quickly start the game again
The menu button indicated by the arrow which will take them back to the main menu.
A facebook and twitter button are included incase the player wants to share their high score on social websites.
Lastly theirs the leaderboard icon which will take you to the leaderboard screen, same as the leaderboard button on the main menu incase the player wants to view what position they are at.
I made the text embedded similar to Flappy bird to change the UI because most of the text is white with a stroke,.
This shows all the Ui in the game on one screen
I used the flappy bird UI idea to showcase all of the UI on one screen
I also got the leaderboard design off a mobile game call “IRONPANTS” which is a flappy bird inspired game.
What I plan to do next is to make a customer journey map to expect how the customer will react to certain points of the game and what to expect from the customer.