Jumpin’ Jasper – HTML5 SNES style platform game – development update

A considerable amount of work has gone in to Jumpin’ Jasper this last few days. I’m thrilled by the results of some intense pixelling. As always it’s the colour choices that end up defining the game and I think I got this one just right. Time will tell of course but I’m pretty sure this is the most complete game I’ve made yet using HTML5 tech.

I’ve made a conscious decision to shift towards a SNES art style. This is not a casual decision, it’s very much a direction I want to take my games in going forward. I think the market for HTML5 games is maturing quickly and in order to compete it’s vital that I step up the quality of my output. I enjoy the art as much as the coding and crafting these sprite-based retro games is very much a part of the thrill. Of course the research that goes in to coming up with the art style isn’t so bad either!

Jumpin' Jasper screenshot

So I’m definitely in to the closing stages with the game and am looking to tie up a few loose ends before I begin the lengthy testing process.
I have a few more features that have definitely crept in but they’re not huge and I’m happy to let them slip through the back door :)

Hopefully Jasper will prove to be a hit for me and I can build upon his character for future titles.

Jumpin’ Jasper – a new HTML5 platform game in development

I’ve been working hard on my new HTML5 platform game recently and have had a huge amount of fun creating sprites and some interesting monster AI. It was always my intention to use the game as a vehicle for another new character and I’m pleased to present to you my lovable baby squirrel Jasper :)

html5 game title

I think I’ll probably call his first game Jumpin’ Jasper since that’s pretty much what he spends most of his time doing. The title frame above is my current placeholder being used in the development.

I thought it may be interesting to share my design document. It contains a single sentence:

Cute, cartoony and full of bounce !

It does make me smile when I read that back. To hell with lengthy discussions on what goes where in a level or how a monster should behave. That stuff happens organically for me as I code and test. I think as a designer I just know when something feels right and I can only achieve that by repeatedly playing the game and tweaking the code.

Screenshot

There’s still a ton of work to do with the art. I envisaged some nicely detailed backdrops to each level so the blue gradient won’t be quite so stark. I’m currently aiming to use a kind of Lego approach so that I can create elements and re-assemble them to create some varying background images. It will be very much a fantasy setting.

The game is currently all about jumping around the platforms, riding moving platforms, avoiding spikes and monsters (including the pesky wasp and wasp sting!), bursting bonus ballons and collecting bonuses and hazelnuts. I’ve tried really hard to keep the game moving. I didn’t want the player scratching their head trying to decipher what to do next. I think it works. I’m also very pleased with the powerups available. I think they’re fun. Especially the power boots!

Hoping to finish the game in the next couple of weeks.

HTML5 platform game – progress update

Development on my platform game project is coming along nicely now. It’s always nice to break the back of the game’s “engine” and then settle down to tweaks and minor mods. For the most part just now I’m playing with numbers to get the best “feel” for the game.

HTML5 platform game

For example – initially I had the player’s character (a squirrel that I currently call Jasper) leap in to the air with a tap on the screen (or mouse click / Z or CTRL on keyboard) and fall at the same rate that he jumped. It looked great as the squirrel span quickly and then landed with a satisfying thud. But when I tested it on a mobile handset it was proving difficult to control the character. So I slowed the rate of descent and also reduced the spin speed as the squirrel descended. The result was and is equally as satisfying and much more fun to control.
I have to say that playing the game on the desktop with the keyboard is a lot of fun. It feels great and very responsive. But crucially on mobile it works extremely well. A fine balance.

My level editing suite allows me to drop features in pretty quick. The resulting JSON that is spat out is simply dropped in to the game transparently such that when I fire up the HTML it’s just there. This gives me the freedom to chop and change at will and more importantly it allows me to have a lot of fun creating levels.

I currently have 4 monsters all of which are mutated bugs of some kind. Two bugs crawl along the platforms, 1 spits acid and another drifts in and targets the squirrel if he’s hanging around too long on the level. Kind of like the saucer in Defender.

Using this same codebase I’ve already started designing a game similar in some respects to the excellent Metroid. I like the challenge of creating more sophisticated SNES style graphics. In fact there’s a lot of similarities between some SNES titles and my own art style. I’m not the world’s best pixeler but I do enjoy it.

I’m currently targetting the first week in December to complete this game and then I’ll go back to the cartoon space adventure starring my young intergalactic ranger Kyle Comet.

 

A little side project and some thoughts on touch control in an HTML5 platform game

Screenshot

Screenshot from Bouncy

Spent a little time on a side project this last few days. It’s a pretty simple platform game that involves guiding a hedgehog / porcupine type animal around the screen collecting valuable items and avoiding the bad guys.

When I first came up with the control system I had intended for the game to not involve platforms at all. It seemed to be a lot of fun just hurling the spikey creature in to the air and have him pop balloons. But the more I developed the touch control the more it seemed to make sense that the player could jump and walk with ease.

I’ve never wanted to overlay touch controls on to a game. I really don’t like them. So for this game I’m using touchMove() to guide the character around and touchEnd() to initiate playerJump().

The theory is quite simple. When I initiate TouchStart() I set a time with a straight forward function to return the number of milliseconds since some moment in 1970. (I think!)


function time()
{
var d = new Date();
return d.getTime();
};

I store this value in something like m.player.firstTouch.
Then when touchEnd() fires I do the same and store it in m.player.lastTouch.
A simple test to see whether lastTouch is significantly higher than firstTouch tells me whether or not the player has tapped the screen or tried to move the character.

With a bit of fine tuning I’ve also managed to make the character’s movement pretty smooth and of course relative to the player’s first touch on the touchscreen.

The effect is nice. If there’s one thing I’ve learned making these simple arcade games it’s that if your controls are a mess the game will have no appeal whatsoever. According to my Analytics I enjoy a high percentage of repeat plays. I see this as a target to maintain.

I don’t have a title for this game just yet so I call it Bouncy :)
It’s very much a work in progress with still a fair amount of place holder art. But it’s moving along nicely and has given me a valuable distraction from my work on Kyle Comet’s first adventure in space ! As with Kyle my intention is to develop game characters that I can expand on and potentially brand for future adventures.

You can check my dev page for notes and updates on the game’s progress.

%d bloggers like this: