Top Run UI: Embarassing Truth

Remember how easy it was to show adults colorful drawings you made when you were a kid? Not anymore. We are adults and we are making a G A M E. Of course, it’s our first game and we had no idea how to do anything, including UI (and we still don’t), but it’s nevertheless embarrassing to show earlier versions. There’s a good side though – someone might find it helpful and feel great because their UI is better. Here we go!

Two screenshots of Top Run main menu, very rough UI

January: In the beginning we thought that VHS-like font is totally cool and used it everywhere until we realized that we will localize the game and the font doesn’t support any languages other than English. We wanted Top Run to work in all languages. So we said goodbye to that good looking font.

February: Same thing happened to extremely hardcore post-processing, ugly and too demanding for smart-phones. At that point we’ve added skins and that’s how buddy and Kevin appeared on the main screen. We wanted players to see that they can change skins!

Two screenshots of Top Run main menu, first one is lame, second one is great

Beta: We realized that square buttons are definitely not okay, but we didn’t know what else we can do yet. Thanks to similar-looking square buttons, many players couldn’t even find how to start the game! For same reasons skins and upgrades were completely unseen and forgotten by players.

November: We’ve got dad’s approval of the start button, threw away the rest of squared buttons and pixel counter (you don’t buy anything here so you don’t need it). iPhone X tests have shown that top-left icons were obscured by notch, so we rearranged them horizontally.  Also, we gave up on our idea to show Kevin and Buddy in the main menu.

Two screenshots of Top Run upgrades UI, in style of old computer interfaces

January: To be honest it’s still our favorite color scheme, it’s the real 80s. The idea was to give players a feel of an old computer. We showed it to our sisters and they found it depressing:(

February:  80s grid background solved depression problem.

Two screenshots of Top Run upgrades UI, more nice and with icons

Beta: Eureka moment: aaaaah icons were invented with a purpose! It solves localization and recognition problems (should’ve realized it way earlier, don’t judge us). Background is now even less depressing and we threw in a calling-to-action header.

November: We realized that our back button is more like a next button – it’s on the right, it kinda leads forward. Now it’s a home icon, in the upper-left corner. Also, meet new rotating powerup icons. Oh, and we decided to be more consistent and make all buttons blue and non-buttons pink (hope you get the idea). And it’s a game, it can be more vivid and fun!

Two screenshots of Top Run objectives UI, one is very simple, second one is nice and 80s-like

We’ve added transparent grid background to all pop-up menus and a cool “now playing” panel. Also replaced those boxes with bullets to make it easier to read objectives.

Two screenshots of Top Run death menu, both looking bad

January: Same story with depressing background:(

February: Obviously a bad decision to make that huge “1 token/restart” button with token counter under it. Background is not depressing anymore though!

Two screenshots of Top Run death menu, first one is lame, second one is great

Beta: We’ve added one more menu and restart button moved there, so it was replaced by next button. A huge and ugly next button.

November: Now players can share a screenshot of their score and send it to friends! That brings back the idea to show Kevin and Buddy skins (only now you can even show them to other people) and bye-bye square button, hello icons!

Two screenshots of Top Run restart menu, first one is complicated and difficult to undestand, second one is much better

Beta: We’ve added temporary boosts and that’s how this menu appeared. Our goal was to show players that skins and boosts exist. Then we threw in statistics and upgrades buttons to fill the screen.

November:  Game modes. We realized that a player should be able to change them before restarting the game. Boosts were changed to cheats, because cheating is something each of us did in games. At least once. And we made our restart button look very similar to start button. We checked with Dad, it’s cool. Overall, less square items and less clutter.

Conclusion: We still have no idea how to UI and no way current UI is up to any standards. However, it’s still better than it was (even dad could navigate there).

Here’s what we’ve realized during this time:

  • Fonts should support all languages (it’s really bad when the game looks nice in English but when you change the language it’s just all ugly Arial)
  • Buttons shouldn’t be same and square. Icons are great.
  • Show your UI to your dad and your grandma and your little sisters/brothers and to your cat.
  • UI is incredibly hard and that’s why UI/UX designers earn a lot. They deserve it.
  • Forget everything we said and hire someone to do UI for you.
Share on or discuss on

Nothing’s Gonna Stop Us Now

We’ve been silent for quite a lot so it’s time for us to finally tell you what have happened to Top Run and us in the past few months.

Part 1. Beta

We are looking at lots of envelopes

We started the beta and those were probably the best days of working on the game! Feedback, feedback a lot of valuable feedback and suggestions.

People have sent us very detailed reviews. And what we didn’t expect (but wanted to) is that they were positive and people actually enjoyed playing our game.

It is still hard to believe it, because after so much time working on our game we have a quite complicated love/hate relationship with it.

Part 2. Publisher

We are looking at a kite with Top Run written on it

While the beta was going on, some people suggested that we should show Top Run to a publisher. Hmm. Hmmmm. That’s what we thought and after some doubts we decided to give it a go.

Part 3. Waiting

We are looking at a clock

We decided not to make drastic changes to the game in case the publisher will tell us the game is good and that they want some changes, or that it’s bad and we need to change everything. We were waiting for an answer for almost 2 months and at this point developing has slowed down. This was the most challenging part because we were constantly thinking: what should we do? When will we get the answer? It was the first time when we couldn’t plan our workflow.

Part 4. Yes or No?

We are looking at an arrived mail envelope

It was a no. The publisher didn’t approve our game. Of course we were sad, even though we’ve been expecting this. We’ve spent one evening being completely destroyed, eating fast food and talking if it was really worth it from the beginning.

Part 5. Back on track

We are eating junk food

We woke up broken and sad (and feeling guilty about the amount of junk food we ate). And we started to talk again.

Should we stop everything, forget about game developing – No way!

It all started like a small no name game with a naked man collecting bananas and ended up being a big project for us that became an essential part of our lives. We can’t imagine ourselves working on something else anymore.

We’ve met amazing people along the way: Beckett – a talented musician who’s music we fell in love with; Alan – amazing artist who made us the best game cover we could’ve imagined; John – awesome voice actor who gave Kevin his voice!

And all of you who supported us along the way.

All that waiting and the whole publisher idea was totally worth it! We’ve got a lot of feedback and it’s the best gamedev courses we could’ve found.

Part 6. Plans

We will do it!

We were planning to release our game in 2017. February 2018. Spring 2018. Seems we need to work more on our time management skills.

Right now we’re adding a lot of new cool stuff to the game. And as we’ve already missed all the deadlines we could spend one more month on it. Maybe two. Because we don’t want to release our game at the same time with E3.

We knew that making games is hard and challenging and the market is oversaturated. What we didn’t know is that the community is incredible and open to newcomers with zero experience. Thank you all for supporting us!

Now we are working even harder to make our game something that we didn’t expect it to be in our bravest dreams!

Mark and Lena

Share on or discuss on

Top Run Character Progression

Top Run has gone a long way from beginning to where it is now. It all started with a naked man running in a jungle and collecting coins. We thought about changing coins to bananas, but ended up changing the whole game. Boy, we didn’t know what we were getting ourselves into.

Top Run character pixel sketch
This is a concept of our first guy. Lena has just started to study pixel art.

A naked pixel guy
This is the first guy who actually appeared in the game.

We thought it would be fun if our character was naked and confused. He was with us for a long time and we wanted him to stay in a final game. However, then we realized that we don’t feel like creating a jungle game.

Pixel guy who looks like Tommy Vercetti from GTA: Vice City

While drawing a jungle guy, Lena tried to draw Tommy Vercetti, just for fun and because we love Vice City. Boom! That was a moment when we realized we want to make a 1980’s game!

Pixel Greasers-style guy
This guy was supposed to be the main character of our new game.

The idea was that he is an ex-cop, who was betrayed, his partner was killed and he was seeking revenge, killing as many criminals and crooked cops as possible on the way (any popular 80’s action movie). At this moment we came up with a new name for our game – Top Run.

We were testing it and… it was too dark, it needed a story, cut-scenes. Too much for an endless runner.  We needed something simple and fun!

Pixel character inspired by Marty McFly

So now he is a high school student fighting supervillians for fun. However he looked like some bully or a football team captain. But we needed just a regular guy!

Final version of Kevin

Meet Kevin! He is our final final character. Just an ordinary nice guy, who loves his dog – Buddy,  comics, video games and fighting cyber-villians just for fun.

Honestly, we didn’t expect the game to change so drastically and so often.  But we are happy that we’ve finally found something that we love and don’t want any more changes.  And this is only the character, just imagine how Top Run’s world has changed, you will see it in our next post!

Share on or discuss on

Top Run Villains

What is the most common way to die in an endless runner?

  • a deadly obstacle
  • falling to death from a platform
  • something awful chasing you catches up

We challenged ourselves to come up with something a bit more interesting than that.  Lazy innovation, kind of. We thought, what if you could remove any obstacle in your way and basically run forever? It would just be a matter of practice. We want our game to be one which is easy to pick up, but hard to master.

That’s why we decided to get rid of boring obstacles and replace them with badass 1980’s villains. Not as badass though – you could kill most of them with just one shot of a floppy disc!

Here they are!

Cindy

Cindy is a basic enemy. She just walks around, minding her own business, practicing aerobics. She got her name from Cyndi Lauper, because she is just a girl who wants to have some fun.

Hammer

Hammer is a punk and a biker without a bike. He’s a bit angry about it, so he jumps around and smashes everything.

Bikey Mike

Bikey Mike is a cyber punk who actually has a bike. And he rides it. Fast. Really fast.

Hack

This guy here, Hack, he was born after a Regular Show marathon.  A wrestler who got hit with a computer and it just kind of stuck there. He’s the most dangerous guy out of these four (and we love him a bit more than others because he’s weird).

These are most of the enemies, but not all of them – you will meet others after running for quite a long time, sort of mini bosses.

Our main inspiration are, of course, the 1980’s, with weird cartoons and cool villains (that time when you, as a kid, were watching cartoons and parents were shaking their heads at the “trash” you were watching). We hope we will achieve an atmosphere which will remind you of that time.

Share on or discuss on

What is Top Run about?

Despite the fact that Top Run is an endless runner, we still felt like it needs a bit of a backstory. Why is the guy running? Who is he dealing with? We decided to recall 1980’s cartoons for inspiration.

Typical 80’s action cartoon = mutants/superpowers + loyal companions + villains who want to destroy the world.

Here’s our story.

Kevin is a high school student who lives with his parents and has a best friend – his dog Buddy.

Kevin and Buddy

One day he tries to insert a floppy disk into his old computer, it doesn’t go well and Kevin gets shocked.

Kevin and Buddy looking at their computer

That’s how he acquired his special ability – to run lightning fast and throw infinite floppy disks with a speed of a bullet. Buddy was trying to save Kevin so obviously he also got some very cool superpowers.

Kevin buzzed; Buddy barking at the computer

Coincidentally, the same day a bunch of weird villains has attacked the city and Kevin and Buddy decided to save it.

Kevin and Buddy in a sketched Top Run logo

Pretty deep backstory, just as all 80’s cartoons :)

You will play as Kevin and together with Buddy you will run across the city, killing villains and collecting pixels to become even stronger.

Soon we’ll tell you more about gameplay, art and other stuff. Stay tuned!

Share on or discuss on

What are we doing?

This summer we decided to create our first game and since we are not experienced gamedevs (not even a tiny little bit), we picked something simple enough for a first game – an endless runner. However, we didn’t want to make a simple coin collector (even though it’s still a large part of the game), we challenged ourselves to go as far as we can to make a unique endless runner.

The game is called Top Run and it’s a randomized infinite runner focused on action and fun.

Style

Since we were raised on 80’s movies, and it’s an atmosphere we adore, the game is set in that time and heavily inspired by movies and music of the era. We also love modern throwbacks to the decade such as Kung Fury and Far Cry Blood Dragon. This is a visual style we hope to achieve.

Top Run art - work in progress
Game art in process

Gameplay

In terms of gameplay we are really inspired by Sunset Overdrive. It’s such a fun game with crazy atmosphere and it’s something we would be happy to see in our game.

Basically, you run, shoot, slide, dodge bullets, kill weird enemies, collect collectables and just have fun.

We are planning to release our game on Android first, and iOS as soon as possible. In the long term we are hoping to release it on Steam.

We hope our game turns out to be what it is in our heads and meanwhile we will share more on how we are trying to achieve it and what it is to create a game with zero prior experience.

Schnitzel on the bed
Meow

Share on or discuss on
Interested in something in particular?