Working on a new JS game

I’ve been furloughed from my job (government contractor) so I’ve had a bit of free time on my hands the last 2 weeks. I decided to start and hopefully in a reasonable amount of time finish a full fledged html5/canvas game.

The name of the game is Grapple Hero, check out a few of the wip screenshots.

levelselect

grapple herograsstiles

menu progress

If anyone has played my old js1k entry  you’ll recognize the game play immediately. Your character cannot move any way but using his grapple. Once your grapple makes a connection you are shot up into the air where you need to grapple again or you’ll fall (sometimes to your death). I created a website for the game  where you can play the most current demo build, which involves you trying to escape from lava.

I plan on releasing it on Windows, Linux, as a standalone executable, on Android via cacoonjs, on the Google app store, and Desura (hopefully).

Its also been added to IndieDB check it out 🙂

Grapple Hero Windows, Linux, Web, Mobile, Android, MetroTab game

Creating a canvas platformer tutorial part one

I’ve seen a few questions on Stackoverflow lately dealing with how to smoothly move an object around on the canvas. This will be the first part, of my first ever attempted tutorial series. So please bear with me as I can sometimes be very confusing (to myself included) when trying to convey any topics dealing with development.

What we will be making

Read More

My SOPA/PIPA Ludum Dare entry

Was pretty stressful trying to make this in a day (especially since I did a full workday at my day job as well!). This ended up being my entry. I borrowed some game concepts (ok all of them) from the awesome game World Infectonator. Basically what you do is you get one chance to convert a 1%’er or “the unaware” in hopes they will spread their new found awareness enough to beat the level. Game was done using JS and Canvas of course, and using my homegrown game engine thats been evolving over the last year or so. You can check out the game in all its glory from the direct link.

New js1k Submission JSGrapple

Update Submission for the js1k competition. My 3rd, and final one only the last one you enter is judged and I think this is going to be as good as it gets from me that is. I ended up settling on a clone of a cool game I used to play when I was a network admin in the Air Force called Wire Hang Redux.

This entry was more of a challenge than my previous one, I had to not only make it look presentable but also had to worry about game play, simple physics, and of course lack of bugs. I think it turned out pretty well, and I owe a big thanks to the Google Closure Compiler, it definitely made things easier. The biggest challenge was trying to decide on what features to add. I had a choice between keeping the high score and allowing users to try again (without refresh) , or the option of making it harder the higher they go. I chose the latter which I think was a good decision.

Some things I learned from the contest,

  • pre calculated values use much less space, (.017 uses much less space than pi/180)
  • There are shorter ways to get an element through the dom than getElementById
  • You can make something cool and fun in 1k using Javascript

I think the next thing I will do is make a bigger/better/cooler version.

Now just imagine if I had 640k to work with!

Canvas Lunar Lander update

Game is still coming along, it now supports zooming, which was actually a little bit tricky to figure out. Only a few more things left to add before its a full fledged game.. or clone of a game that is.

Check out the progress  of JSLander

Now supported in any browser that supports the canvas element.

Lunar Lander Canvas Game

Working on a lot of things lately but noticed I haven’t made a post in quite a while. Heres a quick look at one of the random games I’m making using JavaScript and the Canvas element. Its essentially a clone of Lunar Lander.  As it is right now you can’t actually crash, and if you successfully land on one of the pads, your drops from the top again.  I’m not sure yet if I’m going to add the zoom effect when you get close to the landing pads, I think its pretty cool looking as a full page game. I imagine making a bunch of lander automated and having it set as the background to a gaming page.. of course it will only work in modern browsers at this time.

Check it out here

Dynamic rotated sprite sheets with JavaScript

Been working on the single player canvas game this week and got a few cool things accomplished in terms of performance. The main thing I was working on was trying to reduce the slowdown on real time image rotation.  What I ended up coming up with was creating rotated sprite sheets on the fly in memory.

The method is pretty simple, here’s how it works. I start out with a sprite sheet that contains the characters animation frames all facing on direction. I take that and rotate it in increments of degrees (I chose 23) and render  all of the results to a new sprite sheet in memory. What you end up with is a pretty large sprite sheet of every animation at each angle increment. So instead of 1 line of animation of the character facing upward I now have 16 lines of animations each one facing a different angle. What this allows me to do is take the angle my sprite needs to face, and just go to that section of the sprite sheet for the animations. Doing it this way requires no real time rotation in game. Performance gains were immediately seen. In Chrome I was able to go from 150 zombies on screen (which showed some slowdown) to 800 zombies before any slowdown occurred. In Firefox the results were a little disappointing, I did gain an increase but not much of one.  Take a look for yourself, the first link has 150 zombies using realtime rotation, the 2nd link has pre-rendered rotations with 200 zombies.

Realtime rotation

Pre rotated sprite sheet

There is a drawback to this method of course, the main drawbacks are increased load time and higher memory usage.  For me though these do not outweigh the benefit of more on the screen at once at playable frame rates.

Here’s a quick demo showing the results of whats going on. It takes a second to load,

And heres a link to the code if anyone is interested. I tied certain numbers to some things that should be variables instead, just note with Firefox you may have issues because getimagedata is not always equal to the size of the canvas, which causes errors with putImageData if any data is being put outside the bounds of the canvas object. To fix this I generally add a bit on the width and height of my canvas on creation.

New Canvas game im working on

A while back I posted a link to a Flash game I was working on, it was going to be multiplayer using Nanoba. Unfortunately I gave up on it pretty quickly, I’m not a big fan of Flash and I wanted to learn something totally different, so I decided to try and remake the game using Canvas.

So far development has been going pretty well, the single player implementation in its current state can be seen here http://www.somethinghitme.com/projects/canvaszom/ (please not the images are not free they are actually 2d renders from 3d models i have purchased, the code is under the MIT license). It already has more implemented than the Flash version had. There are quit a few things however left to be done and I will try to make a post with every major milestone and write up how I accomplished it. So far the only thing that is not using JavaScript is the sound. I am using Sound Manager for that, which uses a swf in order to generate the sounds.

AS of right now I have put a halt on development of this particular single player game recently because I am actually working on a multiplayer version that is nearing completion. The next post I make will most likely be releasing that and then I will get back to making this a full fledged game… and Ill most likely not use the bald shirtless men as enemies (they are supposed to be zombies!).

Quick Canvas Game

Canvas Invaders

space invaders clone

I’ve been hearing things about this canvas element lately and I found some really cool uses. Mostly I found examples of charts that use it, which makes sense because in some browsers its not very fast rendering real time elements onto it, and IE browsers do not natively support it. After doing some more research and seeing as its in the HTML 5 specification I figured I would try my hand at making something quick with it. So I decided to create a quick space invaders clone. For the rendering base code I used some code which shows pretty nice looking particle engine using canvas at iterationsix.com. If you want the canvas invader files you can get them here

After completing this it really excites me the direction Javascript seems to be going. I definitely think one day in the distant future it will be able to replace Flash for most anything. Especially if browsers continue to implement faster JS engines, and MS really does ditch its IE platform.

For some good tutorials on using canvas check this site out, its has some  useful information.

https://developer.mozilla.org/En/Canvas_tutorial