This post is about how the Windows Phone game “Binary Man” was created. It will explain how I came up with the idea, how it was made, the levels, the enemies and so on, and also how it was ported to both Xbox 360 and Windows.

1. What is “Binary Man”?

Binary Man is about digital superhero controlled by a scientist, who must be able to recover LarsOtek’s new mainframe system – taken over by hackers.

The game is a 2D side scrolling game, and actually a combination of a action-shooter game and a puzzle game, where each enemy is a puzzle itself. The more effective you can kill the enemy, the more points you will get.

The game let’s you control Binary Man, fight through bugs, chunks and blocks of data in a digital world to reach your destination. It starts quite simple, but gets harder and harder.
Each level is rated with five stars, where one star is bad, and five stars is perfect. The score is stored both offline and online.

 

2. The Making of Binary Man

The concept

Binary Man started as a simple project where I wanted to create and actually finish a game for the new Windows Phone Marketplace.

I wanted to nail down some criteria’s before getting to the actual game idea
– It has to be nerdy
– It has to be simple as I don’t have much time for development
– But the game itself must be hard
– I’m a coder, not an artist – the graphics should be simple

It was time to take a look at different game ideas. I started of with a piece of paper and started to draw a brainstorming map. Lot’s of ideas came out, I wanted it to be something stereotype’ish but with a twist of something original – one idea was worth working with.

It was inspired from the game Zombies Ate My Neighbors (1993/1994) where you had to run around in a zombie infested world and shoot them with water guns and explosives.

I remember playing this game a lot with my twin-brother back in the 90’s and we loved it. This was what I wanted to make!

I worked on the idea and came up with a top/down shooter where you had to control a nerd with a bazooka. The bazooka was a keyboard, not shooting missiles – but sequences of binary code.

Taste the Binary System!!

I named the project “Binary Dude” and the interface should be simple. You use one thumb to move around, and the other to shoot either 0 or 1. Enemies was built up by either ASCII chars – like one Zombie-enemy could be named “Stan” and you had to shoot Stan converted to binary: 01110011011101000110000101101110 to take him out (I know.. ).

Of course there were helpers, so you didn’t have to know the math (unless in Nightmare mode) but it was too nerdy and hardcore. And the controls would have been hard.

So I decided to move the camera down, thus creating a side scrolled game. I also wasn’t happy with the binary weapon (as I said, too nerdy) so I started to think again. A good friend of mine, Jonas Follesø, had created a flood filler game for Windows Phone named Tile Flood. I loved it.

 

“Tile Flood is a fun, colorful, simple and addictive puzzle game. The objective of the game is to flood all the tiles on the board in the same color. You start in the top left corner and flood the tiles by selecting one of the six colors. When selecting a color you change the color of the top left tile and any adjacent tile with the same color. This way you can flood all the tiles on the grid. “

I remember thinking how I could take the Flood Fill concept in to a 2d side scrolling game – it was simple. All enemies are built up by blocks, and your gun will have 4 modes, each a different color. Then you need to take out the enemy in the shortest amount of shots to get a good score. In this way, you had to take out enemies, but each enemy is a puzzle where each shot counts.

Since I was going to work with blocks, I moved the game from being outside in the real world into a digital world. I had my brother and a friend over to discuss some ideas – the game was going to take place in hardware and digital worlds, like inside a modem, TP-cable, DMZ and so on.

I also decided not to use a human as a character, but instead an astronaut-inspired (I had just watched the movie 2001: A space odyssey) character.

I also wanted him to be a superhero, so I changed his name from Binary Dude to Binary Man. Binary Man was to be controlled by a scientist who invented him to take back a mainframe system that was taken over by hostile hackers.

 

3. Creating the game

The implementation of the game was fun. I started with creating a simple game engine using XNA. It was to support Game States like Main Menu and In-Game, a 2d side scrolling level, shooting, enemies and touch-input.

Moving Binary Man

Moving Binary Man will be done by the left thumb. If you hold your thumb above Binary Man, he will be moved up and stop at the thumb’s location. If the thumb is below, Binary Man should move down to the thumb’s location. If both thumb and Binary Man is on the same position, Binary Man should stay there.

 

 

An interface was also created, giving the player some feedback on where the thumb is pushing.

 

 

 

Shooting

Shooting must be done by the other thumb. You have 4 different colors. Hitting an enemy will color the hit-block with the color you chose, and all blocks with the same color that is linked with the hit-block (flood fill).

This enables the player to take out the enemies in a number of different ways. You can simply fire away random shots and it will die in time, or you can use a systematic sequence like “green-gray-blue-purple-repeat” and hope for the best. But these methods are nothing compared to using your brain and shooting the correct color in the right place based on your strategy on taking out the enemy. The more shots you use to take out the enemy, the less score you will get by killing it – thus making each shot count!

Flood fill

As mentioned earlier, if an enemy is shot, it should be recolored by a flood fill algorithm. How it works is that when you hit an enemy with a color, it will color that block and the connected nodes in the enemy with the same color to the new color. This algorithm is used in paint programs (the bucket tool) and in games like Minesweeper.

How the algorithm works (from wikipedia):

Flood-fill (node, target-color, replacement-color):

1. If the color of node is not equal to target-color, return.
2. Set the color of node to replacement-color.
3. Perform Flood-fill (one step to the west of node, target-color, replacement-color). Perform Flood-fill (one step to the east of node, target-color, replacement-color). Perform Flood-fill (one step to the north of node, target-color, replacement-color). Perform Flood-fill (one step to the south of node, target-color, replacement-color). 4.
Return.

 

Example:
One first enemies you encounter where you have different kinds of solutions is the Shield Bug.

The Shield Bug is a enemy surrounded by a blue shield. If you do it the right way, you will be able to take it out with 4 shots.

Let’s see how the flood fill algorithm is working to take out the enemy.

Approach the Shield Bug by either from the top, or the bottom as he shoots straight forward.

Many tend to start by using the purple color on the gun. This will result in being able to kill the Shield Bug with five or more shots as one of the eyes (the right eye) is not connected to the shield-nodes in any way.

1) However, if you start with Gray shot first, you’re off from a good start.

2) Now fire of a Purple shot to remove the face.

3) Then Green to remove the eyebrows

4) And lastly, fire off a blue shot to kill it.

 

4. Creating enemies

I created a tool using WPF to create enemies. In this tool you get a very simple interface, and you use this to draw the enemy.

The enemy editor starts with giving the user a popup menu. Here you can set the size of the enemy. Clicking create will give you a new interface with the desired enemy-size.

Clicking export will export the data to XML, and can then be loaded in the game. The data is simply a long string with the id of each block-type (color).

Also, many of the in-game enemies are random generated, making the levels different each time you run it.

 

5. Creating the levels

I also created a custom tool in WPF for creating levels.

This tool let me draw levels (areas that will get random generated blocks). It is very simple and I didn’t put a lot of time into the editor. But it still get’s the job done and is quite powerful. I can place out enemies and blocks, scroll around on the playfield and draw the areas that will be blockers. I can either add blocks manually, or go into draw mode (add mode) that lets me add blocks as I click around on the field.

Clicking export will generate an XML file with the level-data ready to imported as an asset in XNA.

 

6. Putting it all together

Putting the game together was fun. I did it in a agile way, creating new functionality and creating levels side-by-side. I got my brother to draw me the intro comic so I could focus on the code (and I don’t know how to draw).

 

I wrote down a simple story that I parted into 26 different sections, one for each level.

The world map is based on a tile engine that renders different tiles for each world. When adding a new level, I can place the level on the world map and it will get connected with last level in the list (previous level).

The main menu is a big picture and a viewport. I move the viewport around based on where the user clicks, opening up for different screens for the different parts of the menu.

After each level is complete, it will measure the total score and rank it based on stars. The high scores will be stored on the local app-storage, and if the device is connected, it will upload the result to an online service.

When navigating the world map, the player with the best score for that level is displayed on the level.

The complete game can be seen in this video

 

 

7. Other platforms (Xbox 360 and Windows)

Since the game was made using XNA, it’s a very simple job to convert the app to both a Windows and a Xbox360 version.

How I did it was to Right-click the project in Visual Studio and select “Create Copy of Project for Xbox 360”:

I used about 15 minutes to get the game running on both Xbox 360 and Windows using the Xbox 360 Game Pad (mostly input/controller changes, and some resolution)

Me playing “Binary Man” on the Xbox 360

It worked just like on the phone but of course I’d like to change the interface to a more gamepad friendly style, as well as the main menu and world map so its more console-looking.

 

8. Download the game

Thanks for reading this. Now, it’s time for you to try it out!

http://windowsphone.com/s?appid=0d0eb3b2-4c23-4fd5-9c74-7ae9024a10b5