Creating an Awesome Game Menu – the Process

Today I want to talk about one of the games we have currently in progress. The game’s name is Tumble Panda, it’s a physics based casual game and so far, we have never shown it to the public. We plan to go beta next month.

In this post will cover the process of creating the menu. We are not done yet, some assets are still placeholder. But I think you will get the Idea of the concept, both in terms of design and user experience.

Fortunately we are in the lucky position of having a lot of great people supporting us at Andlabs. That’s especially true when it comes to graphics design. For Tumble Panda, our lead graphical hero, Fabian, and his friend, the illustration-master Darren, are helping us.

0 Prerequisites

The general guideline for the game are:

  • It should be kids friendly
  • It should copy existing patterns as little as possible
  • The user experience should be as smooth as possible

Especially the last point seems to be mutually exclusive with most of the existing monetization strategies for mobile games, but that will be part of another post. Back to the menu.

1 Setting

One of the first steps we took was to decide on the overall setting the game should be in. Since Darren is a great fan of comic books and the main character was set to be a Panda, we decided to have a combination of a comic and an asian style.

Comic style

Comic style

Asian style

Asian style

2 First, rough, attempt

Fabian suggested doing the menu in a style that’s really close to a comic. The whole menu should look like the grid of tiles a comic usually is drawn in. I couldn’t really imagine what he was talking about, so he quickly created a quick and dirty first draft of the main menu:

First menu draft

First draft of the menu

This draft very clearly shows the basic structure. The different entry points to the submenus are comic tiles. The importance of the different submenus is shown by the tile’s size.

3 Navigation

Next was the navigation. Since comics don’t consist of five boxes only, we decided to have all menus in one, with the main menu in the center. Whenever a tile in the main menu – the entry point to a submenu – is clicked, the camera moves to the corresponding part of the screen – just as the eye would when reading a comic:

Draft of the menu and submenus

Draft of the menu and submenus

As you can see we already balanced the importance of the different submenus a bit by changing the sizes of the tiles in the main menu.

On the top left stays a promo graphic. On the top right is the most important part of the screen, the tile that leads the user to right, to the menu in which he can select the level he wants to play. On the bottom left is the least important, the ‘about’-button, which leads to a submenu on the left. In the center is the ‘highscores’-button (which will soon change into ‘achievements’), that leads down and on the bottom right is the button that is most important for us, the button which leads the user to the store. Controversially this button navigates to the top instead of the right, as one would expect.

4 Animations

We decided to implement animations that don’t make a lot of visual noise in the menus. The movement from one menu to another is simply done with a move animation with a cubic ease in and out.

Take a look at the main menu, which now is very close to its final design:

Main menu

Main menu

Please notice that the final design of the main character is not yet decided, which is, why you can see three different types of Panda illustrations in the above screenshot.

The clouds that are visible in the background of the store-tile are constantly moving. This kind of moving clouds can also be found on each of the submenus. Furthermore the Panda in the play-tile is moving (‘tumbling’) from side to side.

When looking at the store:

Menu store

Menu store

You will notice the two placeholder-graphics on the left side, saying “goodies” and “upgrades”. This areas work as tabs. The transition between the “goodies” and the “upgrades” content in the list on the right side is done by an animation that moves the complete list out of  and then back into the screen, with changed content. The same animation is used when switching between different worlds in the play-submenu.

That’s almost all we have on animations in the menus. A bit more is to come when I will write about our store.

5 The big picture

Here’s the current state of the menus in  overview form:

Overview over current state of the menus

Overview over the current state of the menus

While it is obvious that some of the graphics will still be exchanged, you probably get a good picture of where we want to go with this game. Since it runs in immersive mode when possible, every screen also has its own software back button.

6 Too little moving images!

Here’s the tl,dr-part. Since talking about animations and graphics doesn’t give me the best idea of the way something will finally look, I assume there are some people among you that feel about it the same way. That’s why I made a short video:

 

In the next posts I will talk in a bit more detail about the thoughts we had on the individual submenus of the game.

In the meantime, while I think the menu we’ve created is pretty awesome, I’m really curious for your feedback. This is Tumble Panda’s first public appearance on the internet and I’m very curious about the impression it gives you – so please give me the honor of sharing your honest opinion with me.

How to connect to ADB via Wifi

Let’s say it’s a hot summer day and you need to use one of the two USB-connectors of your Macbook Pro for a fan, while the other one is occupied by your keyboard. Time to turn on adb access using TCP and your local wifi-connection. Here’s how:

1. Connect your device using a USB cable.

new

 

2. Assign the port your device should use using the ‘adb tcpip [port]‘ command.

Bildschirmfoto 2014-04-08 um 11.38.03

 

3. Discover your phones’ IP-adress.

Bildschirmfoto 2014-04-08 um 11.38.52

 

4. Connect to your phone using the setup port.

Bildschirmfoto 2014-04-08 um 11.41.02

 

And you are done. When looking at your device list now, you will find your device using the USB-connection and your device using your Wifi-connection. Now you can unplug and use your USB-port  for other important stuff.

Bildschirmfoto 2014-04-08 um 11.43.24

 

If you want to end your connection again, use the ‘adb usb’ command.

 

This was tested on a rooted Nexus 5 and a non-rooted first generation Nexus 7.

We released ‘Flying Knight’

Well, we did see it coming and indeed it happened:

After the release of ‘Flappy Knight’, we were warned by some friends that Google was unpublishing games that try to live of Flappy Bird’s success. After about one week in the store, just as downloads started to increase a bit,  we received a “7-Day Notification of Google Play Developer Term Violation”, stating that our “title and/or description attempts to impersonate or leverage another popular app without permission” and that we had to “remove all such references.”.

So far so good. Our description, which contained statements like
“- As addictive as the now unpublished ‘Flappy Bird’
- Flap your way through endless lines of walls”,
definitely violated parts of the Play Store’s spam provisions, and since Google Play is not a democracy, we had to do as we were told.

We changed the name of our game to, removed everything that could be connected to Flappy Bird and republished an update that also contained some bug fixes. After an immensely long update time of more than 72 hours, it was done.

So hereby, I proudly announce the release of:

logo

You can get it now on Google Play.

Please feel free to share your thoughts in the comments.

Creating a ‘Flappy Bird’ clone

So, last week, on Thursday I sat with Felix, one of the people that are supporting us with designs, and we were talking about ‘Flappy Bird‘s tremendous success. The, now unpublished, Chopper Mission-like game at the time grossed around $50k a day and was, as you probably all know, topping app store charts around the world.

Flappy Bird

Flappy Bird

We were impressed by the simplicity of the design and the very easy gameplay. This was also what made us think that it would probably be quite easy to implement an app with similar functionalities.

$50k/day, a possibly fast implementation. That are two  pretty convincing arguments towards just trying it out.

Brainstorming

The Greek restaurant we went to

The Greek restaurant we went to

The decision was made and we headed over to the Greek restaurant next door to brainstorm a bit. The mission: Creating a game with similar behavior and and addictiveness as flappy bird while maintaining an own character.

Besides the amazing achievement of $50k/day in front of our eyes we wanted to keep up the spirit of ‘Flappy Bird’, which, in our impression, was rather the creation of games as a form of art instead of pure means to make money.

The brainstorming started. The basic wireframing was done rather quickly. A simple start menu, the game itself, a game over menu, GPGS highscores, maybe a bit of Tapjoy and a splash screen.

Left: Wireframes. Right: Design drafts

Left: Wireframes. Right: Design drafts

Then the big question arose: Where and when did we want our game to take place? We are working on another game in the steampunk genre anyway at the moment, so why not use this environment?

 Steampunk Bird by ~Adrienne-the-ripper. Click on the image for the origin.

Steampunk Bird by ~Adrienne-the-ripper. Click on the image for the origin.

While that sounded pretty cool we wanted to grab the chance to try a different setting. Ever since I first played it, Age of Empires II was my favorite computer game, which it stayed until today. This resulted in our final choice: The medieval times.

Getting started

First we created kanban-boards, each customized and simplified in the way needed them.

Left: My Kanban-board; Right: The designer's Kanban-board

Left: My Kanban-board; Right: Felix’ Kanban-board

Then we just got started.

I first began implementing the physics with Box2D but then decided it would be overkill and just used simple entity modifier. After a couple of hours the first, almost complete, game was done. On the left you can see our main menu, in the middle the game while it is playing and on the right the game over ‘menu’:

The first playable version of our 'Flappy Bird' replacement

The first playable version of our ‘Flappy Bird’ replacement

I like to call it ‘Flappy Pong’.

As with most casual games, writing the basic game logic needed the least time. We needed a decent character, the hero that would breathe life into our game. His name? Sir Flapalot.

Who is Sir Flapalot?

Who is Sir Flapalot?

We wanted a unique character. A person that’s cute, has a visual reason to fly and can still transport the adventurous aura of a knight.

Felix did an awesome job and created our flying hero:

Sir Flapalot revealed

Sir Flapalot revealed

Sir Flapalot comes in five parts: A tilesheet of the cape which consists out of four parts for a fast paced movement animation, a three-part-tilesheet of the arms with the wings, the harness with the feet, the helmet and the hemlet’s ventail, which opens when the knight flies downwards. Here you can see his first flying attempts in our virtual world:

Sir Flapalot flying and falling

Sir Flapalot flying and falling

Here’s the main menu with Sir Flapalot flying around on a Galaxy Y and a Galaxy Nexus:

Sir Flapalot on different devices

Sir Flapalot on different devices

Next was the Name and the Logo. We both were certain about the name in an instant. ‘Flappy Knight’. We couldn’t find a fitting font so Felix did another amazing job and hand-drew Flappy Knight’s own typeface:

logo

Development

After this two important decisions, the title and the main character of the game, development continued. We included backgrounds, a parallax floor like in ‘Flappy Birds’, the green rectangle barriers of the screenshots above became walls and the game over and start menu went through plenty of iterations.

Once this essential parts were done, I started integrating GPGS for highscores, ad banners (only AdMob for now) and Tapjoy.

Last Thursday, after one week of development, we presented the result to ANDLABS and started balancing the gameplay a bit more. It turned out that Sir Flapalot fell too fast so that sometimes it was too hard to stop him at the right time. With the change of giving him more time to the fall, a bigger distance between the walls came. While the game initially was much harder than ‘Flappy Bird’, it is a tiny bit easier now. My current record is 39, which makes me third out of four test players.

After the balancing, sound came into the game. This took us quite some time since we hand made almost all of them on our own. We tried to keep them as annoying yet motivating as the flappy-bird sounds, while sticking to our genre. While we may re-record some of them for an update, we are satisfied with the current state.

Flappy Knight

Today, after one week and three days of work, Flappy Knight was finished. Here are the final results:

Flappy Knight's main menu and get ready screen

Flappy Knight’s main menu and get ready screen

Flappy Knight's gameplay and game over screen

Flappy Knight’s gameplay and game over screen

So now, if you like (or hate) ‘Flappy Bird’ and need an adequate replacement but are not satisfied with the gazillion of copies out there, or just want to try our work, you might give Flappy Knight a try:

promo

get flappy knight on google play