The Idea

Beat Boost was conceived for Boing Boing’s “Games Inspired by Music” contest. The contest was a call for games designed around chiptunes — a style of music inspired by the midi tunes of the games of yesteryear. I chose to take this rather literally and immediately began to look into using music tracks to generate the game world.

When I started work on Beat Boost I planned for the game to be a 2D platformer/racing game, not unlike Uniracers on the SNES. The player would run through the level and have the ability to perform various tricks and stunts and chain these together. The ultimate goal was to achieve the highest score possible through a clever combination of stunts. There was also going to be a two player, split-screen race mode where two players would sit at a single computer a race for glory (and highscores).

The levels in the game are directly generated from that level’s music. Doing this was a multistep process that produced a MIDI file that would be used to generate the level. The tool I used to transcribe each track into midi only took WAVs as input so each mp3 was first transcoded to WAV and then transcibed to MIDI. The resulting MIDI file could be charted to look something like this:

The Process

It’s pretty easy to envision a platformer game when looking at the MIDI note chart. From here each MIDI was loaded into the game and parsed into a level, where I quickly ran into two problems with the platformer aspect of the game. The first was that none of the music tracks I was using were explicitly composed for a game so they don’t loop well. Since each level was generated from the music track for that level the player would have to keep pace with the beat to complete the level before the track ended and in order to do this you have to move incredibly fast. So fast, that it was impossible to react to changes in the level at all.

The second problem was that the tracks I was generating the levels from where, again, not designed to be used in a game so there would be clusters of notes that would break the flow, gaps in the notes and just generally crappy levels. A lot of these issues could have been smoothed out but this takes us to another issue I had: time.

Though the contest lasted about a month I didn’t start work on Beat Boost until there was about a week left. This short deadline forced me to cut a lot of features and constantly rework things so I could submit my game on schedule. Being a part-time, hobbyist game developer, this strict deadline was nice in that in forced me to push forward and work through problems rather than leave them for another day. The downside is that I needed to cut features like multiplayer that could have upped the fun factor of Beat Boost quite a bit.

The cutting began with the core of my original idea. The racing and platforming aspects of the game just were not coming together and the entire experience of playing the game could be summed up as “frustration” which is not a good then when you are going for “fun!” So I started looking at what the game was currently doing well and that turned out to be rapidly colliding with lots of blocks while listening to cool chiptunes. This is when I moved the game toward what it ultimately became: a sort of interactive particle generator (with highscores).

At this point Beat Boost was going to be a game where the player piloted a space ship of some sort through a field of blocks that replenished the ship’s fuel and increased the player’s score. Moving the ship around the screen consumed fuel so there would be a strategy to when and where the player should move the ship to maximize their score. Colliding with the bottom of the score would replenish fuel but deplete the player’s score; hitting the top of the screen would just reduce the score. Anytime a block was hit it would shatter into a spray of smaller blocks that would trail the ship. Each of these blocks also gives the player fuel and points when collided with, though less than the larger blocks.

I had also redesigned the multiplayer mode to be a shared-screen racing mode but the race was now to collect the most points before crossing the finish line. This was the inspiration for having the large blocks shatter into smaller ones: there could be a strategy and “fight” between players to be out in front or to draft the leader. The smaller blocks would yield fewer points, but if played right you could achieve a higher score by staying back. The more desirable position would also change given the density of the blocks. With a high density of blocks it would pay to be in front since the front runner could hit more of the big point blocks than the drafter. In a lower density section it would pay to draft since there would be so many more small blocks than large. This positioning strategy based on block density dealt nicely with the fact that the levels would often have clumps of blocks or areas lacking many blocks. Unfortunately the multiplayer mode was axed entirely as I ran into the deadline.

Despite the fact that multiplayer was now out of the picture I had finally settled on the core mechanic of my game and the name “Beat Boost”. The trick now was to really tweak the mechanic until it was as good as it could be. One issue with using the blocks as fuel was that the player had to constantly boost, depleting their fuel. I spent some time tweaking the values for how much fuel each block should give the player but always found that I’d give too little or two much. This was a particular problem because I had ceded control of my level design to an algorithm by generating the level from MIDIs so I couldn’t (well I could, but it would have been time consuming at the least) tweak the design of the levels, which would have been another way to adjust fuel values.

In the end I decided that there needed to be a way the player could get a boost for free. To receive a free boost the player must hit the top half of a block with the bottom of his avatar. Doing this gives the player the tiniest, mini boost that can be sustained by hitting more blocks, with the end effect being similar to surfing a wave.

Aha!

The wave idea really brought things together for me. It was my AHA! moment. It lead me to ditch the space ship as player avatar for a little surfer dude and kick started the game’s sound effects. Up until this point I hadn’t put much thought into the sound effects for Beat Boost since the game was centered around music I didn’t want a cacophony of sound overwhelming the musical aspect of the game. Embracing the surfing idea I created a nice, soft, soothing wave sound effect that plays anytime the player collides with a block. The only other sound effect used in the game is the “trick success” sound, a sound that plays whenever the player pulls of a trick.

Part of my original design for Beat Boost was to have a trick system where tricks could be combined for an ever increasing number of points. Due, again, to time constraints I didn’t have time to create the animations for a bunch of tricks so I settled on a single trick, the front flip. The player is Beat Boost is controlled with the arrow keys, left and right move the player left and right; up boosts the player, using fuel; and down puts the player into a front flip, also using fuel.

While performing a front flip the player does not collide with blocks, thus fuel cannot be replenished. The reward for a successful front flip is 2,000 points, indicated by the “trick success” sound and a quick flash and scale of the player. If the player hit the ground up-side-down, mid flip he would be docked extra points in addition to the usual points that are deducted for riding the floor. Flipping was the last aspect of Beat Boost’s gameplay mechanic. It introduced a nice risk/reward feature to the gameplay: you could use up extra fuel (now referred to as “boost”) when riding through large clumps of blocks (now “beat blocks”) and score more points than you would otherwise, but you couldn’t acquire more boost while flipping and the penalty for mis-timing a flip negates any bonus.

Keeping Score

If you’ve been following along closely (you have right?) you’ll likely have noticed that I’ve mentioned high scores and keeping score a number of times in this post. One of the original parts of Beat Boost’s design was a high scores system meaning I needed some way to store scores and display them back to players.

Since Beat Boost is a browser-based web game it made a lot of sense to keep everything in one central location. This was accomplished with a MySQL database, some PHP and AMF, all of which is a topic for another post the main point being that I had a central, remote location where all scores could be quickly posted and retrieved. There is certainly no shortage of online leaderboards for this sort of thing but I wanted to avoid one thing in particular: yet another account for some web site you may or may not ever visit again.

Beat Boost is a one-off game for a contest and I didn’t want to diminish one of the game’s strengths by putting a sign-up barrier in front of users. I was also running out of time and coding a sign up and login system is never appealing. Fortunately the arcades of my youth offered a precedent here, I could simply take the user’s name and transmit that along with the score and level name to my server to be saved in a high scores database. This method has the benefits of being technically simple and super fast and account free for players.

All that was required of players was that they complete a level, then enter their names old school style by using the keyboard’s arrow keys and cycling through the alphabet (both lowercase and capital letters along with numbers). Once this was done hitting enter submits the score and takes the player to the next level. The name the player entered is also saved so it only has to be entered once.

To see the scores for a level players could click “Scores” on the main menu, then choose the level they were interested in to see the top five scores for that level.

I decided to only show the top five because that is what would fit on a single screen and I didn’t have time to write any scrolling functionality into the scores view.

Finishing Touches

With all the gameplay and scoring complete all that was needed was some finishing touches. This included making a help view to explain the game concept and display the controls, a credits view to give props to everyone involved in the project, the HTML page in which the game SWF was embedded and the game’s user interface (UI).

The help page and credits are super straightforward. Help has a two paragraph explanation of how to play Beat Boost with the control buttons listed below that. Credits is a list of all the roles and the person who filled said role. The credits list was particularly easy because it was just me and Tettix, the musician who wrote all the music used in Beat Boost. The HTML page was simply a black background that had “Beat Boost” across the top, the game in the middle of the page and the controls listed on the bottom of the page.

This leaves me with the UI. Since Beat Boost is meant to recall games of the 80s I felt a visually simple UI suited the game well. That said I wanted the interface to be interesting and lead players along nicely. What I ended up with is a simple list of all the actions a player can take from the main menu: Play, Scores, Help, and Credits. Each item in the main menu changes to a different color when moused over (pink, yellow, green and blue, respectively). When clicked on the item retains the rollover color, scoots across the screen to the upper left corner and fades in the appropriate content. When clicked back, the current content hides itself and the main menu label animates back to it’s main menu position before the rest of the main menu fades in.

These last few touches are, for the most part, simple, simple stuff that really do a lot of improve the appearance of Beat Boost as a finished product. The UI is fairly simple as well, but that is more a case of the aesthetic of Beat Boost being simple 8-bit type stuff and UIs for more ambitious games are certainly anything but simple. Simpleness of the UI aside I feel like it does a great job of what it’s supposed to do: display stuff the player clicks on.

This post ended up being quite a bit longer than I had anticipated but I got everything out that I wanted to. It was a lot of fun to crunch through the evenings after work over the course of a week to bring this game into being and I’m glad to be sharing my process now. In an effort to not drag this post out any longer I’ve left out any postmortem stuff discussing my thoughts on the game once I started getting some responses about it from players — this will end up being another post so stay tuned.

Thanks to everyone who voted, commented and/or emailed me. It was really great to hear everyone’s thoughts about the game. Thanks to Boing Boing for putting on this contest. Finally, thanks to Tettix for donating his music to this competition.

UPDATE: I ended up taking third place!

My submission is a game called Beat Boost that has a little surfer guy flowing through blocks of music that are generated from the game’s soundtrack. In true old school fashion the game is solely about achieving the highest possible score. To do this you boost the surfer into the colored blocks (called “beat blocks”) in each level or perform full, 360 degree front flips. You can check it out on Boing Boing (don’t forget to vote)!

The catch is that boosting and flipping depletes your boost meter and when this runs out you fall to the floor where you hemorrhage points (1000 points for hitting the ground upside-down or otherwise mid flip; 1500 per second afterward), but replenish your boost meter. Hitting boost blocks also refills the boost meter and hitting these blocks just right will give you a boost for free.

Successfully completing a level allows you to enter your name, classic arcade style, where it will be stored in a remote leaderboard. This leaderboard shows only the top five scores and player names and requires no logins, accounts, etc. — it’s just like when you were a kid quickly tapping your initials into that Pac-Man arcade cabinet.

All that tracks in the game are by Tettix, you should definitely check him out as he’s done a ton of great stuff not the least of which was to make his music available for this contest. The full track list in Beat Boost is:

• Earth’s Assault on the Central AI – Technology Crisis
• Infiltration at Dusk – Technology Crisis II
• The Slave Rebellion at Genesis Point – Technology Crisis II
• Carotid Restraint – T.K.O.E.P.
• Scissor Kick – T.K.O.E.P.
• Dragon Punch – T.K.O.E.P.

Follow the project here and check out the first demo vid on Vimeo.

It stared with getting the front bumper off which was secured with about 16 bolts and one metric (yes, metric on a 1973 American car) bolt. This took awhile since we didn’t think two of the bolts needed to be removed to pull the bumper off. We were wrong, a trend that would continue with this project.

Next we removed the hood and fenders all so we could remove the “Ventura” insignia on the fenders and then we started on the rear bumper. The rear bumper that, much like the front one, we thought we had ready to remove. The rear bumper that ate a wrench and necessitated the over-nighting of new wrenches. The rear bumper that had to have a stripped bolt drilled out of it. The rear bumper that still took twenty minutes to remove after all the bolts were removed. It’s off now.

While waiting on the wrenches needed for the rear bumper we went to work on the rest of the car’s insignia. This included a “Custom” and Pontiac logo on each side behind the rear windows and a “Custom Hatchback” insignia on the the back. Figuring these insignia were much the the ones on the fenders we took apart the interior to gain easy access to the bolts from the inside. Turns out the interior was welded in such a way to make accessing them impossible.

So we started pulling them off.

And this proceeded for about an hour with little progress. We tried razor blades, knives, screwdrivers all to get some leverage. None of it worked. In the end we invented the ultimate insignia removing tool. This tool is constructed from microfiber cloth and duct tape. It starts with a thin piece of duct tape that gets progressively thicker until it connects to the microfiber. Using this we were able to remove all the remaining insignia in about fifteen minutes.

Presently the Ventura is sanded and ready to be primed. Some pix are below.

Just today I found a bug that seems to affect 64-bit Windows user in the Project Properties dialog. The bug in question is that the “Flex Modules” section of the properties dialog is blank. So there is no way to add or remove modules from the project build. To fix this, open the Properties dialog (Project > Properties), click on “Resources” and resize the window horizontally to be as thin as possible. Then click on “Flex Modules” and resize the window to be usable again and BAM! just like magic the modules appear!

UPDATE

I’ve found that an easier way to do this is just adjust the divider between the list on the left hand side of the dialog and the right hand content area. Just adjusting the divider a smidge will cause everything to magically appear.

What You’ll Need

To get the beer glass image I used 7 pieces of equipment:

1. A beer
2. A beer glass
3. A coaster (this is optional)
4. Some (cheapie shop) lighting equipment
5. A large piece of white paper and something to prop it up
6. A camera
7. A siphon

Photographing

The setup was to fill the glass with beer and place it and the coaster on the sheet of paper.  The paper was then propped up (I used a wine bottle), turning it into a backdrop.  The lights were setup so I could get some highlights.  The paper being white is important here because I wanted the glass to be transparent and white lends itself to becoming transparent better than say, black.

Once had the scene setup I placed my camera on a tripod and framed the shot I wanted.  It really helps here to have a camera with a manual focus option and to triple check your focus unless you want to drink a few beers through a siphon.  It wasn’t very enjoyable.  Additionally, you’ll want to do this on a stable surface as the goal is to never move the cup at all.

With the stage set I snapped a pic of the full beer glass and then put the siphon in the beer and sucked out a little bit of beer and removed the siphon from the frame.  Rinse and repeat until the glass is empty.  After you have all your images it’s time to get them into Photoshop.

Masking

With your images in Photoshop it’s time to create some masks so we can knockout the beer glass and coaster. One of the nice things about this is that, for the shape we are masking (the beer glass), all of these images are essentially the same thanks to the tripod. So take your time with your masking technique of choice and make a really good mask on one of the images and then copy and paste it into all the other images. You’ll end up with something like this:

Once I had all my images masked I collected them into a single layered file, one image per frame, and cropped the image down to just the glass. This is a good point to save your work.

The next thing to do is add some transparency the to progressively more empty images of the glass. To do this I merged each of my layers with an empty layer. This has the effect of eliminating the mask used to knockout the glass producing a flat image with transparency where the mask was. I then created a new layer mask for each layer and used a brush set to about 25% opacity and 25% hardness to slowly paint over the areas where one would expect to be able to see through the beer glass. I found it helpful to make a screen cap of my desktop and throw it in under all the layers so I could see if the transparency looked good against it.

Creating all these transparencies for the glass is quite time consuming but in the end it creates a very nice effect. Be sure to save the layered file as a PSD so you can come back to it later if need be. At this point you have all your assets and now it’s time to make a decision about how to use them. In my case one of my goals with Beer Near Here Desktop was to create a completely Flex-based solution. Specifically, I wanted the animation I created with the beer glass to be done with Flex so I exported all of the layers out as individual 24-bit PNGs (preserving the nice transparency I worked so hard at creating) and imported them into my Flex project.

These PNGs look great but they also now account for the bulk of BNHD’s file size. An alternative approach is to import the layered PSD into Flash, create the animation there and then import the resultant SWF into your Flex project. This will almost certainly result in a smaller size for the app, which is ideal unless you have other goals like I did.