HTML5 Game Development: ImpactJS

Ever since I was six years old and my parent’s brought home a Commodore 64 I have been in love with computers.  Even more, I have always been fascinated with video games.  As I was hopping through the last castle to save the princess or defeating the Mother Brain, I always wanted to do more than just play video games.  Well, life seems to just never stop turning and some dreams you never get to…  Well, not this one!

I have been watching the development of several HTML 5 game engines over the past few years.  Several engines have risen to the top and have allowed developers to produce some great games.    I knew then and still see the potential for HTML5/Javascript gaming.  The technology provides a way to put games on any device that can run a browser.  No more worries about what operating system you are on or what software you have. No more worries about what Flash version your running or if your device can even run Flash. Now, we can have a game that runs in the browser and can be delivered on so many more devices making a great leap in cross-platform compatibility. It’s even possible to get these games running on the Xbox.  And the best part is… it all relies on HTML5, and Javascript which is technology that web developers have been using for almost 20 years!

ImpactJS

A few weeks ago I came across ImpactJS and began researching the game engine.  It is an HTML/Javascript game engine with a nice library of classes and an easy to understand framework.  I decided to spend the $99 for a license and have been addicted ever since!

When you purchase your license you receive access to the engine, some decent documentation, and a few source code examples.  After I went through the first few tutorials and played with the engine for a day or two I decided to start on my first game.  On day five of hacking away I   truly realized that my game may not work the way I had envisioned. I am shooting for a 2.5D Platform Scroller like Final Fight or Double Dragon. These scrollers allow the player to move vertically on a pseudo Z plane, and also allow the player to jump while incorporating physics into the game world.  Well, the ImpactJS engine is equipped to handle 2D games fine, but 2.5D and isometric games are out of it’s realm.

I was well into making the game and saw ways that it might be possible to trick the engine into thinking it’s 2.5D.  After about a week of still learning the engine, asking questions in the forums, and trying to break the 2.5D issue I finally made a break through and had my character jumping while also moving left,right,up, and down!  The best part is you can still use the game engine’s physics for velocity which is one of the main reasons for using a game engine, I would think.  It saves you a lot of time writing the code yourself.  However… there are still a few bugs in the script. When you touch the bottom of the game screen it thinks you have hit the ground and can’t break itself out of the gravity.  The other issue is that when you set up levels you have to place collision tiles to keep the player from moving through certain objects.  Well, when you are standing under such an object and try to jump, the game physics won’t let you. I found a way to break the dynamic collision boundary, but I haven’t messed with the ones created in Weltmeister.  Here is the code I used for the player entity on github.  I will probably post the whole game at some point. It’s not like HTML5/Javascript games have the greatest of security, anyway.

Another major obstacle I wanted to hurdle before I got to deep into the game’s design was multiplayer. I found a great resource for ImpactJs and Node.js on Youtube, and in a few days I had online multiplayer going.  Next, I had to set up a character select screen and add several more sprite sheets for characters.  Then, I had to wrestle with syncing the server with the clients in multiplayer so that everybody’s screen would display the correct characters for each player during a game. That was a long night…

Finally, got online multiplayer working with ImpactJS and Node.js!

Now, I am at the point of adding all the rest of the game mechanics. It’s a loooooong list, but I’ve got time.  Don’t worry I’m not quitting my day job so this project may take a good while!  I’m working on getting my brother-in-law to help out with the sprites and once I have the fundamentals down we can pop our own graphics in and work from there.  Currently, I am using sprites I have collected all over the internet from the game Scott Pilgrim.  The design of my game will be heavily influenced by Scott Pilgrim as it’s one of the best modern 8bit side scrollers I have ever played. Although, I have never seen the movie, but there is still time!

Below is the currently baked version of the game. You can kill other enemies, die, and finish the level by exiting the last yellow door on the left. I added some .ogg files for HTML5 sound support so you can hit “M” and turn it on.  Please don’t be upset if the music crashes your browser, though. This stuff is even too futuristic for Google Chrome!  A lot of this stuff are scripts and media I found online. It is all for testing purposes, so please don’t think this is anything that will make the final game. I know it looks pretty bad at the moment, but I am more than pleased with the start. Right now it’s a mashup of the tutorials and experiments that have helped me learn the system. I even left the ImpactJS Debugger on so you can open that up in the footer and have a peep.  The multiplayer code as been commented out in this version because I am just testing that locally for now.

Hey, when you’re reaching for a dream you have to start somewhere. Oh, and speaking of reaching for dreams… it’s time to catch some zzzzzz…

Click here to PLAY!

3 Replies to “HTML5 Game Development: ImpactJS”

Leave a Reply

Your email address will not be published. Required fields are marked *