Categories
Uncategorized

How very bad internet and enthusiasm made my game idea come to life in 3 days

You might think this is just a rant about a first-world problem, but most certainly not (well, maybe a bit, but the subject of this post is more about mental exercise through having limited resources)
I was on a holiday for 2 weeks in Stadtkyll, Germany with my family.

Before that, I played a card game called ‘Set’ where pattern recognition is a great skill to have to win. I’ll explain it quickly:

One person takes a card and puts it on the table (it’s the same person every time, no turns taken, and he can too play the game along with everyone else)
Each card has a color, shape and number (the amount of shapes). When you find 3 cards that have either one of the same properties, you yell ‘Set!’ and the 3 cards are yours. In the end, the person with the most cards win. I wanted to wrap this game logic in a simple, commercial package but didn’t know yet how.

Back to the holiday. Halfway-trough the holiday I had to update an Android app of mine. I needed to go into Google’s developer console. I did and my eye caught this:

Screenshot from 2016-08-15 12-33-59

And there we are: Peter in a enthusiastic state! You can wake me anytime for anything even remotely related to a Hackathon (not those awfully commercial ones, but the smaller ones are cool!)
It was august the 8th I think. I don’t know what happened that day,  but suddenly every creative moment of the last 3 weeks fell together. Boom. Finally a cool version of the Set-game arrived in my mind (for those interested in the game itself: I’ll leave a link at the bottom of the article).

I didn’t even read the form, that showed up after you hit ‘Submit your game’ – I just started coding asap. (Apparently it’s only for people living in Canada and US, which I found out afterwards :()
The idea I had was to make random bubbles with random colors and patters on the screen. On the bottom of the screen there would be a timer, and the example bubble(s) you have to find.
The timer would rapidly decrease from 100 to 0 in about 4 seconds. When you tap the right bubble, the points left on the counter will be added to your total score, waiting for a new game round.

But there was one problem.
The internet is very, very bad. Even the developer console took half an hour to load.
It was clear to me that I couldn’t use an engine like Unity or LibGDX (to which I’m used to make games with, especially when prototyping)

All I got was a text editor, a OS and some npm tools like gulp, harp (a static server that transparently compiles CoffeeScript and languages alike) and luckily Cordova, upon which I proceeded to write (or better say deploy) my game in. It was set (ba-dum-tss): It was going to be HTML5 and CoffeeScript (that compiles to JS) – No engine like Unity, no LibGDX, not even a JS engine!

But I didn’t want to re-invent the wheel entirely, so I decided to add a rendering engine library, called PIXI.js.
I started downloading PIXI.js (the minified version because the full version took too long to download). It was done in about 1 hour on around 200 bytes per second.

While this was downloading and failing a few times, I started to write the whole game’s logic in a CoffeeScript class with subclasses that represent parts of the game. It looked like this:

totalColors = 5
colors = [0xff4a4a, 0x3aef35, 0x4acaff, 0xefce35, 0xdb35ef, 0xd07925]

class Bubble
  # Bubble pattern and color here

class FindTheBubble
  gameOver: ->
    # Start gameover animation
    @status = 'gameover'

  startPlay: ->
    @status = 'playing'
    @points = 100

  constructor:
    # init empty variables, like array of bubbles and the total score
    @points = 0
    @status = 'idle'
    @bubbles = []
    for i in [0...10]
      # Add bubbles here
      @bubbles.push new Bubble(...)

    @bubbleToLookFor = random bubble of the list

  clickBubble: (bubble) ->
    if bubble is @bubbleToLookFor
      @total += @points
      # Start new game
    else
      #Instant gameover


  # This is what the future rendering engine will call each frame
  tick: (dt) ->
    if @status is 'playing'
      # Here I decrease the 100-points timer like this
      if @points > 0
        @points -= dt * 0.025
      else
        @points = 0
        @gameOver('time_up')

The result is that I can now play the game I had in mind using nothing but my browser’s console. This was not only quite funny to do, it also allowed me to tweak the logic, implement a different kind of score counter, and add more or less bubbles.

The finished game
The finished game

In the meantime PIXI.js finished downloading. I then couldn’t work much further because I never used PIXI.js. So I walked out of the bungalow and went to the park’s reception’s office where they have better internet (but still slow compared to what we’re used to at home). I cloned PIXI.js from GitHub so I had their docs.
I walked out and went back to our bungalow. It is quite a big walk, our house was on top of a hill, all the way on the other side of the park. It was a hill not made for nerd-legs. I don’t know how steep it was, but it felt like I almost had to climb back home.

With the docs under my belt, I started to write my class to a simple GUI. This is I think day 2. The GUI was just a bunch of colored squares and a score panel I made in Gimp.
It was really cool to see the GUI come to life without a single bug, since I already had tested my game with the class I made.

When I got home, I took off the rough edges: made sure the game scaled correctly on multiple resolutions (see this issue on GitHub), made the final bubbles, the screenshots and the entry on Google Play. And that was it! The game was born.

Wrapping up

It’s good to set yourself aside from the conveniences of today’s world from time to time. I’m sure i’ll do it again!

What happened here is that I learned to deal quickly with (intentionally) limited resources, and along the way, even made me think outside the box in no way I ever did!
I mean, I could have sat all day at the Reception’s office, and have a more decent connection, maybe develop the whole game like I usually do, and I’m glad I didn’t.

This experience was great for me, I hope you enjoyed reading this story, maybe learned something from it!

The finished game

It’s called Find The Bubble. It’s available on Google Play here.

If you have any feedback or questions don’t hesitate to leave a comment!

Leave a Reply

Your email address will not be published. Required fields are marked *