Road Rage development update

In wrapping up the development of Road Rage I hit one or two snags. This annoys the hell out of me since it is largely due to big holes in the game’s design.

I’m a designer who likes to have the core stuff ironed out long before I get my hands dirty with code and graphics. The central mechanics of the game are the first thing I figure out and everything else gets built around it.
For Road Rage the central theme is the winding road that shifts at pace beneath the action and provides a rapidly changing restriction to the player’s movement. If the car veers off-road it incurs significant damage.

HTML5 arcade game screenshot

This all worked out well initially. I’d used the code base for Spy Chase as a foundation and built upon it with layers of activity. The problem was that the game was actually far too easy to play and I wasn’t willing to compromise any of the design features. 
The road movement look neat, the laser fire from the player’s car worked well, the missile fire from the enemy looked great and the explosions and special effects all added a wonderful depth to the game. But it was just too easy.
The player’s movement was limited but fairly swift in the x axis and his laser fire was rapid. This I liked. Everything played out smooth and it felt like the most complete arcade game I’d ever made. 
Injecting the time limit was a late addition and it really intensified the challenge. 

Then it occured to me that the fundamental issue was with the player’s ability to shield damage from bombs, cars and the off-road. This increased the player’s chance of survival through to the health regenerating Checkpoint between stages. 
I played with a few different means of punishing the player and settled on a single hit from a bullet or missile destroying the car. Bumping other cars and trucks took a small amount off the player’s “health” (pretty vital as bumping is a key feature in the game and a fair bit of fun) and running off-road added larger amounts of damage. I didn’t want to destroy the car for veering off road as in some cases it’s unavoidable. Better to add damage and encourage the player to return to the road at the earliest opportunity.

So the game dynamics are now set such that the player avoids enemy fire at all costs and shifts left and right to collect, dodge and shoot. So much so that you could pretty much remove the road and backdrop and it’d play out like an old school shoot ’em up. 

I think the game is a huge amount of fun and faithful to the arcade game designer’s ethos of short, challenging and intense fun for your coin. Hopefully it will encourage a high percentage of replays!

Road Rage will find its way to the PlayStar Arcade in the next week or so.

Balancing the action and using a classic for inspiration

Designing HTML5 arcade games with JavaScript has become something of a theraputic exercise. The combined thrills of pixelling, coding and designing the various elements of the action are proving to be quite useful in the stressful run up to Christmas.
Yet despite this I now find myself in that unavoidable “crunch” mode on two projects. I also set a target to finish these two projects by the new year.

A laugh at it now but I shelved my first project as it approached completion to pursue a fresh project. It was of course a diversion. I was deliberately avoiding the pain of that final 10% that takes an agonising amount of time to complete. Now I have doubled the pain!

It’s not all bad.
The discipline of developing arcade games has evolved and tightened over the years to become almost formulaic. This in itself isn’t always a good thing but it can be useful to have a blueprint for design when it comes to balancing, testing and code fixing.

For the most part at this stage I find that the raw code is cut and I’m largely playing with numbers. I play the games A LOT and talk to myself as I’m running through them – always making notes. Here’s such a conversation :)

There’s just not enough to challenge me here. The player character moves too quickly to be threatened by the bad guys. The bad guys need to target the player more. There’s too much room to move. The player isn’t developing any skills in his movement and bullet / entity dodging!

I kid you not. This was a recent note I took.
The beauty of all of this is that everything in the game is defined by numerics. The player’s movement is defined as a speed parameter that allows his co-ordinates to increment each tick. Similarly the other objects in the game perform against the same calculations. In the driving / shooting game (which I currently call Road Rage) the room in which the player has for movement is defined by the road object’s width and height. I applied a .nextthink attribute to the road container which ticks down every game tick. At zero I make another decision on how to scale and move the road.
With this method I can shrink or expand the road with ease after an elapsed amount of time. As a result of my testing and observations above I could see that the road needed to narrow more frequently. The player’s car going “offroad” results in a lot of damage and consequently Game Over so a shrinking road is a real challenge to the player.

HTML5 arcade game

As you can see in the screenshot the road is divided up in to slices. Each “slice” is an object that contains parameters for the ground texture, the road, the road’s verge and the lines that run down the middle.
The only artwork on display per slice is the ground and verge. The other two elements are solid colour blocks.

The tree decorations that overlay the ground are sprite objects and behave in a default sprite behaviour. i.e. emerge off screen, run the length and disappear without any collision detection.

Developing the shifting road wasn’t really much of a challenge. You could almost imagine the process as a series of around a dozen rectangular cards placed in order. By altering the x position of each road object as it is spawned off the top of the canvas (and subsequently allowing the object to increment its co-ordinate) you can create a satisfactory rippling effect that simulates the shifting road. The road width (the solid colour area) is known and therefore I can plot x co-ordinates for the overlayed verges.
Similarly any sprite object that sits on the road can be tested to see whether it has over-run the verge in which case I apply damage to it. Too much damage and it is destroyed. The impact on the random military vehicles in the game is a key part of the appeal as the player’s gleaming red sports car (modelled on a Ferrari 458!) can bump them off the road with a few well timed swerves in the right direction :)

For a long time in the early days of development I was playing the game and struggling to find a core mechanic for it. That vital element of the game that forms the player’s goal or goals. I knew that arming a sports car with rockets and allowing it to shunt other vehicles off the road would be fun, but as always I wanted an intensity to the action that meant there would be a ton of rockets and bombs on the screen. This can cause design problems in terms of setting a challenge since firing a huge amount of rockets and lasers only works if the stuff you’re aiming at is destroyed! It’s no good if the targets just bounce around a bit and are unaffected by your gunfire.

So I dabbled with all sorts of mechanics including collecting valuable items and avoiding oil slicks. They just didn’t work. The thrill of the game is in its pace and causing the car to spin or forcing the player to swerve and collect items just didn’t add up to very much fun. It needed to be a high octane experience with shooting, dodging, turboing and explosions set against an underlying need for speed.

So I fired up Out Run for a little inspiration. A wonderful game from the 1980s in which you drive a car at speed across an undulating terrain whilst avoiding other road users. The game is divided in to stages such that when you cross a checkpoint you are rewarded with a little more time to play.
This did it for me. It was obvious. A game in which you drive a car has to be a challenge of beating the clock.

I could still get away with blasting the bad guys I just needed to ensure that the core goal was to complete each stage in a set amount of time. Adding a timer was simple. I set it to 30 seconds initially and ticked down every second. At zero the car exploded and the game was over.

So the next question was how do I speed the car up and slow it down without having specific controls overlaid on the touchscreen.
This was a no-brainer. I implemented a turbo accumulator. The destruction of cars and military vehicles spawned turbo collectables that bounced around the screen. By collecting several of these the player built up their turbo bar sufficiently to engage a short (10 second) turbo mode in which the car’s speed doubled. The faster the car the quicker the player zoomed through each stage. So there was plenty of incentive for the player to destroy the other vehicles and go collecting the turbo shards.

But this wasn’t enough of a challenge. I wanted to add an element of dodging to the game so I stuck with the idea of the other vehicles launching missiles at the player. One hit and the car was destroyed! Unlike off-road damage or bumping the other cars, missile damage didn’t reduce the player’s “health”. It just wiped them out.

So I’m now confident that I have the game that I was after. As I play it now it’s pretty close to the original design and with the injection of the pulsating soundtrack and over-the-top sound effects I think it’s easily the best arcade game I’ve made to date.

I look forward to sharing it within the PlayStar Arcade shortly.

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.

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.

Kyle Comet – dev update

kyle comet screen

Dev screen with placeholder art

Pretty much finished the first draft of the story script. Each character is fairly well defined and I think the plot is pretty well established. Good guys chasing bad guys through minefields, asteroid belts and such against a backdrop of the threat of Earth invasion. Standard stuff but great to write for.

The mechanics and structure are in place – Intermission (story and goals) > Action (challenges, blasting stuff, collecting stuff etc), Summary (more story), In-game shop (power up your ship etc) and repeat.

I’m not entirely happy with the controls for Kyle’s ship on desktop. The mouse feels a little clumsy. But this is primarily a touchscreen game and to that end it works just fine.

Considering a cool Jet Force Gemini style soundtrack.

Starting to plan alien attack patterns. Need to consider what I want the player to learn in terms of movement and skills. Will base alien movement on this. Some will pursue the player others will simply move in formation. All will shoot.
Collecting stuff is a big feature of the game. Need to make sure that “greed” features.

HTML5 framework update

A quick update on the progress of my HTML5 game framework.
The big news really is the introduction of a fully featured high score table that supports import / export of data. It’s a neat addition to the framework and a must for my classic style arcade games :)

  • High score table support courtesy of IndexedDB
  • Improved full screen handling with intelligent resizing
    • includes support for several less popular mobile (Android) browsers
  • Fixed accuracy of touch regions for in-game menus
  • Sound effects triggering from level editor

The presence of a professional looping soundtrack sets the current project apart in my opinion. It’s a world away from the work I’ve been producing this last couple of years. Thrilled to be offering a complete experience now.

My experience of support for IndexedDB across mobile browsers is very poor.
In fact the only browser so far that cuts it is Firefox on Android. Not only does it fully support the spec (such that I require it) it also supports the onupgradeneeded event.
Chrome on Android supports the majority of the spec but doesn’t yet fire the onupgradeneeded event. I don’t currently have a workaround for this so playing the framework in Chrome for Android returns no high score table.

Where there is no support the framework falls back to using localStorage for a single high score entry.

For an accurate picture of where we stand with mobile support for IndexedDB look at caniuse.com/indexeddb