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

Top Run Visual Style: Then and Now

Today we’re sharing the visual progress of Top Run – how the game’s appearance have changed from the very first try back in June all the way to the latest build we have.

Back then it wasn’t Top Run. Even in the slightest. We were trying to create a simplest endless runner possible and this is what we had somewhere in the middle of it. Nothing, to be honest.

Extremely simple jungle-style runner game
June 14, build 7

This was the moment when we decided we want it to be an 80’s game. We’ve changed some colors and felt that we have to start from scratch now. So we did.

Extremely simple 80s-style runner game
July 2 build 13

The very first build of Top Run. The guy just ran there, couldn’t even jump. It was a start though! How do you like these 80s houses, by the way?

First build of Top Run with placeholder assets
July 11 build 1

It still wasn’t really a game here (even though the guy could actually jump now), but we were starting to understand in which direction we wanted to move.

Build of Top Run with some of our own assets
July 21 build 5

We’ve skipped a few months because we didn’t have time to work on Top Run, but we were back in the game! We’ve added Buddy (he wasn’t called Buddy at that point, but he had a hoverboard) and some enemies. They were all just walking around, you couldn’t shoot, but it was beginning to look like something.

First build of Top Run where all assets are ours, but very simple
October 7 build 11

Finally, enemies worked like they were intended to (you can see Hack right here), you could jump, you could shoot, even the menus were more or less good. Obviously there were no animations yet. You may also notice that we didn’t go for the synthwave look back then.

Looks very similar to the previous screenshot
October 24 build 17

This was our third Buddy (and a final one!). Around that time we realized that you could basically run forever on the ground level. We fixed it by adding a new running enemy. We didn’t know how they would look like, so we just threw an old Buddy skin there. The buildings here are the actual buildings we use now, even though their looks changes 12 more times.

Looks more or less like final Top Run, but during daytime
November 19, build 25

We tried to make it look like 80s, but didn’t know how. At this point we needed to explain in which era the game was set in. Then it striked us: there is a look that always reminds of the 80s, that we all love and adore. And we switched to  a synthwave-ish purple colors.

Switched to the synthwave look
December 2 build 36

We’ve tried a lot of things before we got to this look. We’ve even tried post-processing, but turned out phones are not ready for it yet.  It took us quite some time to get that post-processed look without actual post-processing. This is what we ended up with and we’re happy about it!

Much more refined synthwave look
December 18 build 53

This is our current build. We’ve changed thousands of things between this and the previous one, but you can’t really see it. The look was almost finalized back in December. Now, a thousand more of little invisible changes awaits!

Finalized Top Run look
February 12 build 94

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
Interested in something in particular?