Introducing Yokosuka 2k

y2kPlease go check out this JavaScript-based beat ’em up game engine demo I made. Yes, I used artwork from River City Ransom. 😛 Once I’ve made my own sprites, I’ll replace them.

I’ll be posting some articles here about the design and history of this. All I’ll say for now is that this current version (written in JavaScript) was written over the course of a three or four evenings.

The current demo is pretty basic, but its goal was to stand up the game engine’s framework. The next step will be to add these features:

  • Add “regions” where you must clear out all the enemies before the game allows you to move forward onto the next region.
  • Add a “level complete” screen when you’ve finished the last region.
  • Add more enemies on the screen at once, and coordinate the enemies’ movement so that only one attacks at a time.
  • Add health bars for your character and for the enemies.
  • Add combos.

More details to come!

Latest game engine updates

I’ve been busy working on the game engine. My focus lately has been to actually work on the gameplay itself as opposed to just refactoring everything over and over again. The best way to make sure I get a game done (and not just the tech) is to actually work on one.

Draw!!

Here’s the first thing I put together. It’s a simple little game where you control a little cowboy dude. The goal is simple: avoid being shot by the computer player and try to shoot him. Once in a while a little power up will appear. If you grab it, you can shoot a little bit faster and via a spread shot. This was done way back in October of this year.

The art and music were all done by me. The sound effects were re-used from Doom. The game engine is all mine. That includes the renderer (yeah, nothing fancy) and the audio (pseudo-8 bit noise).

Beat ’em up AI attempt

Next up is a first attempt at some beat ’em up AI. It’s really bad. The animation state machine is pretty choppy as well. It just looks really ugly. However, one thing that I thought worked out well were the fake leaves falling off the trees. This was done in November.

Decent AI

Now this is more like it. I took a look at how Streets of Rage 2 does AI and figured out a few things:

  1. Enemies go through various states. They’re often just standing far away, standing close up, or transitioning between the two states.
  2. Enemies walk a lot slower than the player. This allows the player to catch up to them or run away. If the enemies walk at the same speed as the player, it makes for a bad experience.
  3. Enemies never turn their back on the player. They’re always facing them. This is even more important when the enemy is backing away as it looks more natural if they do not turn.
  4. Only a few enemies at a time should ever attack the player. The rest of the time, they should stand back at a distance. It helps to randomize their position when standing far away so that it looks natural.

After learning these rules, I came up with this:

Flattened Perspective Demo

One thing I’ve always enjoyed about beat ’em up games from the past is when they’ve put a city skyline in the background. It’s a minor touch, but it makes a big difference. It does a great job of transporting you to a new world.

The problem with having a background, however, is that you limit your foreground space. You need to take up about half the screen for your cityscape background and half for the foreground map in which your user will fight the baddies. For my game engine, I wanted to have a sandbox-style world like Grand Theft Auto. This meant requiring a map that gets large and potentially grows vertically and not just horizontally. This would mean getting rid of the background artwork, which would severely limit the experience I am going for.

One day, looking at the album artwork for the latest Bon Iver album, I realized that maybe there was a solution to my problem:

Why not combine the background with a foreground map that can scroll up and down? i.e. fake the perspective. After sketching out how it might look, I sat down and actually implemented. Here’s what it looks like:

In my head, it worked out a lot better, but I think this is decent. The above demos I think illustrate how it might work in a game situation, but I need to create a few more complex levels. What I’m really trying to go for is an immersive game world that retains that 8-bit flat 2D art look.

What do you think? Let me know in the comments!