Distant Orbit – New mobile HTML5 arcade game

Your home world is under attack from a mysterious alien threat that appears without warning and sets out to eliminate mankind. With immense power four motherships spew forth wave after wave of drone attacks that slowly but surely render your once beautiful planet a vast scorched wasteland. In desperation a somewhat depleted squadron of star fighters is dispatched in to deep space to locate and eliminate the source of the alien’s power.

Distant Orbit title screen

I had always intended for Distant Orbit to be a game about alien worlds. I wanted the player to discover wondrous new locales and mysterious alien species as they progressed. To that end I knew from the outset that it was to be a game about unlocking content as the player’s skill increased. What I hadn’t planned for was any kind of an achievement system. I simply wanted the player to destroy location 1 and unlock location 2 and so forth until the planet was completely destroyed.

I had also not planned for an in-game store. It didn’t make much sense since the fighters were essentially alone in space. Where on earth would a store suddenly feature ?
But this is fantasy land and I soon realised that the game would benefit from the additional challenges of saving enough credits for new star fighter features; Lasers, Shield Power and Ship Speed.

Distant Orbit in-game store

So the structure of the game was loosely set to present the player with four planets, three of which were locked. On each planet there were ten missions the first of which was automatically unlocked, the remaining nine dependent on the player completing the previous one.

screen shot screen shot

The game itself is essentially a shoot em’ up. I started as I always do by playing with some neat feature. In this case it was all about the striped terrain tumbling down the screen. I wanted to give the impression that the starfighters were floating over a rapidly moving alien terrain.
You can read about how I achieved this by reading this earlier post about fillRect().

I had always wanted to recreate the classic Broderbund game, Stealth. I adored it 30 years ago on the Atari 800XL and still occasionally fire it up emulated to this day. I always loved the style of the game and speed at which it played.
For me it was a proper arcade game with that added sense of mystery. The whole “what lies beyond the horizon and in the mountains ?” thing inspired me as a teenager. Still does.

I also loved how the game ended. The way the tower fell, the screen wobbled and the fighter raced off in to the distance. I loved the way you could still make out the glow of the fighter’s jet engines as it disappeared.
I had to have it all in my game.

Distant Orbit player spritesheet

Player’s star fighter spritesheet

So I created a starfighter, a shadow sprite and some mountains and threw the whole thing together. I wanted that feeling of racing towards the horizon as the mountains loomed in to view. Unlike Stealth I fixed the screen such that as the fighters reached the screen edges they simply stopped.
To compensate for this I tilted the fighter to give the appearance of it banking.
This is easily achieved by rotating the sprite and shrinking/stretching the shadow accordingly.


g.ctx.save();
g.ctx.translate(o.x + (o.w/2),o.y + (o.h/2));
g.ctx.rotate(angle * (Math.PI / 180));
g.ctx.drawImage(o.spritesheet.image, o.frame * o.spritesheet.framewidth, o.row * o.spritesheet.frameheight, o.w, o.h, -o.w/2, -o.h/2, o.w, o.h);
g.ctx.restore();

The steps to rotation here are simple.

  1. save() the  canvas state
  2. set the origin for the canvas region that you want to perform the rotation in
  3. perform the rotation
  4. draw the image in to the canvas context (the object o contains all the sprite data)
  5. restore the stored canvas context state

What’s interesting about performing this operation is that you rotate the canvas and not the image. It takes some getting used to initially.

Distant Orbit in-game action

In Stealth the view shifted left and right to reveal a little more of the game’s pixel vista. I really didn’t need that and didn’t actually want to code it if I’m honest.

For the visual style I looked initially at Stealth but then realised I wanted to present something a bit more colourful.
I had initially looked at a cartoon presentation but soon dismissed it. It just didn’t seem right.

So once again I turned to my love for Starship Troopers.  As the (weak) story for the game formed in my mind I knew that I wanted something like a rogue troop of pilots to do battle with alien bugs.

Before long we had the game’s structure in place and I was shooting aliens, dodging bullet fire and hurtling toward a distant tower with the intention of destroying it. Perfect.

Each planet has it’s own type of tower and the farther the player progresses the more hostile the inhabitants become.
I wanted to slowly develop the difficulty so initially I simply fixed the bullet rate from the aliens. It made sense that an ill-equipped starfighter should not have to do battle with an alien horde spewing dozens of bomb its way. On the later levels and certainly on the final planet the alien attack is unrelenting. At this point the player will have had to spend all his credits on building the perfect fighter.

Much of the difficulty comes with avoiding the alien bombs but I also tried to ensure that there was that all important sense of greed in the game. I included a sideways shifting probe that seeks to more from one side of the screen to the other. If you gun it down it spews out a power-up. If the tower is in range this is effectively an instant mega-hit to the tower’s base. If the tower is out of range the power-up is a smart bomb that wipes out everything on screen. Including alien bombs. The down side here of course is that there are no bonus coins dropped by the aliens.

All aliens drop valuable coins when destroyed. Or rather they throw them up in the air and you must shift in to position so that they land in your lap. This is tricky and on the later levels requires a speedy ship.

I won’t give too much away but there is I think a rich blend of things to collect, avoid and destroy. So much so that by the time the tower has been destroyed you welcome the breather to assess your star fighter’s strengths and weaknesses.

This isn’t a short game. I’d wanted it to be at least a couple of hours to complete. But importantly it still fits in to that “short game time” style where the player has just 5 minutes available to play. Each tower stage takes roughly that amount of time. Perhaps a little longer on the later planets.

screen shot screen shot

Distant Orbit is available for licencing on a non-exclusive basis. It can be easily white-labelled and I’m fairly flexible in terms of certain game elements.
The game is quite text heavy but all data is held in a simply formatted file that can be handed over for translation.

This is just an overview of the game. I really want to write up one or two lessons that I’ve learned in developing this game. Such things as designing levels, structuring the action, touch screen on varying screen resolutions and defining the look and feel.

If you want to play the game please send me an email and I’ll forward a link on to you.

%d bloggers like this: