This is just a little thing I made. Much like the beat ’em up demo below, it’s all written in standard JavaScript and uses the HTML5 Canvas for drawing.
This is just a little thing I made. Much like the beat ’em up demo below, it’s all written in standard JavaScript and uses the HTML5 Canvas for drawing.
Please 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:
More details to come!
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.
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).
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.
Now this is more like it. I took a look at how Streets of Rage 2 does AI and figured out a few things:
After learning these rules, I came up with this:
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!