Post news RSS The first two months

A little run-down of the first 2 months of development, along with all the false-starts and stupid decisions that were made along the way.

Posted by on

Beatopia is a combination of things I’ve had kicking around in my brain for a while. I like city sims and pretty much any game that involves some level of building, and I’ve been mulling over how to incorporate this with a drum machine in some way with a groovy 80s-90s cyberpunk aesthetic. So here’s something I started working on in March 2015 which I hope shows some promise. It’s been a challenge to make because of the ways that the drum-machine format constrain what you can do.

beatopia 1

The whole thing started with a 4×4 isometric grid. It’s 4×4 so we get a total of 16s. Drum patterns can be split up into smaller increments but this felt the most manageable. The “pulse” as I’ve called it, starts in the left most square, and moves right, then comes back around. In the image below, purple squares represent bass drums, cyan/teal squares represent snare drums, and orange squares represent hihats. This means that the beat in the above image goes: BM-ts-CLAP-ts-BM-ts-CLAP-ts.

The next stage was to work out what each of these color-coded tiles would *do* in the context of a city simulation. My initial idea (and I’ve managed to retain it) is that Beatopia is a 80s-90s styled cyberpunk city which runs on electronic beats. (Maybe there is some creepy subtext about the population being controlled by music? See final version for pretentious Theodor Adorno quotes)

So here are the (tiny) sprites for the tiles, which are now “districts”. Note that the first four were the initial base for the game and the two on the right were added in later (I’m keeping this log chronological so I’ll explain those further down). I tried, to some extent, to keep the buildings resembling the instruments they play, so for example the orange buildings play hi-hats and resemble a revolving restaurant building – which looks kinda like hi-hat cymbats.

Orange: financial district – produces money and pollution

Pink: environmental – reduces pollution in neighboring districts

Teal: security – reduces crime in neighboring districts


Money – crime – pollution. The way each of these “works” in the game has changed drastically since I designed the sprites, but they are still the three key elements of the game. As hi-hats were played by the city/machine, the player accumulated money, but clouds of green smog would also gradually appear on that district and to a lesser extent its neighbors. I wasn’t sure how to handle “crime” yet, but I felt it should be instance-based, rather than a numerical value (as I had done with pollution).


The above image shows a brief experiment where I was toying with the idea of having the player drop buildings in in-time to the beat. It was janky and I hated it, and I had really set out to make a more relaxing “5 minute train journey” type game. So I threw it in the bin and shouted “begone horrible build!”. (also those colours – yuck!)

beatopia topdown

Then I had a bit of a breakdown feeling like the isometric wasn’t working in the small-screen mobile phone context and that it would be too fiddly to accomplish what I did. So I spent about 2 hours working on a top-down version and people I showed it to went “nope don’t do that”.

This seemed like as far as I could take the game without deciding on a genre and a set of conventions that went along with it. I needed a way to ensure that there was some sort of strategic meaning to the building placement. So over the course of a week or so the game evolved into the state you see below.

beatopia skirmish

Orange districts produce a coin each turn (work the beats-per-minute of the current level: meaning faster = difficult but with potentially higher scores) plus some pollution. Pollution has a very direct visible effect; slowly killing nearby player units. Pink buildings clear pollution. Worker Drones are built at your HQ (the white building) and collect coins (they could fight in the first version but I’ve since made them passive and added a separate class of Enforcers). Glitchers (the red skulls) represent anarchic gangs who wanna take your coins and generally mess with your city. They initially appeared randomly but now they come in waves, as they do in Tower Defence games. This also allows for a nice back-and-forth between combat and building time, which is accompanied by a shift in music; when no enemies are on screen, each bar of beat is accompanied by an ambient chord randomly picked from a pool of 7, whereas when enemies are present, this chord drops out and is replaced by a funkier set of bass notes.

The whole thing started to lean toward a mini-RTS/defense game thing, and I think I’m happy with it this way.

The green buildings became the equivalent of “houses” in an RTS; each one lets you build an additional 2 units. Units are currently built instantly but I will put in a timed build-queue in future too. These little constraints are so bread-and-butter in strategy and it felt like something was missing without them there. Adding the Residential districts as a 4th buildable district-type also gives the player a little more of a puzzle in terms of how to use the available space. Residential districts also produce pollution but at a slower rate than Financial.


So what of blue/teal buildings? They’re still snare-drums, which means we want to them to be important and expensive and to require good strategic placement. I always thought the blue/teal color had the strongest associations with law enforcement etc. So now, these buildings are Armories which recharge the shields of nearby Enforcers (see the little dude with the additional blue bar over his health in the .gif). Enforcers with a shield will attempt to engage Glitchers, and they will flee to the nearest Armory either when a wave of Glitchers has been defeated, or when their shield is depleted.

That’s it for now. I had a ton of other stuff to do on it before it’s even remotely playable. There’s currently no lose-state and no way for the Glitchers to actually disrupt your city, beyond taking coins and destroying Workers and Enforcers. That will be next on the list, and then I’ll move onto making a HUD that isn’t crud.

The below shows a ring of 12 districts. This potentially allows for a level/beat to be in 12/8 time signature. This means a sort of “galloping” feel; like try counting 123/123/123/123 quite fast and you’ll get the idea. One of the coming challenges will be to see whether changing the layout of the available districts really adds any strategic variation to the game. Or whether I should just keep it to 4×4.

beatopia 128

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.