8bitmatt

Far From Home Postmortem

Short & sweet

I made my first real game! I’ve been in love with the idea of creating a video game since I was a kid and I finally went for it. The game I created is called “Far From Home”; it’s built in HTML5/javascript and everything from the initial concept to final implementation was done in 48 hours for the Ludum Dare game making competition.

Update 1/27/12: Play the latest version here. (I'm constantly improving this version of the game. You can follow its development on github. Best viewed in Firefox now! The graphics are so crisp!)

You can play the original here and view my submission hereNote: I only had enough time to develop and test in webkit based browsers, so use the latest chrome or safari

The juicy details

Some history

As I mentioned above, our story starts way before this past weekend. Like most people that grew up during the early 90’s I have a very special place in my heart for video games and I have always fantasized about creating my own. Until recently that would have seemed impossible. Lucky for me I chose a career (web development) that helped me build some skills over the last few years.

I started re-visiting my childhood dream of creating a video game back in 2005-2006. Realizing that flash was my best option and that I lacked the skill and understanding to use flash at the time, I lost interest quickly and worked on becoming a better web developer.

Fast-forward to Aug 2010, one night on Netflix I stumbled across the great documentary “King of Kong” (If you haven’t seen it, stop reading and go watch it, seriously it’s that good). After watching that movie my passion for games was back. I started getting back into video game collecting and that ultimately led me back to game development.

Earlier this year I had a brief stint with 6502 assembly and developing for the NES (more on that some other time). From there I’ve been reading as much as I can about game development and design.

Ludum Dare

I first heard about Ludum Dare through Shaun Inman’s blog (a constant inspiration). After seeing his last entry I realized that browsers had come a long way and I actually had the exact skills I needed to get started in browser based game dev. I went through a few tutorials and learned some basics.

So, Dec 16, 2011, about an hour before Ludum Dare 22 started I made up my mind and decided I was going to enter. The theme was announced, it was “Alone” and here’s how it went down…

Alone

A few minutes after the theme was announced, I headed out to dinner with my girlfriend and brought a small notebook with me to jot down ideas. I spent a good amount of time thinking about what it meant to be alone and how that could translate into a fun game mechanic. I scribbled down some ideas that I didn’t really love. Then out of nowhere it hit me. Space. This was perfect, it met all of the requirements in my mind. Almost all early video games had to do with space and because of that I feel it had a deeper connection to this theme than most people would recognize. Playing an arcade machine or even some early consoles was mostly an activity we did “alone.” Anyway, in a more literal sense, how could a human not feel more alone than floating helplessly through space?! On top of all that, the space idea let me easily use that 8bit aesthetic that I love so much.

I researched space a little and came up with some enemies. The rest of the first night I spent in Photoshop creating the space background (inspired by NES Galaga) and the 2 frame spaceman animation, pixel by pixel.

Saturday, first thing I did was study up on some of the new CSS3 techniques I wanted to use. Then I started coding the basic structure. I decided to not use canvas and just go straight DOM for this game (Here's a really good video that says it’s supposed to be more performant). The javascript framework is pretty simple I just hacked together some “classes” using John Resig’s simple javascript inheritance helper. For DOM manipulation and event binding I used zepto.js, it's way lighter than jquery and faster in a lot of ways. Finally there are a few other small helpers in there based on how shaun inman structured his games. Note: I still consider my game a very novice and naive approach, so don’t look at the code thinking you’ll see this amazing structure, I’m learning too.

Probably the most fun I had the entire time was mid-day saturday. I started to implement the player input / movement and after a few revisions I had created really basic but believable “floating.” After that breakthrough I designed the enemies and O2 powerup then continued coding late into the night until I had this semi working prototype.

Sunday, I spent all morning coding the O2 meter and all the game logic behind that. Then I focused on collision detection. Probably the toughest part. I’m still not totally happy with the current collision detection but it’s close enough and I was running out of time. With 10 mins to go until the deadline, I knocked out a decent intro and game over screen.

About the game

Far From Home in its current state is designed to be really unfair. You’re always losing O2 faster than the game gives you powerups. The main goal, if you didn't already know, is to survive as long as you can.

The enemies and powerup spawn points are random. The solarwind enemy (also thought to be space bacon by some people) is totally random, they are not generated on a regular time interval like the other items.

I used my iphone stop watch to test if my item spawn times were actually happing at the correct intervals. Very scientific.

The meteoroid enemies do damage by making your O2 meter drain faster and there's no way to recover.

The solar wind enemy exists to mess you up by pushing and pulling you. But it can also be used as a way to launch yourself out of harm's way sometimes.

There’s an exploding star enemy I fully designed but didn’t have time to implement for the competition.

While I was developing I had activity monitor opened and was really trying to optimize the game and keep CPU usage low. Some of my first attempts at things made the CPU spike but I got it fixed and a lot of the animation is GPU accelerated. Well at least I think it is, the accelerated compositing is still a grey area to me. It's hard to tell what the browsers are actually doing. The reason I think it is accelerated (like it should be with CSS transforms/transitions) is because my fan would kick on even with really low CPU usage, so I'm guessing the GPU was getting a workout.

The entire game was designed within the NES color and sprite restrictions. I didn't even fill up the available background or sprite palettes (pink = unused). If you're wondering why some colors are repeated it's because the way you're allowed to use color in NES games is really restrictive. For example, in your background, you can only use one of your available background palettes in a 16 x 16 pixel region, even though each "hardware sprite" is an 8 x 8 pixel image. My game’s resolution is also the NES resolution 256x240 so maybe it will become a real NES game one day! (Note for the die hard nerds, I know the z-index (how things visually stack) might not be totally accurate, but I'll worry about those details if and when I port this to the NES)

I wanted a short intro scene and proper ending for people that can survive for a long time, but just couldn’t fit it in.

I had plans to create music and sound effects but again ran out of time.

Tools Used

  • ugmonk notebook (buy them here)
  • Macbook Air (OSX Lion)
  • Activity Monitor
  • Photoshop CS5
  • Coda (code editor)
  • Google Chrome (web inspector)
  • iPhone (stopwatch)
  • Garageband (well not used yet, but soon)

Overview

Overall I’m super excited and proud of what I accomplished. There were times where I thought I might not make it but I overcame and saw it through. I think what worked for me was switching between design and code. It kept me from getting too burned out or discouraged in one area and encouraged me to keep trying. Ludum Dare has been one of the most rewarding things I’ve done recently. Finally, I intend to keep working on this game and improving it. I’ll leave the original untouched and include a link to the latest version(s) soon.

2 comments (Add your own)

1. Chad Jaggers wrote:
Awesome game, and awesome post. I like seeing your thought process and steps you went to in order to make Far From Home.

I'm interested in seeing it completed to your specifications. Will you be participating in the next Ludem Dare, or another one soon?

Keep it up!

January 3, 2012 @ 10:00 PM

2. macbook wrote:
Awesome game!!!

January 1, 2014 @ 1:46 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

© Copyright Matt Grimm 2014. All Rights Reserved.