Making a space-shooter game (on accident)

 
 

Company

Personal project

Date / Location

July - Aug. 2016

Methods

Programming (coffeescript)
Visual design
Sound editing

Topics

Prototyping
Programming
Microinteractions
Animation


Problem

In the summer of 2016 I was determined to improve my prototyping skills. I set out to learn Framer, a prototyping tool powered by code.

Approach

I started by making a list of the interactions and animations I wanted to create. During the first couple of weeks, learning felt like a chore. One day, an idle thought piqued my curiosity: Could I make a thing shoot a thing at another thing?

When I figured that out, I wondered: Could I make the shooting thing randomly appear and disappear? Before long I had created a kind of abstract 'whack-a-mole' game. 

A week after entertaining an entirely "useless" question, I had the skeleton of a space shooter game. In the subsequent weeks I added new features to the game, introduced sound effects and refined the artwork.

Impact

By the end of the month, I had "Gem Wars", a space-shooter game with:

  • Asteroids that appear randomly and shatter into spinning fragments;
  • Mysterious gems that increase your score when you acquire them;
  • A shield that gets depleted after 3 collisions, but refills if the player gets a certain kind of gem;
  • Sound effects for asteroid impacts, ship damage and gem acquisition.
  • A "high score" interaction sequence that lets users add their name to a live leaderboard linked to a real database.

Try it yourself below. You can drag the ship in all directions (not only left and right). Can you make it onto the leaderboard?

Highlights

Using randomization to keep things interesting

Randomization allows the game to stay unpredictable. It makes each boulder explosion unique, makes the appearance of each gem a surprise, and keeps the user on their toes to avoid the next boulder.

I also used randomization to generate the stars in the background, which create the appearance that the ship is moving in three-dimensional space:

The code I used to generate the moving stars in the background.

The code I used to generate the moving stars in the background.

Designing visual artifacts

I used Sketch to design the ship, its shield, and the colorful gems.

Artwork for the game.

Artwork for the game.

Linking to a Database and checking for high scores

By linking the prototype to a Firebase data repository, I was able to save scores from previous games. This let me create a live leaderboard that users could add their names to if their score was high enough.

Data from the game gets saved in this database.

Data from the game gets saved in this database.

Next Steps

To improve this game, I could:

  • Add music.
  • Create different modes of experience. Right now it's a constant adrenaline rush. What if there was a sequence that was more like a puzzle, without the pressure of constant boulders passing?
  • Introduce an element of time into parts of the game by challenging players to accumulate points before the clock runs out, or by doubling the value of gems during a limited window of time.
  • Introduce an enemy character or creature to support a meaningful plot.

Takeaways

Doing something for fun is the best way to learn

My takeaway from this project is that when it comes to tech skills, the best way to learn is to play, tinker with things, and experiment.