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.

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 !

%d bloggers like this: