Making of my first short game

July 24, 2013


Game making is fun, rewarding and takes a lot of time. Here’s LXk8, my first game.

Making of
I decided to keep it short. My “definition of done” was:

I got my first console, the NES, for my third birthday. I wasn’t allowed to play it for another two years, though. My first game was “Ice Climber”. I played it for hours, until I was able to reach the top of every level and attach myself to the condor.

Ice Climber

I guess that’s when I fell in love with pixel-graphics. I decided to go with this style for my game. A big plus is: Since there are less pixels to edit, the sprites can be changed quickly.

The first thing I did was to choose a general theme for the game. Two of my friends and me started skateboarding and longboarding last summer, so the idea of a sideways-skateboarding game came to mind.
(Another plus: No need to animate a walk cycle!)

I took a pixel-image of my friend Alex I made some time ago and made a skateboard-version out of it. That would be my first sprite.


Now to the main problem: I have never made a game before, so where to start? Canvas to the rescue! I played with Canvas and Javascript before, but never made something finished. How could I find out how to approach game-coding?

I chose two small canvas-games and simply retyped them myself, to get an idea of how to structure a game-loop. The first was Snake by Stephen Burgess. The other was Tiny World by Orangepixel. I knew I could learn stuff by just copying it and it really helped a lot! So after reading up on graphics-loading and controls, I threw together a basic scroller.

Skate 1
Play the first version (Warning: Has sound, may be loud)

For the next version I implemented a basic jumping mechanic, similar to Tony Hawk’s Pro Skater: You press a key to charge jump power and release it to jump. There I had my minimalistic controls. It worked fine on touch and with a mouse. Well, not really fine, but better than rendering on-screen controls.

Skate 2
Play version 2 (Warning: Has sound, may be loud)

I needed a theme for the environment. My friends and me used to meet at a school where nobody was in the evening or on weekends to skate. So I took objects from there. I also added containers and plain wooden boxes to have something to skate on. Here is the current spritesheet:

LXk8 Spritesheet

The weeks went by and my evenings were full of coding, pixel-art-making, bug-resolving, thinking, adding, removing, being motivated, being frustrated. I kept a Version of all major changes. I also set up a local GIT-repository in my Dropbox so I could commit every evening and reset, in case I wanted to revert lots of changes.

I tried to implement sound-effects twice, but as of now I could not manage to make it play fast enough, reaction-wise.

The next steps

I will stop developing LXk8 for a bit. I need to think about if and how I could make it fun and interesting to play. The other thing is: I am not an experienced developer, so the code is kind of hacked together and is in dire need of refactoring.

Coding the level

At some point I needed to create and edit the level. At first I had a long array where “0” was 50 pixels of space and “10” to “80” were the different objects. A loop would then place each object after another. The problem with this approach was, that I couldn’t change the beginning of a long level without changing everything else, too. Plus it wasn’t really readable. I ended up splitting the level in groups of elements and giving each group a pixel-offset, so I could move the parts independently.

This is how one part of the level looks in JSON-code:

    //The offset is the position in the level for the whole block.
    offset: 8000,
    //The first array contains the obstacles.
    ob: [
      //The numbers represent the elements like containers and benches.
      //The array [0,1] means empty space for one time 50 pixels.
    //The second array contains the items in a similar way.
    it: [

What have I learned making LXk8?