Game UI – Hop the Blop

Hop the Blop is a side scrolling infinite-runner type game where the player controls a cute slime. This game is meant for mobile and tablets and its main audience is children.

 

Main Menu

The main menu was design simply as possible, with the main slime “Blop” in an idle animation or hopping in the background. There are only two buttons to see so that the user either chooses play to start playing immediately or shop to buy upgrades. Green and brown are used as the main colors throughout the app to match the ground and grass/slime color. A cartoonish font called Splatch was chosen to appeal to the target audience.

 

Shop Screen

In the shop, the user can see their number of gems (currency) and use those to either upgrade basic stats such as power and control (which affect the power and control the user has over the movement of the slime). They can also buy power ups, some of which will appear in game after buying while others increase the frequency of some spawns. The play button goes straight to the game after the shop.

 

Game Screen

In the game screen, the user can see their number of gems on the top left, their score (distance + bonus) in the middle, and the pause button on the top right. The user will be able to see an arrow to the right of the slime which will rotate up and down automatically. When the user is ready to choose a direction the user taps and holds to control the power of the jump. When the user lets go, the slime will jump with the user given parameters. The goal is to jump as far as possible.

 

Pause Screen

The pause screen appears when the user taps the pause button in game. It overlays the main game, but still leaves the numbers faded but unblocked. The user can resume the game, restart the game, or quit to the main menu from here. The button design is the same as the main menu one for consistency.