#10 Menus

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.

Main menu 

The menu will have 3 buttons

  • Play
  • Leaderboards
  • Shop

They will all take you to a different screen

The background has

  • A blue sky,
  • The tree the cat will climb on
  • Grass
  • 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.

59fb7ee308194_mainmenu2.thumb.jpg.2db1c2363b3d42e8ba94599b4a7a2e94.jpg

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

59fb804c35679_mainmenu.thumb.jpg.712e3144bab82a27e164d4cc4d58960f.jpg

 

Leaderboard

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

Leaderboards.thumb.jpg.0153874aa17324fb4da40c98c434993e.jpg

 

Shop

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.

shop.thumb.jpg.e0fb6348ad2083f11b430edd79c542bd.jpg

 

Game screen

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.

59fb862cad43d_gamescreen.thumb.jpg.e889b4477d44760c573055987732bce5.jpg

 

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.

59fb875b77dfe_gamescreen2.thumb.jpg.d00285698b80e615ff675a1a5c783fb4.jpg

 

Pause screen

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.

59fb8ac927952_pausescreen.thumb.jpg.f4967a7f7b1c9b9bea4e0ece9ed2779f.jpg

 

Quit menu

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

59fb8bb3055cb_quitscreen.thumb.jpg.1533a3b961338e486df2feddc119ceff.jpg

 

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,.

59fb8c501ca85_gameoverscreen.thumb.jpg.bc0037cb7a53b5df09d17b6984814d96.jpg

 

All UI

This shows all the Ui in the game on one screen

59fb8e1eed88e_allui.thumb.jpg.a443b075b05c9e96548f0564f3ce2806.jpg

 

References

I used the flappy bird UI idea to showcase all of the UI on one screen

Cover.png.24854af7b5a9ce18a4cac7d0c086c8ef.png

 

I also got the leaderboard design off a mobile game call “IRONPANTS” which is a flappy bird inspired game.

Untitled38.png.ef1f29e311b129f8dabdcadd3ad6e37e.png

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.

Advertisements
Categories Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close