Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /homepages/27/d312880249/htdocs/spacemonsters.co.uk/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /homepages/27/d312880249/htdocs/spacemonsters.co.uk/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 87
JavaScript – Page 4 – in search of Space Monsters

Dragons ! Looking at a new game

Dragon game screenshotFollowing on from yesterday’s post about seeking inspiration I took to MAME and played through a number of classic mid-1980s arcade games. A few in there were a lot of fun and yet lacked the colour depth that came a few years later when palettes were increased and screen resolutions improved.

I decided to try and knock up a few images for a game that sees the player controlling a baby Dragon atop a castle rampart. The Dragon is defending something (treasure probably) from marauding knights, rogues and critters. His only form of attack is, of course, fire. The player shifts the Dragon horizantally and aims to bump off the attackers who attempt to scale the castle walls below.

Creating the sprite sheet for the Dragon was fun. It’s by no means finished but gives me enough to start a game. I created the game’s backdrop as a single 320 x 480 png that is placed in to the canvas background using CSS. No full screen redrawing here !

Dragon sprite sheet

Anyway, I’m still messing around with the concept but hope to have a game within a couple of weeks.

The aliens are coming ! Man your starfighters…

Galactians screenshot Galactians screenshot

Galactians is a game I’ve wanted to make since I was 9 years old.
I’m so pleased with it. It’s arcade short in terms of time, has a solid challenge and is (I think) a lot of fun.
My high score is woeful – I still can’t get to a million. But I’m going to keep trying !

It’s probably the game that I always wanted HyperGunner to be in all honesty. The trouble with HyperGunner was that I just didn’t know when to stop. With Galactians I knew exactly where to stop. It was to be a game like the Galaxians that I grew up with and to that end I’m very happy with it.

Anyway you can find the link down the side and in the games page. Give it a blast and let me know your high score :-)

Galactians – a new mobile HTML5-based game in development

As a kid growing up in the 1970’s the world of video arcade gaming gripped me in a way that I’ve never forgotten. I devoured Space Invaders and everything like it.


Galactians - screenshot

I remember where I was the first time I ever saw Pac-Man (a game that I really disliked) – on holiday in Newquay, Cornwall Summer 1981 – I also remember where I was the first time I saw Space Invaders, Scramble and Defender. But the game that really did it for me was Galaxians.
I’ve blogged on this topic before (http://rebelfive.wordpress.com/2010/11/26/how-galaxians-changed-my-life/) but it’s only now that I’ve managed to get off my behind and create what will become my homage to that great Namco game.

Whilst I piece together the various parts that will become Area51 I decided to take some time out to create what I now call Galactians. The premise is simple. You sit at the base of the screen and are faced with a few rows of bobbing alien insectalikes. Every once in a while they swoop off down the screen littering the place with bombs in an attempt to destroy you. Some have an intriguing kamikaze style approach to achieving this.
The player has his star fighter that spits out 3 or 4 shots in quick succession. The closer the diving alien bug is to you when you destroy it the greater the rewards.

There’s no fancy trigonometry or parabolics in this. It’s just not required. It’s just a case of modding the alien x co-ordinate in order to give a satisfying and graceful descent. Quite often, as with the original Galaxians, there is a very uncomfortable feeling of being cornered or trapped. This I like. Fortune favours the brave as they say but occassionally you pay the price for your bravery.

I still have a bit to do with the game but it’s pretty much there in terms of providing a quick challenge to the player – perhaps a bus rides worth or even a bathroom visit ! I don’t want to make it complicated. These 30 years old arcade gems were never complicated.

As soon as I have a complete game I’ll share the link through my mobile arcade game portal at m.spacemonsters.co.uk.

Area 51 – development update

Area 51Decisions, decisions.
Having broken the back of the arcade element to Area51 I’m now left standing at a crossroads in terms of game design.
There are numerous elements to the game that I am enjoying – the cramped gloomy corridor feel, shooting monsters – spawning blood, shooting toxic barrels and fireballs, powering up your weapon base, muzzle-flashes, watching the discarded bullet shells thrashing away from your current weapon with every shot.. all adding up to a quite enjoyable experience in terms of fun and player feedback.
But still the game seems incomplete. It’s just not enough to work your way through endless hordes of monsters. Players need more intricate challenges.(I just can’t seem to make a 2p game where all the action is over within 10 seconds and the rest is just repeat ad-infinitum)

So I’m looking at ways to boost what I call the “immediate action”. i.e. the challenges that are thrown at the player mid-level. Which essentially boils down to having more to shoot, more to dodge, managing health and managing ammunition. The base weapon – the pistol – will have infinite ammo so you can always fall back to that. But the better weapons will sap ammunition at a good rate.

But there is another element to the game that I want to improve and that is what I call the “deep action”. This is essentially the true goal of the game.
I had always intended for Area51 to be a game about survival and ultimately escape. I had toyed with the idea of rescuing the good guys but am now not sure it is necessary.
I want the player to move along a fairly linear path blasting his way out of situations whilst facing increasingly more menacing adversaries. I also want the player to have some sway on the direction that the action takes.
At the end of every battle I currently reset the level and present a ticker text display of the next area. e.g. Entering Bio-Mechanical Research Center
I hard code these scenarios.
What I really want is to provide a loose map that is generated randomly at the start of every game. As the player progresses he is given choices as to which direction (basically left, right or straight ahead – never back) he wishes to take. Where I take the player away from the central “core” path I ultimately ensure that I bring them back. So regardless of the areas that he ends up in he can be sure that at all times he is actually moving forward.

A likely scenario might be:


These decisions are exclusive. You cannot for example enter the weapons lab and then come out and go in to oxcart research.
Each location will be weighted. That is, depending on the location there will be an increased chance of receiving health, ammo or bigger monsters ! The title of the location will give the necessary clues.

One of my favourite games as a kid was The Eidolon. An Atari 800XL masterpiece of tension and graphical loveliness. The highlight was of course the dragon that you always knew you were close to because the screen glowed and the noise level increased.
I am looking at implemented something similar for Area51. A simple radar implementation wouldn’t be hard.

I deliberately took a couple of weeks off developing this game so that I could just sit back and play it.
I’ve found it useful. Very useful. It allows me to see the game through a gamers’ eyes as opposed to a developers’.
I feel like I can now finally move forward and complete the game to the original vision.

As always I aim to complete the game code such that I can concentrate on playing with the graphics. I need to get these sketchbook illustrations and convert them in to pixels !

Watch this space !

HTML5 game tutorial – or not

I have been desperately trying to piece together the fragmented sections of a tutorial for making your own HTML5 games. Despite what you might think (and you’d be forgiven for thinking it given the amount of publicity that they get) you don’t need a library or framework or some other fancy tool to write your own games. You just need a basic understanding of JavaScript and the desire to learn.

Anyway, whilst I finalise said tutorial I’ve placed a bunch of links to some cool books on the subject down the side of this blog. I recommend them all since they all offer a slightly different angle on the same thing. If the budget is tight then Google the author’s names – they will direct you to some cool stuff.

Area 51 – adding some nice touches


15 – 20 years ago I devoured games such as Wolfenstein, DOOM and of course the 15 year old genius that is Quake. What I loved about those games was so much more than the pleasure of blasting monsters – for me was all about the neat little extras that the developer threw in.


Most notably the muzzleflash and weapon recoil when the trigger button was pressed. This lit Quake up beautifully. In fact before OpenGL changed the look of the game you could pretty much light your way along a gloomy corridor with a few rounds from the shotgun / nailgun or with a single shot from the rocket launcher. I can’t tell you how many times I did that and enjoyed it.

For Area 51 I wanted to achieve my own very stripped down version of this super satisfying sensation.
To achieve the muzzleflash I simply re-rendered the wall overlays to include a touch of Photoshop light rendering. I aimed the cursor to the right of the weapon area so that it pretty much just lit up the right hand corridor wall. If you look you can see it slightly illuminates the darker corridor in the distance. The effect was satisfying enough but empty without the recoil of the weapon in hand.

I set a .nextthink attribute on the weapon object and depending on the weapon it would be anything from 4 game ticks to 10 for the slower non-auto weapons.
During this period I would flash the walls and recoil the gun. Better yet I lifted the already written blood spurting code and created a white version that spat from the gun with every round. Almost like bullet cases being shed when unloading an automatic rifle.

You can see the muzzleflash in the above right image compared to the left side.

Finally I got around to iconising the weapons for display in the HUD. You can tap each unlocked weapon to use it. The first three weapons will unlock fairly quick but the last two might just be beyond level 20. That’s when the aliens and hideous experiments start to come at you :-)

Hugely entertaining to develop this. Loving making games again.

Incidentally the text in the green console is dynamic. I intend to write meaningful things in there during each mission to assist the player. As yet I haven’t thought of anything to say in there.

A new game in development – “Area 51”

Nearly 10 years ago when I was a young video game artist working for Software Creations in Manchester I firmly believed that I could set the world of gaming alight. Back then we were developing fairly average GameBoy Advance games for Acclaim so a number of us had side projects.

area51 title screen Area51 screenshot

A coder friend and I had read with interest that the original plans for DOOM were to have military scenarios over-run with mutants and all manner of toxic monstrosities, and you as the hero had to dispatch them to escape. Carmack had put the kibosh on the idea claiming it was far too stereotyped and predictable – far better to have hell crawling out from some otherworldy place and eventually finding its way back to Earth. That story is the stuff of video gaming legend.
But we were fairly intrigued by the initial idea and I started coming up with some artwork and animations. Fortunately I kept the artwork from back then on CDs and having just moved house found them all in a box. So I dug them out, restructured them and started building a game. I call it Area 51 just now since a decent title hasn’t struck me yet :-)

The premise is fairly simple, the crap hits the fan deep inside a secret military installation and all the “projects” are released in to the corridors. You start with a pistol and shoot your way out finding more complex experimental weapons as you go. Naturally the monsters become more complex and deadly and there in itself is a game.

But I want to add a bit more to it. I want the played to deal with mutants in waves. At the end of each wave the player finds the exit and is presented with a choice – left, right or straight ahead. I construct the map up front and the player picks his route. There’s no keys to find or passcodes for unlocking doors – it’s all just run, gun and get out.

I intend to have shootable powerups and other such goodies but for now it’s all about getting the feel of the action right. To that end I’ve successfully managed to scale the mutants and render appropriately sized blood droplets. I’ve also managed to jolt the gun and plan on firing off empty shells with each round. The gun is controlled from the green touch area at the base of the game. With every stroke of the finger the crosshair moves in the main game area and shoots. If a mutant is in the way it is shot, loses HP and ultimately falls defeated.

I’m super excited to be creating a game that isn’t my normal sort of game. I’m also excited to be using some graphics that are from a time I absolutely adored sitting and pixeling in Photoshop. I hope to show quite a bit more in the coming weeks.

Introduction to HTML5 Game Development

Loved Seth Ladd’s cool video introduction to HTML5 game development. You can catch it here.
I for one learned a fair bit. Not least the effective use of requestAnimationFrame() over standard JS setTimeout() or setInterval().
You can read more about the requestAnimationFrame() method here.

Re-thinking sprite movement

All of the object movement in my games to date has been fairly rudimentary. I generally try to stick to the old joystick locking movement of yesteryear which saw just 8 directions of movement.
I count from zero (North) clockwise through to 7 (North West).
sprite movement directionsAs you can see I also (where the player sprite is concerned) implement Move flags. With every key release I reset the flags and re-assign them onkeypress.
Of course all of this is pretty restrictive and to achieve any variation I have added simple x,y modifiers. The formation sequence in HyperGunner for example sees the procession of aliens moving in direction 4 (South). To make the movement a little more graceful I simply modified the x value by anything from 0.1 to 1 depending upon the position that the alien was in relative to the screen edges.

What I really want to achieve is a much more calculated approach to sprite movement such that I can implement the sort of thing you see in Breakout where the ball moves at different angles depending on the collision with the bat.
So I started to think about how best to do it. I came up with a solution but having never written this kind of stuff before I’m open to suggestions for alternative methods or best practises.

So here’s how it works.
Step 1. Assess the x,y of the sprite object versus it’s intended destination.
assess target x, y In most cases the target x, y (90, 0 in the above illustration) will correspond with the co-ordinates of another object. For example I may want to launch a bomb from an alien to a playership at the base of the screen. I could easily capture the co-ordinates of each sprite and move on.
But in some cases it may be that I am firing from the other starting point. i.e. a laser from a player’s ship that if left alone could sail off the top of the screen. I may not necessarily want to angle the ship since the laser burst may be part of a special move. So in this case I simply pick an x value and a zero y value as my target.

Step 2. Calculate an x increment / decrement based on the speed of the moving sprite.
x modifier So let’s assume that the sprite has a move speed of 16 pixels. With every game loop the sprite will move North (direction 0) in steps of 16 pixels.
The total height it has to move is 160 pixels so this will be achieved in 10 steps.
How much therefore must we modify our x value to arrive at the desired location.
Well this is pretty simple theory. We take the difference between the two x values (in the example above 38) and divide it by the number of steps that the sprite will take to reach its y target.

So whilst the y value is decreasing by 16 the x value is decreasing by 38 / 10  = 3.8
I implemented a simple example to illustrate what I’m doing. You should see it in the iframe below. Notice how the alien bombs (square blobs) appear to home in on the player. Fairly basic stuff but something that I’m pretty happy to have finally got my head around.
I wrote a simple function to handle the calculation of the modifier.

function calculateMods(a,p,o)
var steps = ((p.y + p.h) - (a.y + a.h)) / o.speed;
o.xmod = (p.x - a.x) / steps;

As you can see I simply pass the alien, player and object (in this case an alien bomb) in. The function assigns the xmod value based on the calculated number of steps.

Look here: Distant Orbit HTML5 Galaxians style game in development.

%d bloggers like this: