Case study: My first online game — Emojifast
Learnings on creating a simple online game
You can play the game first from your mobile and read the article later 😅
In my (humble) opinion, when it comes to mobile, or handheld, games: Tetris started it all. I remember being a 10-year-old in the early ’90s and everyone in my family would steal my Gameboy Color just to play this game. My dad, my mom, uncles, and aunts: didn’t care about my Mario, Xmen, or Zelda games; for them, those seemed too complicated. They just loved lining up those weird blocks into rows and getting points. They were simply hooked on Tetris. So much I can still easily hum the soundtrack: Tin-tiriring-tirining-tirining-tirining-tin-teen-tin-tin-tun…
30 years later
Tetris is still far from forgotten, but not as popular as it used to be. The past decades have democratized how games are created and shared, as a result, options available have become limitless. My love for games has remained all these years, enjoying more arcade-like quick-fun like ‘the adult’ I am.
Even after all the advancements in tech these decades, something about Tetris and its simplicity is still replicated on the most popular mobile games nowadays. By most popular I don’t mean the top of the Apple Store or Google Play Store listings: I’m talking about what you see to your bus-neighbor (socially distanced ²⁰²⁰ ) on your (un-quarantined ²⁰²⁰ ) commute. Extremely simple games that require few clicks or hand gestures to play.
2020 Happened
Yes… it did 🤯
For me, that meant staying at home a lot! Once I ran out of series/movies on Netflix, I decided to embark on a project to keep my mind active, and hopefully make the days shorter. With many years of working for multiple companies, I wanted to do something I haven’t been able to do before.
Of course, a game was the first thing to cross my mind 🎮
Topics
For my first game, I wanted to start simple. Avoid creating new concepts or ways of playing: start with something people know already and are used to in their day-to-day.
Creating a Word game was a start: emulate online one of the infinite puzzles you may find on the back of the newspaper, maybe add a funny twist or multiplayer functionality. Not being a big fan of these games myself (can’t even dare to play Scrabble) I decided no.
Still, I thought since typing is so close to our daily routine I wanted to create a game where its main mechanics was to type. I imagined mixing something like Guitar hero + typing = TYPE HERO 😯
…maybe a bit lame.
I needed something a bit more modern.
Then 🍉💾😵 Emojis 😃🐄🍒 came to mind.
Why not? These small little pictures have become part of our daily lives for the past decade. They add flair to our messages, emotion, context, and many times they are the message themselves. I remember when Emoji’s started on messaging apps; they were limited to a few dozens, those good old days they were quite easy to find and remember. Nowadays every few months there are more, it actually has become harder to find since there are so many options!
Did you know there is an oyster emoji? 🦪
What about a cheese mousetrap? 🪤
or a heart? not this ❤️, I mean this:🫀
So the game would be simple:
several Emojis are displayed on the screen: the player needs to find them on her/his keyboard as fast as possible.
Little did I know that there are multiple ways to create a game this simple, the hard task is to find which would be the most engaging. There I embarked on my research into game design and how could I make a Tetris out of it.
You have read a lot… why don’t you play the game first from your mobile and continue reading the article later 😅
Native App Vs Web App
Even before I started sketching initial designs I knew I would find myself at a crossroad and take this decision. I listed out the Pros and Cons of each, it ended up looking like this:
Native mobile app Pros
- Playing experience could better since native apps work a lot faster than web apps
- Sizeable functionality as it would have access to system resources
- Can work without an internet connection
Native mobile app Cons
- The project could become expensive to build, maintain and update than web apps
- Working with different platforms (i.e. iOS and Android) usually means designing and building the app from scratch
- A Native app would require approval by the app store (could delay launch)
- I have no hands-on experience coding Native Apps
Web app Pros
- Access would be immediate — not need to be downloaded or installed — web apps function in-browser
- Easy to maintain — it would have a common codebase regardless of the mobile platform where it is running
- Can be updated instantly and without user actions
- A LOT quicker and easier to build than native apps
- Without an app store approval, it can be launched quickly
Web app Cons
- Do not work offline (could create service workers though)
- It is slower than mobile apps and limited in terms of features
- Less discoverable than native apps since a website wouldn’t be listed in a specific database, such as the app store
Result
Web App ended up being the clear winner since it was easier to build, maintain and evolve. Also, a faster time to live and no need to ask people to download the game. I was ready to work with the restrictions that came with this decision… and hey, if it became successful why not turn it into a Native App? the possibility is always open.
Game Basics (3 little post its)
Once the pencil touches the paper imagination starts to do its thing. That’s when I started having multiple ideas on what a player would like and make the experience enjoyable. Still, every time I came up with something new it all seemed very cluttered.
I played a few rounds of Tetris to understand what I liked so much and I came up with a few basic notions of good games.
- The game has to work around a simple Core Game Mechanic
I tinkered on many ideas: limiting the input options, outputting images instead of emojis, or having to type words now and then. This would have all made my game confusing since players had little time to understand, therefore it would be hard a lame. I needed to keep my initial thought: several Emoji are displayed on the screen: the player needs to find them on her/his keyboard as fast as possible. Anything I add shouldn’t block that simple interaction and I shouldn’t ever divert from it. - Easy to learn, hard to master
Every successful game follows this principle: the user starts easy and little by little it becomes more challenging yet doable. The ‘fun’ comes with this difference of difficulty through time. I needed to create an algorithm that makes it harder yet the core game mechanic remains the same. - Game Over
As a player: What happens when I finish? Why would I play again? why would I recommend other people about the game? What is my ‘reward’?
What happens after (or hopefully between) games was very important to the success of the game.
I wrote these 3 principles down in a post-it over my screen. Every time I took a decision, removed or added something I briefly glanced at them to make sure I was on track.
First Designs
Emojis + Guitar Hero + Your Phone = Fun
…or not.
In the beginning, I decided to skip any type of process and go straight to drawing and testing the front end. My initial concepts were similar to those of Guitar Hero. Basically, you have 5 possible keys to tap and you need to follow the ‘rhythm’ and order as they are displayed on the screen. I tried in many ways and it simply did not make sense. As a player you wouldn’t be training on how to find emoji’s faster; but how to type in sync with the game board.
🤯
I paused…
…deleted all files…
…trashed the drawings…
…and started again.
I went, therefore, step by step. From a basic backbone and adding bits on top.
Below you’ll find how the app looked more or less (not actual mockups) when I was iterating upon the game’s architecture. Also, I added some Memes on the side as a visual representation of the emotional rollercoaster that is going through each new design.
Enjoy! 😊
I started simple: Need 2 things — the emoji displayed and the input field. The design worked well and it let me program the algorithm to display emojis and change them as soon as the player types them on the input field. It felt good already.
Still, I was missing two things: how to lose? how to know it went better than the previous game? I decided to add a limit for playing. The premise would be «how many emojis can you find in XX time» depending on how far you’d get you’ll have a certain number of points. These would be tricky to program since it needed to make sense to the player as it went along.
BTW: during this time I was thinking of calling the game «emojihunt» since you’ll be searching for them on your keyboard. I later discarded this idea.
With the time remaining + points it felt like too many numbers on a screen. That’s why I decided to remove the time counter and replace it with a progress bar instead.
Never did I got into a sound logic behind how to set points. My two initial ideas were:
- Points are higher/lower depending on the emoji
- Points are higher/lower depending on how far apart whereby each emoji
I tinkered on both ideas and it was tough to create a visual representation to display to the user what each emoji vas valued. Then it raised questions on how hard can the game become? and how random can the order of the emojis displayed be?
I got rid of the points.
The game would therefore show how many emojis the player got after the game is finished. Also, I realize the «Progress Bar» (as its name defines it) would be counterintuitive in a horizontal position: since it will become lower with each second rather than display how much time is left. Switching it to a vertical orientation it would look similar to an hourglass ⏳ where time is lost «due to gravity»
The small bar made the screen unbalanced, therefore I made the ENTIRE SCREEN into a vertical progress bar. My thoughts were to gradually change color. It would start in green, become yellow on the middle point, and ending in red in the last seconds.
There is something about time where we cannot be abstract about. We measure time by numbers and seeing the clock go from 5… 4… 3… 2… 1… has followed us from the start of every year.
I brought back the timer and ditched the progress bar. With it, I also resorted to solving the «points» and «changed difficulty» issues I faced before by letting players remain on the game longer as soon as they got more good answers and removing time if the answers were wrong.
I played around with different combinations and ended up with the combination of 15 seconds as a starting point, +3 seconds when you get an emoji right, and -2 seconds when you get an emoji wrong.
After many days I slumped against a wall.
A gray wall full of emojis.
I had been developing all this time directly on my laptop and had not tested the interaction on an actual mobile phone. As soon as I did so, I was introduced into the weird world of how the keyboard appears on the screen and where the mobile browser decides to scroll towards to kind-off display.
I tried all the tricks and hacks to silver-bullet my way into a consistent and «unscrolled» layout. Still, I was working against «higher forces» therefore I decided to work with the small window available on top of the keyboard.
I calculated 40% to 60% of the viewport. The input field and timer should be next to each other and the displayed emoji would appear on the top.
The progress bar came back to life again! Now taking the available space behind the displayed emoji. Since it was hard to see the timer while at the same time search on the keyboard: I wished to give players a notion of how much time is left by having the progress bar slowly moving behind.
As before I tried changing the orientation. Following my hourglass/time principle.
To spice things up I thought of putting the progress bar in front 🤔, this way I could make it more challenging when the player has a lot of time left.
I then moved to a horizontal orientation since many emojis have the same yellow rounded top part (look at 😀😊😄🙂😁😋)
Still, I wasn’t convinced since the progress bar would have to be the same width as the displayed emoji. It would mean many times it was completely covered and most of the time you could see half of the emoji or less.
Then… I hit jackpot 🎰 and came up with a better idea…
…let’s make the emoji change in size. It would become bigger if the player managed to get more time and gradually become smaller until there is no more time left. Since the player is mostly staring at this element it made total sense.
P.S: this was my happiest moment in the whole development.
… but of course, there was a problem.
How do you start the game?
During the development, I had been starting the game if the player types ‘q’. This meant you needed to click the input and press ‘q’.
My start button idea could fix that! …or not. The first impression of the game would be very odd, it would start without anything visible: an empty input field next to a stopped timer.
I decided to pick an emoji ( 😀 first of the list) as a starter instead of ‘q’.
How would people understand how to play? with instructions of course 😀 I provide a modal as soon as the player opens the screen with short instructions on the game mechanics. This was not a solution I was very happy about, yet was a quick fix to solve the problem.
And in this connected world, how could I make the game relevant? by social media sharing of course! 😄 Players will be able to share instantly their results with friends after they play.
Here is where I hit a big wall when it comes to Web App features compared to Native Apps. Web APIs of main social media sites are quite limited when it comes to ‘prefilled messages’ generated based on information coming from a website. If I had developed the game as a Native App this would have been a piece of cake. 🍰
It was too late to start redeveloping the game as a Native App, so inspired by Spotify’s 2020 Wrapped, I wanted to create unique images based on gameplay that would be ‘cool to share’.
I spent a lot of time messing around with this: the creative freedom made it so much fun in the end. I resolved to create a grid where emojis are randomly positioned with multiple sizes depending on how long the player took to find an emoji. Above I show an example of a fairly good player (me 😄) that got 24 emojis!
Money 💸
Even though I enjoyed working on the project and did not expect to become rich doing it, I ran into the money question: how is the game going to gain revenue? My thoughts were to gain enough to pay for the domain and hosting; making the game financially self-sufficient.
Google Ads: The Holy Grail of online advertising and my first answer to the money question. In retrospect, I was very naive when I thought this was the answer. Google Adsense (the publisher side of Google Ads) required me to create more content around the game since it didn’t qualify as a ‘tool’ and more as a ‘blog’. I attempted to create a home page that sells the game as an Emoji finding exercise tool: Google did not seem to buy into the idea.
A bit frustrated, I just added some space where ads could be located, if someone is interested they can get in contact with me. Maybe I’ll create a Patreon account in the future.
After a while, I just simply stopped designing and developing. The potential of this game is huge, yet I wished to officially ship it out.
On the top right, I put a «Beta» for self-assurance, I’ll improve the game later this year 😉
Aesthetics / Styling
The styling came naturally. I wish to have a mix of how candy crush looks, remove a bit of its glossiness, add some emojis to the table, and provide an 80’s teen cover book atmosphere.
(The picture above is a very good example of how I felt figuring out the whole styling.)
Closing
This was fun! 😄
…and a lot of work! 😅
I would encourage you to do this type of work. Why?
1. It helped me maintain momentum
Keeping myself mentally engaged during off-work hours gave raise to my energy, stamina, and motivation. As a curious mind, all the tinkering around removed that cabin-fever tired feeling from the lockdown and added a sense of progress.
2. It inspired me
Getting my creative juices flowing by taking some time away to play: helped me refocus my energy and allowed me to return to my routine refreshed and with some new perspective.
3. Kept me up to date
I can read as many news, blogs, tweets, etc… but my actual knowledge always comes from getting my hands dirty on new things.
Hope you enjoyed the game and this awfully long read (sorry for that 😅).
You have read the entire article… GREAT!!! be rewarded by play the game (on your mobile it should work like a charm 🍀)
PS: If I were to give Emojifast to my 10year old self, this is how the Gameboy cartridge would look like:
