tl;dr:
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.
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.
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.
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:
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.
30,[0,1],7,7,[0,1],10,11
],
//The second array contains the items in a similar way.
it: [
[[1,2]],[[1,2]],[0,1],[[1,3]],[[1,3]],[[1,3]],[[1,3]],[[1,3]],[[1,3]],[0,12],
[[2,7]],[0,8],[[1,6]]
]
},
What have I learned making LXk8?