IT BELONGS IN A MUSEUM – Write-up
A screenshot of gameplay. I knew it would be a good idea to use the names from Key and Peele’s East/West Bowl sketch.
For this LD 48-hour competition, with a theme of ‘You Only Get One,’ I have submitted ‘It Belongs’ in a Museum, a platforming game where you dig into the ground to find treasures. You can only take one of these treasures home with you, so you have to choose carefully which treasure you keep. You can read more about the game on its Competition Entry Page, so here I will dive into the development process, content creation, and how I finished this game off.
1. Development
I developed this game for the HTML5 canvas using the ImpactJS engine. I have been using the ImpactJS engine for a year now – if you look back to LD24, I developed another game using ImpactJS, and every one since then. I am extremely happy with the engine – it allows me to get something working quickly so I can focus on content and mechanics instead of worrying about low-level game mechanics like collision detection and animation.
Developing configuration-driven ImpactJS code is easy to understand and implement.
With the low-level stuff taken care of, I was able to implement a simply ‘mining’ system in my game, where you can dig out blocks of material to find the treasures contained inside. Instead of creating a new Entity for each block, I opted for a totally configuration-driven approach. When I created a block, I gave it an object containing its details, and the Entity rendered and behaved depending on that configuration. No more need for an EntityGravel, EntityStone, EntityObsidian – only EntityBlock with carrying configurations.
I took the same approach with enemies. There are 4 types of enemies, and each one has slightly different behavior and animations. That still wasn’t a problem, and I used the same configuration-driven approach as the Blocks. I implemented different branches of logic for each hostile enemy, and was able to implement different animations based on the configuration as well.
HTML5 development, regardless of engine, is my preferred way of game development today. It is much easier to understand and set up than a more traditional development environment, like Java. I have XAMPP set up, so creating a new game is as easy as copying a folder, and opening a web browser.
2. Content Creation – Graphics
Art is hard – look back at the other games I’ve created and you’ll see that the artwork is lacking, to put it mildly. For this game I was determined to simplify the art, using simple square shapes and finding help where I could. I made a small breakthrough Sunday morning around 4am, when I decided to test out the Effects menu in Paint.Net, and found the utility of the Noise feature. Holy shit, it opened every single door to me. All of the blocks and the BGs are done in largely solid colors with large shapes, but applying the Noise effect adds randomness. Dirt looks like dirt, sand like sand, and so on. It also helped with the large BG images, creating variance in the skies, and making some nice starry night backgrounds. I also took advantage of the Gaussian Blur effect to blur the background, making it easier for players to distinguish foreground from background. The effect makes the game look more professional, and more playable.
Character animation is easier when you use large shapes, scale up to cover up mistakes, and copy-paste where you can.
For the player sprite, simple squares were used everywhere. Squares were used for the shoulders, head, legs, and arms. For animation, I copied and pasted where I could, to produce the animation quicker and look better than what I usually produce. You’d be amazed at how good a square with rounded edges works in any situation.
3. Content Creation – Music
Music is also hard, but there are tools to make it even easier. I generated the music using autotracker.py ( see THIS entry from my LD blog on how to set up autotracker – worth it!). The music that gets generated is nice, often catchy, and is a ’16-bit’ type of sound that I really enjoy. ImpactJS has easy-to-use music and sound features, so I only needed to load a music object and call a .play() method. Simple. Sound effects were generated using BFXR, another tool with a ’16-bit’ sound.
Originally I wanted to play my own music, and have been practicing for a few days, but there just isn’t enough time. I had some melodies and tunes, as well as creative sound effects, but that was a no-go. Not only is there not enough time, but my recording equipment is garbage. All I have is the mic on my laptop, and recording any sounds – with my piano or voice, anything recorded wasn’t worth it. It would also have been very difficult to process those recordings even if they turned out good.
The audio work exposes one of the biggest problems with HTML5 – audio support. On a personal note, I have no freaking clue why some browsers support OGG, some support MP3, some support other formats – but not support all. It’s a bit of a crap-shoot as to which audio works – luckily ImpactJS has tools for that. Loading an audio file uses a path to the file – ‘media/sounds/hit1.ogg’, but you can use ‘media/sounds/hit1.*’ to tell impact to use whichever audio version works for your browser. Another way ImpactJS makes development easy.
Using Audacity to chop your sounds up makes it easy to find the effects and music you want.
Once I had raw audio files for effects and music, I used Audacity to process and convert the audio. I cut some of the BFXR effects to simulate a snake and bug sound and messed with volume levels here and there. Simple. Converting is a clicky-clicky pain in the ass, but it is an easy process.
4. Putting It All Together
I have learned a lot about game development in my year and a half of LD Competitions. You can look back to my original game (though you probably shouldn’t) and see a near-total lack of understand as to the most basic elements – FPS, collision detection, input – but I look at what I do now and I feel quite proud. I have come a long way as a programmer and game developer – my only wish is that I knew what I know now 10 years ago when I started college. It may have only taken 4 years instead of 6!
There is still a very long way to go, though. These weekends are hellacious on my body and sleep schedule, and I often get single digits of sleep over two nights. Come Sunday and Monday I am a husk of a man, barely able to watch my beloved Carolina Panthers on Sunday. This time management is an area I have been working on, and continue to work on. This time, I did much more initial documentation, leaving little to none of my game up to chance or ‘Play it by ear’-ness. Start to finish, I had the game idea, flow, and mechanics documented. I even had most of the text worked out ahead of time. When development started it was code code code – no wasting time on wondering what to do next.
Like you dad used to say, let the tool do the work! Use resources like BFXR and autotracker.py to generate content for your game. They generate great effects extremely quickly, leaving you to concentrate on more necessary tasks. Experiment with those tools as well – discovering the Noise and Gaussian Blur saved me a hell of a lot of time and made my end product look so much better. Use these tools, poke around with them, and find out what they can do!
5.That’s A Wrap!
So brings to end another LD competition. I have no complaints this time around – sometimes I bitch about the theme or my time management, but not today. I was able to produce a full product – a Video Game with a start and an ending – kind of, but that’s intended. I encourage you to play IT BELINGS IN A MUSEUM, leave your feedback, and help me become a better game developer. Play the game here!
Maybe someday instead of feedback, you’ll leave your money!
