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.
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 🙂
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
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.
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
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!
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.
Check it out here
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.
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.
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.
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!).
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
For some good tutorials on using canvas check this site out, its has some useful information.