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!

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!

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.

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.

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!

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.

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!

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!

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.
Continue Reading

Top Run: Soundtrack by Beckett

What is an 80s game without proper 80s music? Nothing, that’s why today we are happy to announce that Top Run will have an awesome soundtrack by Beckett, one of the best synthwave artists out there!

Here’s a link to his website were you can listen to all of his music:
http://www.projectbeckett.uk/

He also has a Twitter and a Facebook page:
https://twitter.com/ProjectBeckett
https://www.facebook.com/ProjectBeckett/

Finally, the most important thing. Check out the video to see (hear!) how Beckett’s awesome music feels in Top Run!

Continue Reading

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.

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.

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?

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.

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.

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.

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.

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.

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!

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!

February 12 build 94
Continue Reading

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.

 

This is a concept of our first guy. Lena has just started to study pixel art.
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.

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!

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!

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!

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!

 

Continue Reading

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 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 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 is a cyber punk who actually has a bike. And he rides it. Fast. Really fast.

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.

Continue Reading

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.

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

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.

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

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!

Continue Reading

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.

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.

Meow
Continue Reading