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 2 – in search of Space Monsters
Distant Orbit screenshot

Playing with fillStyle to create some neat game effects and text

Creating games using HTML5 and the Canvas isn’t always all about using drawImage(). For the most part it is of course because we want to display our lovingly drawn sprites and environments but there are plenty of legitimate cases where we might opt for using the primitive drawing methods such as fillRect().

I use fillRect and fillText consistently in my games and have never found it to be a performance killer. At least not using the canvas dimensions 320 x 480 which I use for mobile gaming. But you should be careful. The more you ask the API to do the more of a load you place on it and at some point something has to give. Namely your framerate !
But with a bit of planning and some consideration for what you are actually presenting it can be very visually rewarding.

Distant Orbit screenshot

Distant Orbit

In Distant Orbit I’m actually using rectangles to construct the pseudo 3D tumbling landscape. It’s a very old and well-used method of creating a moving terrain.
The theory is quite simple in that the lower half of the game screen is first filled with a solid colour and the striped terrain is then a series of rectangular ‘sprites’ that scale upwards as they fall down the screen. The effect is quite nice and I save on having to draw two sets of stripes by having the underlying layer as the alternate colour.
So the underlying layer is drawn in the lighter shade and then the striped layers are drawn over the top.

I refer to the stripes as sprites since they are derived from my base sprite class. That is they inherit specific behaviours and attributes that allow me to position and present them on the screen.
It’s just that when I get to actually drawing them I’m using fillRect instead of drawImage.

Here’s an example of how you would display a rectangle.

function drawRectangle(o) // o is the incoming sprite object from which I shall derive co-ordinates and size
{
 g.ctx.fillStyle = '#bf0000';
 g.ctx.fillRect(o.x,o.y,o.w,o.h);
};

(You can see that I store the canvas context within the global namespace g)
So g.ctx.fillStyle has a hex colour value assigned to it and the following draw instruction honours it.
When I draw the rectangle I have already passed through a move() function to return the new position and dimensions of the stripe.
It is also important to note that the fillRect method uses width and height as opposed to locations in terms of scaling your shape.

Example

g.ctx.fillRect(20,20,30,30);

produces a 30×30 square with its origin at 20,20 NOT as you might expect a 10×10 square that starts at 20,20 and finishes at 30,30.

To achieve the scaling terrain effect in Distant Orbit I initialise each stripe with a height attribute of 1 pixel. As it falls down the canvas it scales until by the time it falls off the bottom it’s around 48 pixels deep.
Rather than scale the stripes by a fixed number of pixels each time (e.g. 2px) I use a modifier. This stops the stripes looking horribly uniform. By incrementing the height attribute by a modifier that itself increments with smaller numbers I get the effect that the stripe remains quite narrow for a while as if it where lost toward the horizon:

o.modifier += 0.1;
o.h += o.modifier;

So the height of the stripe would change something like this:

0.1
0.3
0.6
1.0
1.5

which gives a far nicer effect than a uniform increment such as 1, 2, 3 etc.

The beauty of this approach to drawing on screen is that it is reflected in other forms of presentation such as writing text. Instead of fillRect you just use fillText but the style is set in the exact same way.

Take a look at this code.

<!doctype html>
<html lang=en>
<head>
	<title> fillRect() </title>
	<meta charset=utf-8>
	<script>

		var g = {};
		function init()
		{
			g.ctx = document.querySelector('canvas').getContext('2d');
			fill(0,0,320,480,"#0000ff"); // Blue background
			fill(20,20,30,30,"#ffff00"); // Yellow square (10x10)
			filla(0,80,320,20,"255,255,0",0.6); // Yellow stripe with 0.6 alpha
			write("Hello, World !",160,94,"center","#ffffff",12,null,"bold");
		};

		function fill(x,y,w,h,c)
		{
			c = c ? c : "#000000";
			g.ctx.fillStyle = c;
			g.ctx.fillRect(x,y,w,h);
		};

		function filla(x,y,w,h,c,a)
		{
			c = c ? c : "0,0,0";
			a = a ? a : 0.5;
			g.ctx.fillStyle = "rgba(" + c + "," + a + ")";
			g.ctx.fillRect(x,y,w,h);
		};

		function write(t,x,y,a,c,s,f,w)
		{
			c = c ? c : "#ffffff";
			a = a ? a : "left";
			s = s ? s : 10;
			f = f ? f : "Sans-Serif";
			w = w ? w : "normal";
			g.ctx.font = w + " " + s + "px " + f;
			g.ctx.textAlign = a;
			g.ctx.fillStyle = c;
			g.ctx.fillText(t,x,y);
		};

	</script>
</head>
<body onload="init();">

	<canvas width="320" height="480"></canvas>

</body>
</html>

The basic rectangle drawing is there along with a slightly different version that allows us to provide an alpha value. This alpha range is from 0 (100% transparency, i.e. non-existant) to 1 (opaque). So for example if you provided a value of 0.5 you’d see a 50/50 blend of the background colour and your rectangle’s colour.
The key thing to remember here is that for rgba values you must specify your colours numerically.
So for White rather than #ffffff you’d specify 255,255,255.
For White with 50% alpha opacity you’d use rgba(255,255,255,0.5);

Visit this link: fillrect.html to see the above code in action.

You can see that the text also has the standard CSS attributes of alignment, font-size, font-family and font-weight. This is extremely useful when you consider that you can pull fonts from Google’s web font repository for use in your games.

By simply adding the following line to my markup I can use the “Bangers” web font family in my game.

<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>

Visit this link to see the change: fillrect-newfont.html

You can see that in my code the order in which the items are drawn is important.
Starting with the blue background is important since it allows subsequent items to be drawn over the top. If the blue background were drawn last it would simply overlay everything else.
That said there is an instance where you may wish to present a solid block of colour over your content and that’s when you wish to fade your content in and/or out.
To do this we simply draw a rectangle with progressive alpha opacity as the last draw item in our draw order.

Take a look at this code for the necessary adaptations:

<!doctype html>
<html lang=en>
<head>
	<title> Fade In/Out </title>
	<meta charset=utf-8>
	<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
	<script>

		var g = {};
		function init()
		{
			g.ctx = document.querySelector('canvas').getContext('2d');
			load();
		};

		function load()
		{
			g.img = new Image();
			g.img.onload = function() {
				g.fade = 0;
				g.ticker = setTimeout("loop()", 40); 
			};
			g.img.src = "sun.jpg";
		};
		
		function loop()
		{
			clearTimeout(g.ticker);

			g.ctx.drawImage(g.img,0,0);
			filla(0,0,320,480,"0,0,0",g.fade);
			writea("Hello, World !",160,110,"center","255,255,255",32,"Bangers","normal",g.fade);
			if (g.fade < 1) { g.fade += 0.01; }

			setTimeout("loop()", 40);
		};

		function fill(x,y,w,h,c)
		{
			c = c ? c : "#000000";
			g.ctx.fillStyle = c;
			g.ctx.fillRect(x,y,w,h);
		};

		function filla(x,y,w,h,c,a)
		{
			c = c ? c : "0,0,0";
			a = a ? a : 0.5;
			g.ctx.fillStyle = "rgba(" + c + "," + a + ")";
			g.ctx.fillRect(x,y,w,h);
		};

		function write(t,x,y,a,c,s,f,w)
		{
			c = c ? c : "#ffffff";
			a = a ? a : "left";
			s = s ? s : 10;
			f = f ? "'" + f + "'" : "Sans-Serif";
			w = w ? w : "normal";
			g.ctx.font = w + " " + s + "px " + f;
			g.ctx.textAlign = a;
			g.ctx.fillStyle = c;
			g.ctx.fillText(t,x,y);
		};

		function writea(t,x,y,a,c,s,f,w,alpha)
		{
			c = c ? c : "255,255,255";
			a = a ? a : "left";
			s = s ? s : 10;
			f = f ? f : "Sans-Serif";
			w = w ? w : "normal";
			alpha = alpha ? alpha : 1;
			g.ctx.font = w + " " + s + "px " + f;
			g.ctx.textAlign = a;
			g.ctx.fillStyle = "rgba(" + c + "," + alpha + ")";
			g.ctx.fillText(t,x,y);
		};

	</script>
</head>
<body onload="init();">

	<canvas width="320" height="480"></canvas>

</body>
</html>

Very straight forward. You can see that I set a variable called fade and have it increment slowly from zero to 1. By assigning this value to the new text writing function I achieve the effect of the background fading out whilst the foreground text fades in.

Visit this link to see it in action: fadeinout.html

This was only ever intended to be a basic introduction to using shapes and text. I’d like to elaborate on it a bit in a future post and cover gradients and arcs. Anyone familiar with my games will have seen me use gradients for sky transitions in a couple of cases. I am a big fan of them as I think they offer a useful programmatic solution to something that is typically controlled by the artist.

When Distant Orbit is complete I hope to offer a bit more of an insight in to the game’s structure with regard to the drawing.

Developing a portal for free mobile games

Anyone who has ever glanced across my portfolio will notice that there isn’t anything in there that is particularly original. This is quite deliberate. A couple of years ago when I set out to create these JavaScript / Canvas games I set myself the simple task of recreating some of the games that I loved as a kid. Since I entered my teens the year Spy Hunter (below left) came out I hold a particular fondness for the game and set myself the task of crafting my own homage to it (below right).
I absolutely adored this game in the arcades nearly 30 years ago. The style, the feel, the music… it had it all. And I wasn’t alone. My friends and I stood like groupies around this cabinet for many an hour during the summer holidays.

spy hunter screenshot spy chase screenshot

The same can be said for other games like Defender, Galaxians, Galaga… the list goes on. So what you see in my portfolio right now is a direct reflection of my love for the arcade games of the early 1980s.

I suppose there will come a point where I move forward in time and focus on the SNES or something. I don’t know. But for now I want to bundle all these games together to present what is I suppose a bit of a nostalgia trip.
I always intended to create a place where people could play free mobile games at the tap of a button and I think I probably have enough games in the portfolio to make such a thing worthwhile.
free mobile web games banner
You can find the portal at m.spacemonsters.co.uk. Just now there is no sign-up or login of any kind it’s all just a tap ‘n go, free to play affair.

Ultimately I’d like to branch out a little an maybe embrace social gaming and have high score tables for each game that are stored on my server. It’s early days and I need to have a serious think about security and avoiding a spamming of my database. But that’s a challenge I enjoy :)

Touch control in a maze game ? Pac-Man has the answers.

I’ve been looking around the AppStore for games that implement the kind of touch control that I’m after for my maze game. There’s a thousand and one maze games on offer which is fantastic so I downloaded a few free trial versions to test them.

In many cases the controls felt OK but not great. The more I thought about it the more I liked the idea of a simple swipe gesture to change the direction of the player’s sprite.

Pac-Man has it all.
I really shouldn’t have been surprised. With the Pac-Man trial version you can set which style of control you prefer. So I picked swipe.

Pac-Man screen shot

The effect really is quite something. Your little Pac-Man chomps his way around the maze and you make your turns with elegant swipes. It just feels lovely. I really want this smooth feeling of control and am actually pretty much there.

I do have issues with the testdirection flag being unset after just one try but I will figure that out. Once I’m happy with the implementation I’ll write it up in a little more detail since I think it’s a useful thing to share to JavaScript game devs.

Talking of which here’s an interesting article called Analog thumb sticks for iOS using HTML5 from the creators of Onslaught! Arena which you may find interesting / useful.

Touch screen and player movement

Today I have spent a hopeless amount of time playing with the touch screen interface for a new game.
The game is a maze game, similar in many respects to Pac-Man in the way that it executes, but quite different in its content.

When I started to assemble the code for the player’s sprite behaviour I knew I was going to be faced with a tough decision regarding movement control.
In previous games this has never really been much of an issue since I’m generally dealing with movement in a fairly basic way. Galactians for example was a simple slide left and slide right affair. Wizard Wars was a touch-to-go-here game and Danger Ranger was a case of sliding your thumb or finger to turn the ranger to walk left or right. Everything else in that game was about jumping. In any case I’d taken the movement code from Dragons and not added much more to it.

But with this maze game it’s important to me that the whole thing feels natural. I really didn’t want the player to be concerned with where he has to put his finger in order to move. I really do loath the idea of semi-transparent virtual d-pads. It’s just that the touch screen interface can be used to great effect without them.

But, I had to explore all options.

Before I prattle on about the theory of implementing player movement let me show you how I set up and manage the touch code.

function initTouch()
{
	if(checkForTouch()) {
		if (document.body.addEventListener)
		{
			document.body.addEventListener('touchmove', touchMove, false);
			document.body.addEventListener('touchstart', touchStart, false);
			document.body.addEventListener('touchend', touchEnd, false);
		} else {
			window.addEventListener('touchmove', touchMove, false);
			window.addEventListener('touchstart', touchStart, false);
			window.addEventListener('touchend', touchEnd, false);
		}
	} else {
		window.addEventListener('mousedown', mouseDown, false);
		window.addEventListener('mousemove', mouseMove, false);
		window.addEventListener('mouseup', mouseUp, false);
		write("No touch capability.");
	}
};

function checkForTouch() {		
	var d = document.createElement("div");
	d.setAttribute("ontouchmove", "return;");
	return typeof d.ontouchmove == "function" ? true : false;
};

As you can see I perform a fairly basic test to see whether touch is supported as a function and if not fall back to mouse control. If you were to play any of my games on the desktop with diags switched on you’d see the line “No touch capability.” every time.
The point here is the level of control that we have over touch start, move and end. It’s pretty powerful and gives us a ton of options for controlling our games.

So how do we do anything with touch ?
It’s quite simple. Every time a touch event fires I store the co-ords in the touch object. Something like this..

var touch = {};
function touchStart(event)
{
	var xy = getXY(event.touches[0]);
	touch.startx = xy.x;
	touch.starty = xy.y;
};

function getXY(event)
{
	try
	{
		var xy = {};
		xy.x = (event.pageX - (g.canvas.offsetParent ? g.canvas.parentNode.offsetLeft : 0));
		xy.y = (event.pageY - (g.canvas.offsetParent ? g.canvas.parentNode.offsetTop : 0));
		return xy;
	}
	catch (e)
	{
		write("getXY: " + e.message);
	}
};

I generally wrap most functions in try / catch. Just pretend I did that with the touchStart() function ;-)
So again it’s all fairly straight forward. Returning an object with just the x and y parameters I get some control over how to handle my player movement. Notice that I use the offsets to determine the true position since I’m positioning my game canvas in the centre of the document with margin: 0px auto and a width of 320px; On the desktop this is an issue. Generally on mobile it isn’t since I’m handling the display with the viewport.

So now I’ve got some co-ordinates and I can start to explore options for controlling the player.

The game itself is a maze crawling affair. I want my character to walk the maze avoid monsters and collecting goodies. There will be a little more to it than that but essentially this gives me something to go on when considering the player’s control of his character.

Option 1 is all about a virtual overlaid d-pad. You will have seen them. God awful things that just don’t feel natural at all. They’re generally plonked in the lower corner of the screen and you are forced to control your game in a small space.
I created a simple d-pad graphic and placed it in the lower right corner.
I then wrote some code to track which edge of the d-pad had been pressed, uploaded the game and hit the refresh on the phone.
( Note: my X/Y detection code is primitive. I’m checking the screen to see if the touch event was recorded at the same location as the location of the d-pad graphic. )
To cut a long story short I must have spent 50% of my time looking at the blessed d-pad and not even enjoying watching my character march around the maze.
I ditched this idea swiftly.

Option 2 saw me drawing thin arrow graphics at the top, right, bottom and left most edges of the game screen.
The theory was sound. I’d just let the player touch some fairly large areas of the screen in order to move the player up, right, down or left.
Again I uploaded and refreshed on the phone.
Initially it felt OK. I was able to smoothly move the character around and it felt pretty good having more than a couple of cm flexibility in the movement.
But I soon tired of having my hand obscuring the lower corners of the screen when the player character was down there and I was in need of some finer movement.
I ditched the idea.

Option 3 was actually fairly similar to option 1 but with greater scope.
I switched the phone off and just touched the screen. I played the imaginary game and tried to feel for what was right.
As I moved my thumb around I realised that the kind of control I was after was in fact quite similar to option 1. But I wanted the d-pad to be positioned based upon where I first tapped the screen. A kind of user-definable d-pad location.
So I set about creating a sequence that went something like:
touchStart: record the centre of the d-pad co-ordinates
touchMove: throw the event at a d-pad handler and update touch x and y

With the centre of the d-pad recorded as my origin I then needed to figure out how the co-ordinates of touchMove translated in to a new direction for the player.
Something like..

if (touch.newx > touch.startx) moveright; 

There are some complications here.
Imagine that the finger is swiping to the right from an origin of say 128,128.
As the touchMove event continues to fire the x is incrementing through 129, 130, 131 and this is great. I’m clearly looking to move to the right.
But then my thumb flicks up or down the slightest amount.
My y value is also incrementing 128,129,130,131…
So which is true ?
Does the player want to move right or down ?

I’m actually still working this bit out and will blog about it once I’ve got it working.

Overall the movement is fairly smooth just now and I’m working hard to make it as smooth as possible.
User feedback and a logical touch interface is vital in these games. If you mess this bit up you kill the entire game and your player will just go looking for something else to play.

Other things that I’m curious about are walking DOWN a corridor, effectively “hugging” the wall to turn RIGHT or LEFT at the next available exit.
To this end I’ve played Pac-Man quite a bit just lately and learned some valuable design lessons.
I’m also mucking about setting touch.testx and touch.testy in an attempt to sniff the wall for available exits.
Actually this code works pretty good right now.

When there is more to see I will return to this subject.
Thanks for listening to me waffle ;)
Please feel free to share your own thoughts, ideas words of wisdom on the subject.

Playing with sprites, walls and new game concepts

I’m always looking at new game designs and cool ways to implement them. I also have my own system for creating HTML5 games that has evolved over the last 12 months.
I don’t use frameworks or libraries or such, I just enjoy getting my hands dirty with my own code.
But if you’ve read this blog before you’ll know that.

I wanted to have a crack at building my own maze game.
I’ve created similar games in the past and enjoyed making them very much so the idea of bringing one to mobile web is quite exciting.

Initially I took the decision that I wasn’t going to build a level editor. I just don’t have the inclination right now. Perhaps that will change if this game works out pretty well.
For now I wanted to just hack around in JavaScript in such a way that I could visualise the level as I key in each element in to the level data array.

Something like this..

var leveldata = [];
leveldata[0] = [
		"+,+,+,+,+,+,+,+,+,+",
		"+, , , , , , , , ,+",
		"+, , , , , , , , ,+",
		"+, ,+,+,+,+,+,+, ,+",
		"+, , , , , , , , ,+",
		"+,+,+, ,+,+, ,+,+,+",
		"+, , , , , , , , ,+",
		"+, , , , , , , , ,+",
		"+, , , , , , , , ,+",
		"+,+,+,+, , ,+,+,+,+",
		"+, , , , , , , , ,+",
		"+, , , , , , , , ,+",
		"+,+,+,+,+,+,+,+,+,+",
		"+,+,+,+,+,+,+,+,+,+",
		"+,+,+,+,+,+,+,+,+,+"
];

As you can see I have defined an array to contain all the level data in and then populated each element with another array. It is this second array that will store the level specific data.
What you see above is a representation of tiles. Each tile on screen is 32 x 32. So a level array with 14 elements equates to 14 rows of 32 pixel height = 448 pixels. This in turn equates to a total tile height of 480pixels. Perfect for my prefered game resolution of 320 x 480.
You can also see that I’ve left the last few rows full of tiles. This is due to the iPhone leaving its status bars in place by default and therefore chewing up far too many screen pixels.

In my code I iterate through each element in the array and parse the string for the comma “,”.
You can see this below.

function setWalls()
{
	try
	{
		var l = leveldata[g.level];
		for (var y=0;y < l.length;y++)
		{
			var s = new String(l[y]);
			var a = s.split(",");
			for (var x=0;x < a.length;x++)
			{
				switch (a[x])
				{
					case "+":
						spawnWall(x*32,y*32,0);
					break;
				}
			}
		}
		g.mode = "pregame";
		g.resetting = 50;
	}
	catch (e)
	{
		write("Set walls: " + e.message);
	}
};

g is my global namespace. Quite a lot goes in there that is game specific as opposed to player or sprite specific.
spawnWall() is my function for pulling a wall sprite out of the sprite collection and assigning it a set of co-ordinates.
Something like this..

function spawnWall(x,y,row)
{
	try
	{
		for (var a=0;a < NUM.WALLS;a++)
		{
			var o = m.walls[a];
			if (!o.visible)
			{
				o.visible = true;
				o.targetx = x;
				o.targety = y;
				o.x = x;
				o.y = g.canvasheight + y;
				o.row = row;
				break;
			}
		}
	}
	catch (e)
	{
		write("Spawn wall: " + e.message);
	}
};

I am positioning the wall tiles below the canvas height. This is deliberate since I want them to scroll in to view in between levels. In my move() function I have code to shift a sprite from its x co-ordinate to its targetx co-ordinate. Same for the y.

So back to the leveldata array and where you see a white space no tile will be drawn.
Where you currently see a “+” a wall tile will be drawn.
Eventually the + will be replaced by single characters that represent the type of wall tile I want to display.
For now it simply translates to my default wall tile.

wall graphic
You can see that this wall tile is 64 x 32 in size and contains 2 frames of 32×32. I am going to animate my wall tiles.

When I run the game in test mode I see the following screen layout.

castle screenshot

I have deliberately defined the wall tiles as sprites.
This gives me a tremendous amount of flexibility since the sprite class and methods allow for a lot of animation and movement. It also makes life a lot easier when I come to consider collision. Rather than “overlaying” a collision map I simply test for position based on a ton of sprites.
It also gives me the freedom to move walls should my design require it.

So just now I’m playing with ideas but ultimately I’d like to plant entity starting points in to the leveldata array.
Perhaps try a PacMan approach to a game where the whitespaces are taken up with “o” which will be translated by the game in to small coins that the player must collect.
I don’t know. It’s early days.
The most important thing is that my codebase allowed me to create this proof of concept in around 15 minutes.
Exciting times.

The market for HTML5 gaming

As I’ve recently blogged I am convinced that 2012 will be an enormous year for HTML5 gaming on mobile phones.
So much so that I am staking a fair bit on it. Not least the creation of my own game development studio.
But like every startup I need to do my homework and right now there are some fairly obvious questions to be answered.

Just how big IS the HTML5 gaming market ?

… and how big can I expect it to be in 12 months, 2 years, 5 years …

When I first asked these questions I drew a blank. It occurred to me that I just don’t have those kinds of figures. Sure I have some contacts that could help me but I really need some broader statistics not just the figures of a handful of portal operators – as big as they may be.
The right place to start is of course the sales figures for mobile smartphones over the last couple of years. I need to get a snapshot of today’s market size and an idea for its growth over recent years.

Here’s a quote from computing.co.uk to get things rolling:

“Sales of mobile technology continue to soar as the worldwide mobile handset market grew another 16.5 per cent year on year this quarter.
The number of units sold totalled 428.7 million in the second quarter of 2011, a 16.5 per cent increase on the same period last year, when it stood at 367.9 units, according to research firm Gartner.
Sales of smartphones were up 74 per cent year on year, accounting for 25 per cent of worldwide mobile phone sales in second-quarter 2011. They accounted for 17 per cent of overall sales in the same period last year.
Google and Apple are leading the smartphone market; the combined share of iOS and Android in the smartphone operating system market doubled to nearly 62 per cent in the second quarter of 2011, up from just over 31 per cent a year ago.”

Of course it’s the sales of smart phones that I’m particularly interested in and we can see that they are up 74% year on year.
In 2nd quarter 2011 that is 25% of ALL mobile phone sales worldwide. For the same period last year that figure was just 17%.
Right now I’m willing to bet that smartphone has a greater than 25% share of all mobile phones sold. Possibly as much as 35%. We’ll need to wait for the figures.

To get an idea for growth we can go back to 2009. I see that for that year an estimated 172.4 million smartphones were sold and the year before 139.2 million.
Bearing in mind that approximately 107 million smartphones were sold in the 2nd quarter of 2011 alone compared to a total of 172.4 million for the year 2009 we can see that in just a couple of years we have some marked growth.
Source: gartner.com

What’s interesting of course is that it is the “big screen” devices that now dominate. Blackberry, the pure smartphone developer, has seen some decline in its market share while Apple and Google continue to steam ahead. No doubt due to the marketing prestige of iPhone and the fact that Google simply gives its OS away for free to manufacturers and hence is available on phones everywhere.

I’ve made an assumption here that everyone who owns a smartphone will want to be playing games on it. Of course this isn’t true.
So further questions need to be answered:

  • How many people are playing smartphone games ?
  • Exactly WHO is playing games on their smartphone ?
  • What genres are people lapping up more than others ?
  • Indeed is it as easy as that. Are people of a certain age / sex gravitating toward the kind of games that we think they are ?

What do my Google stats tell me ?

A reasonable starting point is my own statistical data. Courtesy of Google I can not only capture user volumes I can also see just how many of those users are coming back to play my games again.

Last month (November 2011) I recorded 33,207 visits to my game site. Of those 24,628 were unique visitors. So 8,579 (or approximately 25%) had returned to take another look. This is better than I expected but the skeptic in me wants to understand a bit more so I dug a little deeper.

According to Google the average amount of pages viewed was around 2. This perhaps is what I might expect. One view to pull up the game list and another to go off and play a selected game. Perhaps my visitors had in some cases bookmarked the game list (m.spacemonsters.co.uk). I don’t know.
Digging a little further I also notice that the average time on the site is around 2 minutes. I’m fairly confident I can evaluate this to the visitor simply “having a go” on a game. I’d like to think that’s as simple as the time available to somebody waiting in the bus queue or using the bathroom !

Who is playing my games ?

So what information can I glean for the actual visitor himself ?
What can Google tell me about the way that the visitor has consumed my web site. This information is pretty valuable and is of course restricted to the way in which the browser declares itself. To find richer information such as age groups I need to investigate other sources. More on that shortly.

Operating System

A quick look at the data collected for operating systems offers very few surprises.
55% of visitors are using an Android based OS. 16% are on iPhone, 15% on iPad, 12% on iPod and the rest are a mishmash of Symbian, Samsung, Nokia etc.

What is perhaps surprising is the percentage of Android users compared with iOS. 55% is a huge portion and surely can’t be indicative of the global takeup for the operating system. Can it ?
Well it didn’t take too many clicks to put me straight on that one. For the 3rd quarter of 2011 Android has an astonishing 52.5% share of the smartphone OS market. So my own figures are clearly reflecting what is happening in the real world. Better still I appear to have a suitably large amount of data to play with.
Source: Business Insider

For a little balance I also asked Jean-Philippe at Kimia for a snapshot of his stats for their mobile portal IOPlay.mobi.

From a total of 1.5 million clicks on all platforms (Android, Iphone, J2ME, Symbian, Blackberry):

  • 29.5% Java
  • 22% Android
  • 21.5% Blackberry
  • 14% Symbian
  • 13% iPhone

From this number 19% of clicks account for HTML5 games. Roughly 285,000 clicks of which 55% are apparently being served to iPhone or Android devices.
The time period isn’t really of any concern. I see it as far more significant that 1/5 of visitors are requesting HTML5 content. Very encouraging.

Geography

In terms of geography most of my visitors are from Europe with a fair scattering from the US and a handful from Asia. Perhaps if the US featured more prominently in my results I’d see a greater percentage of iOS users. I don’t know. What all of this tells me is that the two operating systems that I’m targetting with my developments are happily running the games. As iOS5 gets a foothold I’d very much like to see more iPhone/iPad users coming my way.
Before iOS5 I guess I may have been a little more focused on what Android is doing worldwide but to be frank the two OS perform my games at lightning pace right now so the dominance of Android is largely inconsequential.

So what are my visitors playing ?

What games do I make and is this in any way indicative of what mobile gamers want to play on their phones ?

Well most of my games are fairly traditional arcade games from a bygone era. Hypergunner and Galactians inparticular are old-school shoot ’em ups. As is Galactians 2, of course. Danger Ranger is a simple platform game and Spy Chase is essentially Spy Hunter; a classic driving game from over 25 years ago.
I think anyone playing my games repeatedly probably has a little nostalgia in them for that golden era of gaming. I’d like to think that my games have enough quality about them to honour that period so perhaps I have converted a few younger gamers to the “good old days” :)

The most “popular” of my games in terms of visitors is Galactians.

What games are being played elsewhere ?

To get a true picture of what people are playing I need to look further afield. There are numerous high profile game portals around today and more and more will be popping up over the next 12 months as HTML5 offers a more cost effective route to market. Anything that doesn’t actually install itself on your phone or require a plug-in of any kind has to be a safe bet for the future of gaming and several mature game portals are understanding this.

Of course understanding this data is key to my success. I need to tap in to what the gamer wants in order to appeal to potential clients.

So initially I approached Netherlands based Spil games. A company whom I have licenced games to previously and who certainly understand the potential for HTML5 gaming.

Spil operates a number of portals globally not all of which are specifically HTML5. This is a good thing. I really wanted to understand what games are being played not strictly what technology is being used. The end user – the player – after all probably doesn’t care too much how he or she is going to play the game. For them it is a tap on the screen and straight in to the action.

So which games are people playing ? What are the key age groups and what can we learn from them ?

Here is some initial data from Spil for the popularity of HTML5 games on its portals:

Girls (age: 8 to 12)

  • Dress Up Games
  • Quizzes
  • Puzzle Games
  • Board & Card
  • Skill Games

Teens (age: 10 to 15)

  • Action Games
  • Racing
  • Sports
  • Girls Games
  • Adventure

Family (age: 8 to 88)

  • Puzzle Games
  • Girls Games
  • Skill Games
  • Racing
  • Board & Card
  • Quizzes
  • Time Management Games

What I glean from this is that my own particular brand of game is largely going to appeal to the 10 – 15 age bracket.
It is of course early days in HTML5 game development and much of what we see here is the kind of games that we typically saw in the early days of Flash game development before the designers got to grips with the tools and the potential of the platform.

According to Spil’s home page they enjoy an incredible 140 million players each month. This is of course spread across their entire offering which includes desktop gaming. If we rather crudly suggest that 1/3 of Spil’s traffic is coming from a mobile device and then apply Kimia’s ratio of 19% to Spil’s figures that’s an impressive 8.8 million HTML5 gamers per month. In reality I suspect this percentage is much lower but even so with those volumes that’s still a large portion of people playing games in their web browser.

85 million visitors to Spil’s portals every month are female. More than half their monthly traffic. It looks like the games that are working best for Spil are the more cerebral games where we ask players to think a little rather than simply blasting aliens to pieces !

To conclude

I see nothing but growth. As more of us have smartphones in our pockets and as the technology and standard mature in to something really quite rich as a platform I can only see a bright future for the HTML5 game developer.
I would also suspect that browser vendors will seriously consider a binary serving of JavaScript source files to get around security issues. I think the more that the game development community applies the pressure the more we will see browsers adapt to the demand.

The market for mobile gaming with open web technologies is expanding at an incredible rate. In just the last 5 or 6 months I have seen the number of mobile game portals triple as they recognise the value of circumventing the app stores. What money they save in store publishing and marketing they can invest in to their own infrastructures which can only mean strengthening their ability to monetise their games.
For you the HTML5 game developer this is of course great news.

All those enthusiasts that predicted that the future of IT was in mobile technology can feel quite smug that their predictions have indeed come true. Where technology grows gaming and entertainment in general inevitably follow.
Again, for you the HTML5 game developer there couldn’t be a better time to carve a living for yourself.

You have the technology, you have the skills, you have the support of the standards and the growing reliability of the browsers on all platforms. If we can just solve the issues surrounding audio and security we will have at our fingertips a truly wonderful platform for not only making but publishing our games.

Mobile phones are here to stay.
The future of HTML5 gaming is in your hands. Literally !

New HTML5 arcade game – Rebel Rescue

I’ve spent a fair bit of time lately trying to iron out all sorts of issues with Rebel Rescue. On the whole I’ve enjoyed making the game but like any reasonably lengthy (2 months) project you get a bit tired of it all whilst you push it over the line. Most games for me take around a month from the first pixel drawn in Photoshop and the first byte keyed in to EditPlus to completion.

Rebel Rescue screen shot

Rebel Rescue - HTML5 arcade game

For the most part in the last few days I was playing with numbers.
Balancing the speed of rockets, frequency of bombs and accuracy of laser shots is a pretty fine art. Making something worth playing takes a bit of patience.
I think the game is pretty cool to play.
To help the process I took two days away from it last week. The intention was to look on it again with fresh eyes.
It worked ! I instantly found new and better ways to challenge the player.

As with all my HTML5 games the game can be played on a mobile phone as well as the desktop. If anything this game lends itself much more to the touch screen since it allows for slightly more refined movement.

I took my lead from several sources with Rebel Rescue. My inspiration strangely enough wasn’t Star Wars. I merely used some assets that I had created from a previous game and created a simple arcade shooter. My inspiration was really the classic games of the 1990s such as Blazing Star. Yes the visuals don’t compare but then I am a one man band. I would love to create the visual beautifullness of the great NeoGeo titles. But now is not the time and I am under resourced.
For now I look more at the instant appeal of such games. I tried to identify what it was about such modern classic shooters that appealed on such a gut level.
The rapid lasers coupled with the predictable movement of the enemy and resulting explosion of bonuses and powerups fell right in to my lap and straight in to the game. HTML5 across most mobile devices (the ones that count) is pretty performant these days so littering the screen with sprites is a breeze.

I hope you enjoy what I came up with. If you’ve any bugs to report please mail me ( the address is on the ‘about’ page ) and I will look at them.

You can play the game at http://m.spacemonsters.co.uk/rebelrescue/

Use the arrow keys and Ctrl or Z to fire lasers and start the game.
On mobile devices just touch / drag on the screen.

Have fun !

HTML5 Star Wars game – bullets, bombs, explosions and chaos

 

Rebel Rescue screen shot

Rebel Rescue screen shot

More lasers, more bombs, more bad guys and more explosions. I’m absolutely LOVING developing this game. And the best bit ? It runs like a dream across all major devices. Now if we can just get audio sorted.
There’s a very bright future for HTML5 arcade game designers.

Galactians 2 – a few minor changes

It always happens. I test a game to death and call it done then the first time I go back to it I find stuff that really should have been fixed.

So I’ve made a couple of changes.

  • Pause mode now really does pause ALL the action
  • Improved spritesheet for bonus / bombs to try and remove pixel flickering (Appears to happen on Apple devices exclusively)
  • Threw in a few more text sprites to reflect bonus item scoring

That’s it. Nothing major.
Oh and I scored just over 2,000,000. At that point it gets pretty chaotic.

Galactians 2 – New HTML5 arcade game

I’ve had this game kicking about for several weeks. I’ve been trying to find some time to get it finished and playable and a challenge and, well, a bit prettier than it was before.
I finally found some time to polish it up a bit.

The game itself is Galactians with a few extra bits. I always loved the diving alien thing and wanted to add a bit to it so you’ll find weird alien blob explosive jelly and a painful black homing missile to contend with. That combined with bombs, bullets and diving aliens.

I hope it’s as enjoyable for you to play as it has been for me to create.

You can play Galactians 2 here.

You can play in your browser with arrow keys and Z or CTRL to shoot, or mouse or, if you prefer, on your mobile phone / tablet.

My high score is around 1,400,000. If you beat it let me know :-)

%d bloggers like this: