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.

iPad shoot em ups “shmups”

I think my geekish enthusiasm is spilling over in to slightly worrying obsessional territory. But all the same there is no single genre of game that thrills me more than the good old “shmup”.

screenshotThere are so many variations to the shoot em up and I love them all. My particular favourite the so-called “manic shooter” (you’ll see this listed as anything from Chaos Shooter to Bullet Hell gaming) stands out as the purest a video gaming experience could be. When it’s done well its kaleidoscope-like presentation just sucks me in and grips me to the point that I might as well be strapped in to my own fighter and battling my way through hordes of mechanical monstrosities.

So I figured it’s a subject so dear to me it deserves its own page.
The link is at the top of the page.

If I’ve missed a game (and I most certainly will have missed many) then please add it to the comments. I’m determined to expand my list of shoot em ups on the iPad. It’s part of the reason I got the thing :-)

Note: the scores alongside each game are my own view and nothing at all to do with Apple or Apple’s feedback leaving user-base.

List of iPad shoot em ups

I have a small collection of shoot em ups on iPad. I have to say they’re all fantastic but a couple really stand out. Phoenix and Icarus-X in particular are a real thrill to play. Don Pachi is always excellent. Not all titles are specific to iPad but all play well on the larger screen.
I’d love it if ESP RaDe and Under Defeat made it to iPad some day.
Please help me add to my list. If you know of a cracking iOS shmup let me know.

Air Attack HD
Do Don Pachi
Exexe
Icarus-x
Infinity Field
Lightning Fighter
Phoenix
Shmup
Sky Combat
Sky Force
Space Falcon
Tyrian

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.

HTML5 Game Development Tutorial

html5 game development

I have wanted to create a simple HTML5 game development tutorial for a long time. It always frustrates me when people (web developer people) tell me they would love to make games but just can’t get their head around it or figure out where to start.

There are so many myths and misconceptions with JavaScript and HTML5 that I figured a few pages offering my own (rather straight forward and by no means complicated) approach to game design and development might benefit someone else.

I am not (and never have been) an expert. I write my JavaScript in a style that hasn’t changed too much in the last 10 years. You may like it and find it refreshingly readable (I hope so), or you may hate it and deplore its apparent amateurishness. I guess at this stage I should add that I intend to aim this series at the absolute beginner. The complete novice. If you are a JavaScript cadet, maybe written a few document.getElementById methods and done some nice stuff, then you are probably going to be my target audience. If you are a hardcore JavaScripter and get all frothed up at the idea of writing in one of several patterns then I’d suggest you’re not going to be moving forward reading this. If however you have half an interest in making a simple arcade game…

Above all I want to illustrate just how easy it is to craft a simple game using HTML5, JavaScript and CSS. Several things are beyond the scope of this tutorial series but you can find all of that using this wonderful resource that is the internet. I will where possible point you in the right direction.

For the purposes of this tutorial HTML5 pretty much boils down to the use of the CANVAS API. We will draw to the canvas, slap some text on there and generally get a feel for working with its 2D context. We will also handle other game elements such as key/mouse/touchscreen input, sprite movement & animation, collision and scoring. I will use a simple space shooter to illustrate the process not least because I adore space shooters. They also as it happens provide everything you need to get a convincing game up and running.

At the top of each page I will present (within an iFrame) the game as represented by the code we are discussing. I will present any relevant or important code snippets below. Finally I will provide a link to the code where necessary beneath the accompanying code.

I LOVE making games. I’m sure I will enjoy writing this tutorial. I hope that you enjoy the journey with and gain something from it. If you have anything to offer please do get in touch or offer some comments.

Finally please email me if you feel I have missed something crucial. If necessary I will expand on something and offer a bit more of my limited knowledge :)

Making a living designing HTML5 games

A huge frustration of mine these days is my inability to actually turn my love of crafting simple web based arcade games in to a profitable and worthwhile livelihood. I’ve been following the web scene for years and have seen a good many trends come and go.
The explosion of Flash several years ago really opened my eyes to the potential of the web but I have continued to resist it since it just niggled me that it was all dependent on a plug in. In so many ways the world of web design and development has been screaming for HTML5 for so long. And now we have it. Not only that we are seeing its adoption across the board.

Surely now is a great time to be a web developer with an eye for creating simple games that people can not only play natively but on the move as well. Mobile gaming is just going to go stratospheric this year and in the years to come.

As mobile devices become more sophisticated and their browsers more compliant to developing standards I can only see a bright future for the developer of HTML5 based web apps. Especially a developer with a good handle on design and presentation.

So what about the game designers ? What about those of us who enjoy making and playing those simple (or not so simple) coffee break arcade games. How do we capitalise on this exciting new world of web development and maybe even make a living out of it ? How did the Flash guys do it ? How much money is in it ?

I’ve seen a fair few portals appear in the last 12 months that offer some real hope. The excellent HTML5games.com and the long established Spil Games to name just a couple present an excellent outlet for the HTML5 game developer. I’ve also been approached by a number of other portal providers to license my games for a small fee on a non exclusive basis. Which is great and very encouraging. But for a man of 41 years with mortgage, bills and family to consider it’s all just a bit too much of a risk to ditch the day job and start churning out 3 or 4 games a month. Or is it ?

You see it was when I actually put it that way that I realised there might be something in it.
Imagine you have just one game. On a non exclusive basis you might get your game on to say 3 portals. Right now is a good time since portals are in their infancy and crying out for content. Sure they might not have too much cash to offer you but these are early days.
I’ll talk in dollars to help the broader audience. Let’s say you agree a license fee of $300 for your game. That figure is not uncommon in my experience. For that the portal operator can take your game and present it within their family of web sites and you remain free to pursue other deals with the same game. By far the best option.
So if you develop a relationship with just 3 portals that’s a tidy $900 for your first game. Assuming you pay your taxes subtract a relevant percentage to stuff in to your pocket.
So then it comes down to productivity. Just how good are you at making HTML5 games ? It stands to reason that the better you are the more you will make. If your games are good you’ll also attract more portals.
So who cares if the portal ask you to slap their logo on the splash screen. Who cares if they want you to hand over a small amount of space on the title screen for an advert. If you want to be commercial it strikes me you have to play ball and compromise a little. So long as the game itself remains intact.
Just make sure that you retain the ability to identify yourself within the game somewhere (say a Twitter account or a web address). The game should do a huge amount of marketing for you. Don’t forget it’s in the interest of the portal operator to attract thousands / millions of visitors. Each of those visitors will be viewing your game if it’s good enough. Make sure it’s good enough.
Get out there and play other games. Research the technology. Push it, offer something a little different.

As with all things in industry and commerce there is a small window of opportunity in the early days to establish your self and make a mark before the whole shebang gets swamped by the big guns who seek to shrink the Market down to size to suit their own endeavours.
If you are in any way inclined to create HTML5 games I believe that now is the optimum time to get yourself out there and possibly carve a living from it.

Good luck !

Looking forward to Dungeon Siege III

Dungeon Siege screenshot

As an arcade gamer and arcade game designer I tend to shy away from games where I spend all my time managing stuff. I rather like the concept of managing stuff in games but in reality I have very little patience for it.
I must have downloaded a multitude of games for iPad alone where I’m required to manage an individual, a party, a city or a football team and I always have the best of intentions in seeing it through.

Sadly I never get past the tutorials phase and instead of seeing my football team through from the lowest division in to the top flight of the Premier League I always just cut to the chase and fire up FIFA. Worst still these days I have found rather a lot of comfort in the painfully addictive Flick Kick Football (high score 547 in arcade mode if your’re interested)

But there was always one game that I had a tremendous amount of time for in that it blended beautifully the arcade elements of my favourite games with the RPG style management of a party of adventurers and that game was Dungeon Siege.

10 years ago I cranked this game up and expected Diablo. Diablo of course had set a high standard in fantasy RPG and I rather liked the mood and style of the game. But I never finished it. When I found that Dungeon Siege was actually more of a hack and slash that nodded toward RPG in its most basic form I was very pleased indeed. I’d found not only a worthy follow up (for me, not the industry) to the Diablo experience but a game in which I could feel at home.

There were many things about DS that hit home for me. I loved the initial sense of something far greater taking place in the kingdom of Ehb. The fact that I was a lowly farmer’s boy and the world around me was in turmoil was intriguing. A kind of Luke Skywalker type kick start to a magical adventure battling hideous mythical beasts, Dragons and all manner of hell on Earth.
What unfolded over the next hour or two was exciting not least for it’s presentation of hostile environments and seemingly desperate lost causes (it wasn’t uncommon to find yourself straying from the beaten path and in to a cave where you quite feasibly figured you’d find a way out ! Only to discover that the way out was the way in) all of which brought you to a safe zone in the shape of a village, trader’s post or fortress.

I particularly liked the villages. I loved the fact that my growing party (whom I considered personal friends in my cosy little make-believe imagination) could all enter a village, seek the nearest tavern and relax and get to know each other. Of course none of this happened in the game itself. It was all in my head but hey, that’s all part of the adventure :)

20110402-073124.jpg

Dungeon Siege was crying out for an update and when the Legends of Aranna DVD came out I devoured it. Dungeon Siege II was a different experience altogether and I pretty much skipped it but now we have Dungeon Siege III on the horizon.
Being the proud new owner of an XBox360 I am practically p*ssing my pants at the prospect of regressing 10 years in to a game world that I adored.
When the kids are in bed and the wife is reading I shall be assembling my party and venturing further forth in to the hostile but visually stunning Kingdom of Ehb for another chapter of hack and slash wonderfulness.

Go take a look at the official site for the game.

HTML5 game identity crisis

I have this game that I’m dying to make in to something more than just bloody Space Invaders on a grid. I think I must have been a bit lazy and just fell back in to my default “ooh, create a shooting game” mode.
I initially wanted to launch missiles that careered off down the grid and hit objects in the distance – something like a submarine torpedo style game with battleships crossing the screen. But I don’t know I just found it to be a bit dull.

Perhaps there is a game in there somewhere but for the life of me I cannot identify it.

If any game designers out there can suggest a neat idea for how to use a horizantal shifting grid then please let me know. The only thing I’ll add is that I want to be able to shoot stuff :-)

Moving everything under one WordPress roof

It has long been my intention to pull all my web work under one web site. When I started Space Monsters I simply wanted somewhere to write up my day to day thoughts on “stuff”. The more I get used to having this blog the more I consider it to be my main web site.

I’ve enjoyed blogging about my HTML5 game development and look forward to continuing it on here. I will keep the original blog online since it contains a ton of stuff I just don’t want to duplicate. I like the WordPress interface so this site is built using the WordPress software as opposed to the hosted solution. The benefits of having more flexibility and the added ability to actually generate some revenue from it (one day) far outweigh the simple convenience of having someone else host all your work.

So the first thing I’ve done is to move a few of my mobile HTML5 based games over to Space Monsters.

They are HyperGunner, Spy Chase and the first one I made, Wizard Wars.
HyperGunner and Wizard Wars are playable with the keyboard arrow keys and Z or Ctrl to fire where relevant. All three use the mouse of touchscreen on relevant mobile devices.

So welcome to my new home. I hope you enjoy my prattling and thoughts on “stuff”. :)

%d bloggers like this: