Road Rage – New HTML5 arcade game

Road RageRoad Rage is finally complete.

I put a lot of work in to this one in terms of balancing the action versus rewarding the player with plenty of on-screen action.

I’m not really in to doing post-mortems on my games but for this one I’d say it’s come out pretty close to how I envisaged it. I made a decision early on to keep the pace up and allow the player a fair amount of freedom to move and blast things. To that end I litter the screen with explosions, bombs, bullets and debris.
I’m hoping that it’s well received enough to justify the extra effort :)

Ultimately the question of “is it fun?” has to be answered and I’d have to say that the feedback from testing that I’ve had is extremely positive. Most of the comments returned highlight the soundtrack, audio fx and big colourful sprites. I’m thrilled to read such encouraging comments since it pretty much underpins my ethos for making games. It’s certainly something that will carry over in to my book.

Road Rage

You can play the game over at the arcade. Sign up, sign in and shoot for the top spot. Let’s see how good you are!

Analysing the Playstar Arcade – Gingerbread (Android v2.3.6) visits

As the month draws to a close I’m enjoying poring over the visitor statistics collected through my Playstar arcade courtesy of Google’s Analytics.

The figures are interesting in terms of growth but a little depressing when I see that under closer inspection there’s a significant percentage of traffic who don’t get the full experience.

Take a look at these charts.

November 2013 - 171,462 visits

November 2013 – 171,462 visits

This chart stands out for the high percentage of visits from devices loaded with the Android Gingerbread OS version 2.3.6. Gingerbread, the 2.3 range OS from Google, is notoriously clunky for HTML5 game execution. It’s not without its functional issues and is typically the OS that comes bundled with popular lower spec models such as the Samsung Galaxy Y or Galaxy Ace.

28.6% of 171k visits is a lot. Too much. It pains me that so many people would come to the arcade and not get the experience that I want to deliver.

99% of my traffic is mobile.

The 21.1% listed as other is a mix of Android, iOS and Firefox. iPad emerges as a popular device.

December 2013 - 235,758 visits

December 2013 – 235,758 visits

December is a month that traditionally skews the figures since it contains the Christmas holiday season. I have over the last few years experienced a marked spike in traffic to my games in the two weeks that typically constitute the Christmas break. This Christmas was no different.

Although the figure of 23.6% is a reduction on the previous month for Gingerbread users, it’s still high.

As mentioned in a previous post iPad increases in strength but still falls under the category of other.

January 2014 - 255,601 visits

January 2014 – 255,601 visits

So on to this month. Obviously I’m posting this with a full day’s worth of data to collect. I imagine the total # of visits will be closer to 262,000 based on the pattern over the last 30 days.

Gingerbread’s presence is still a little ominous although less so than it might have been. 22.2% of total visits is still a reduction but a small one. Moore’s law has to kick in at some point and the public will surely all be holding a minimum of Galaxy S3 in their hands soon!

It’s thrilling to be at a quarter of a million visits per month. It’s also thrilling to see so many high end devices visiting the arcade. The purist in me really does care for the owners of those low end handsets but at some point I know I have to let go.
I’m not such a purist that I’ll invest countless hours of time and money ensuring that my games work perfectly across the board. I am after all always keen to continue producing fast paced, action packed arcade games.

 

 

Some Friday data from the Playstar arcade

Over the last six months I’ve paid a lot of attention to the visitors statistics generated by my HTML5 game portal. Particularly interesting are the figures for iPad.

The rise in popularity of the iPad as a mobile web gaming device is wonderful news. iPad is an HTML5 game developer’s dream in many respects. Super fast performance and a beautiful display. I have in the past had issues with the way that my spritesheets were rendered on iPad. Specifically pixels from neighbouring frames glitching intermittently in the animation loop. The same code on other iOS devices didn’t present the same anomaly. On later models this is fixed.

iPad is not the leading device to visit the arcade. That honour (of the identifiable devices in Google Analytics) goes to Samsung’s Galaxy Y handset. By contrast a fairly terrible device to develop for.

Here are the figures for iPad traffic.

Month (2013) % of portal traffic # iPad visits
July 1.82% 4,031
August 1.8% 4,492
September 4.1% 9,062
October 4.3% 11,985
November 7.56% 25,539
December 11.48% 48,885

Christmas certainly helps. I imagine that iPads have been a popular gift globally. As you can see the holiday season also presents a significant increase in traffic.

Adding dynamic tweet functionality to HTML5 games

My current focus is with the PlayStar Arcade. I’m keen to push it as a platform for playing my HTML5 games. A lot of work has been carried out “under the bonnet” as we say in the UK and now I’m in to the slightly more entertaining areas of adding bells and whistles.

Something I was always keen to pursue was the ability for players to share their scores via social media. Twitter was my first port of call.
Thanks to their Tweet button script placing a button inside the game was a fairly simple exercise.
The flow that I wanted would see the player complete the game and reach the “GAMEOVER” status. At this point I would present the <div> containing the Twitter code.
The player would then be prompted to share their score and tap the Twitter “Tweet” button. All I had to do at this point was switch the text inside of the code that Twitter gave me with my own text. This replaced text would be what appears in the dialogue box for the player to tweet.

tweet score from html5 game

But there was a problem.

The attribute that I need to change to achieve this is the data-text attribute of the <a> tag in the Twitter script. But dynamically changing this attribute proves useless. 

When the Twitter script executes it converts the <a> tag in to a <div>. Any subsequent calls that I make to amend the tag fail.

I appreciate that this is largely theory so rather than post my own code solutions I’m going to link a site that covers it neatly with code examples.

http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery

This guy had the exact same problem and solved it beautifully. 
I now have the ability to let the player complete a game, rack up a score and then share it with the world courtesy of Twitter. Facebook is next.

Road Rage development update

In wrapping up the development of Road Rage I hit one or two snags. This annoys the hell out of me since it is largely due to big holes in the game’s design.

I’m a designer who likes to have the core stuff ironed out long before I get my hands dirty with code and graphics. The central mechanics of the game are the first thing I figure out and everything else gets built around it.
For Road Rage the central theme is the winding road that shifts at pace beneath the action and provides a rapidly changing restriction to the player’s movement. If the car veers off-road it incurs significant damage.

HTML5 arcade game screenshot

This all worked out well initially. I’d used the code base for Spy Chase as a foundation and built upon it with layers of activity. The problem was that the game was actually far too easy to play and I wasn’t willing to compromise any of the design features. 
The road movement look neat, the laser fire from the player’s car worked well, the missile fire from the enemy looked great and the explosions and special effects all added a wonderful depth to the game. But it was just too easy.
The player’s movement was limited but fairly swift in the x axis and his laser fire was rapid. This I liked. Everything played out smooth and it felt like the most complete arcade game I’d ever made. 
Injecting the time limit was a late addition and it really intensified the challenge. 

Then it occured to me that the fundamental issue was with the player’s ability to shield damage from bombs, cars and the off-road. This increased the player’s chance of survival through to the health regenerating Checkpoint between stages. 
I played with a few different means of punishing the player and settled on a single hit from a bullet or missile destroying the car. Bumping other cars and trucks took a small amount off the player’s “health” (pretty vital as bumping is a key feature in the game and a fair bit of fun) and running off-road added larger amounts of damage. I didn’t want to destroy the car for veering off road as in some cases it’s unavoidable. Better to add damage and encourage the player to return to the road at the earliest opportunity.

So the game dynamics are now set such that the player avoids enemy fire at all costs and shifts left and right to collect, dodge and shoot. So much so that you could pretty much remove the road and backdrop and it’d play out like an old school shoot ’em up. 

I think the game is a huge amount of fun and faithful to the arcade game designer’s ethos of short, challenging and intense fun for your coin. Hopefully it will encourage a high percentage of replays!

Road Rage will find its way to the PlayStar Arcade in the next week or so.

Using Google Trends to gauge the popularity of mobile gaming related search terms

Google offers a pretty neat trends service that attempts to illustrate the popularity of search phrases over a given period. I’ve been having a little play.

Here’s a few quick charts using some reasonably obvious mobile gaming related search phrases illustrated over the past 12 months. The use of the word Free is my own assumption that the world at large wants everything for nothing!

1. Free Mobile Games, Free Online Games, Free Arcade Games, Free Online Arcade Games

Google Trends

I removed the word “Free”:

2. Mobile Games, Online Games, Arcade Games, Online Arcade Games

Google Trends chart

Hardly a dramatic change.

3. Mobile Games, Online Games, Arcade Games, Online Arcade Games, Free Games (link)

google trends chart

Just for a bit of fun I added the straight forward search phrase “free games” in to the mix. A popular search phrase. No real surprises there.
Hardly scientific but an interesting way to spend a coffee break.

A selection of screens from my new HTML5 arcade game – Road Rage

I intend to complete this game very soon. I confess I’ve got a little carried away adding some special effects with sprites. The shards of metal that fly away from the damaged vehicles when struck with a missile or gun fire were just too tempting to resist.
I spawn them in the game with random trajectory, speed and spin rate. The effect is pretty neat. For the most part the metal shards whizz off the screen but occasionally you get a slower shard that just ambles off screen with a slow spin. It really adds to the impression of blasting everything to pieces. Hope to have the game completed over the Christmas break in time for new year.

9HTML5 arcade game screenshotHTML5 arcade game screenshotHTML5 arcade game screenshotHTML5 arcade game screenshotHTML5 arcade game screenshotHTML5 arcade game screenshotHTML5 arcade game screenshotHTML5 arcade game screenshot

The importance of quickly proving a game concept with JavaScript

I have what I’m sure is probably considered a primitive style of coding JavaScript. It’s never really evolved in to anything that a purist would adopt over the years. To be frank it doesn’t concern me. What’s most important to me is that I understand my code and more importantly perhaps; it works.

The benefits of knowing my own code and the intimate relationship that I have developed with it have time and again proven useful. Not least when I’m approached by clients and 3rd parties to implement their own code and / or extract data from the game. Simple modifications and tweaks are simpler because I know my code inside out and the upside to all of that is of course that such changes are quick. Or at least quicker than they would have been if I’d had to first figure out how the code works.

There’s another huge benefit to writing and understanding my own code which for me comes in to its own when I’m considering a new game. I often daydream about a game or take inspiration from the most random things. I’ve got sketch books full of ideas and documents on my computer full of code snippets and high concepts.

HTML5 arcade game screenshot

To try and explain I’ll briefly explain the process of developing one game.

Some time last year I was driving home after a long journey across country. Not too far from home I remember pulling off the motorway and as I approached the traffic lights on the slip road I watched the striped yellow lines on the road. As I slowed to stop I remember clearly thinking how cool it would be to create a game in which the player controls a jet fighter that flies low over a striped landscape. Inspired by the illusion of the lines cascading beneath the car I turned over in my mind how the code might look. It didn’t take much to figure it out and that game turned out to be Distant Orbit (pictured).
I could prove the concept quickly because I knew how to adapt my code base to implement the stripe objects that form the planet floor. Better yet I visualised the game loop and could understand how to scale the alien bugs as they emerged over the horizon. There was nothing overly complicated in it and using the same approach I could quickly implement the tower that forms the player’s primary target in the game. The thought processes in understanding scale rates and how to manipulate such events per game “tick” came to me pretty quickly and because I understood the underlying code that handles the drawing and moving / scaling of objects I knew pretty much how the code would look.

What’s valuable to me is being able to take a concept, process it in my mind (and therefore visualise it on screen) and then move quickly in to code. It’s only by being able to do this that I can quickly dismiss an idea or take it to the next step – design. I like to have one quirky feature per game:  striped floors, scrolling terrain, 3D trench, starfield; and it’s generally this feature that I’m focusing on at the concept stage.

Much of this is always done using “defaults” for sprite art and defaults for audio. All objects have default behaviours as sprites in my code and adapting them to behave differently is 5 minutes work. At least to prove the concept. Fine-tuning can happen much later on as part of a balancing process.

So in short it’s crucial for me to be able to very quickly get in to coding. When I have a vision for something I spend a short amount of time poring over the approach that I’ll take and then it’s all about cutting code.

In future posts I’m going to break with my own tradition of not sharing my code. You can see for yourself just how ugly code can render some pretty cool looking arcade games :)

Balancing the action and using a classic for inspiration

Designing HTML5 arcade games with JavaScript has become something of a theraputic exercise. The combined thrills of pixelling, coding and designing the various elements of the action are proving to be quite useful in the stressful run up to Christmas.
Yet despite this I now find myself in that unavoidable “crunch” mode on two projects. I also set a target to finish these two projects by the new year.

A laugh at it now but I shelved my first project as it approached completion to pursue a fresh project. It was of course a diversion. I was deliberately avoiding the pain of that final 10% that takes an agonising amount of time to complete. Now I have doubled the pain!

It’s not all bad.
The discipline of developing arcade games has evolved and tightened over the years to become almost formulaic. This in itself isn’t always a good thing but it can be useful to have a blueprint for design when it comes to balancing, testing and code fixing.

For the most part at this stage I find that the raw code is cut and I’m largely playing with numbers. I play the games A LOT and talk to myself as I’m running through them – always making notes. Here’s such a conversation :)

There’s just not enough to challenge me here. The player character moves too quickly to be threatened by the bad guys. The bad guys need to target the player more. There’s too much room to move. The player isn’t developing any skills in his movement and bullet / entity dodging!

I kid you not. This was a recent note I took.
The beauty of all of this is that everything in the game is defined by numerics. The player’s movement is defined as a speed parameter that allows his co-ordinates to increment each tick. Similarly the other objects in the game perform against the same calculations. In the driving / shooting game (which I currently call Road Rage) the room in which the player has for movement is defined by the road object’s width and height. I applied a .nextthink attribute to the road container which ticks down every game tick. At zero I make another decision on how to scale and move the road.
With this method I can shrink or expand the road with ease after an elapsed amount of time. As a result of my testing and observations above I could see that the road needed to narrow more frequently. The player’s car going “offroad” results in a lot of damage and consequently Game Over so a shrinking road is a real challenge to the player.

HTML5 arcade game

As you can see in the screenshot the road is divided up in to slices. Each “slice” is an object that contains parameters for the ground texture, the road, the road’s verge and the lines that run down the middle.
The only artwork on display per slice is the ground and verge. The other two elements are solid colour blocks.

The tree decorations that overlay the ground are sprite objects and behave in a default sprite behaviour. i.e. emerge off screen, run the length and disappear without any collision detection.

Developing the shifting road wasn’t really much of a challenge. You could almost imagine the process as a series of around a dozen rectangular cards placed in order. By altering the x position of each road object as it is spawned off the top of the canvas (and subsequently allowing the object to increment its co-ordinate) you can create a satisfactory rippling effect that simulates the shifting road. The road width (the solid colour area) is known and therefore I can plot x co-ordinates for the overlayed verges.
Similarly any sprite object that sits on the road can be tested to see whether it has over-run the verge in which case I apply damage to it. Too much damage and it is destroyed. The impact on the random military vehicles in the game is a key part of the appeal as the player’s gleaming red sports car (modelled on a Ferrari 458!) can bump them off the road with a few well timed swerves in the right direction :)

For a long time in the early days of development I was playing the game and struggling to find a core mechanic for it. That vital element of the game that forms the player’s goal or goals. I knew that arming a sports car with rockets and allowing it to shunt other vehicles off the road would be fun, but as always I wanted an intensity to the action that meant there would be a ton of rockets and bombs on the screen. This can cause design problems in terms of setting a challenge since firing a huge amount of rockets and lasers only works if the stuff you’re aiming at is destroyed! It’s no good if the targets just bounce around a bit and are unaffected by your gunfire.

So I dabbled with all sorts of mechanics including collecting valuable items and avoiding oil slicks. They just didn’t work. The thrill of the game is in its pace and causing the car to spin or forcing the player to swerve and collect items just didn’t add up to very much fun. It needed to be a high octane experience with shooting, dodging, turboing and explosions set against an underlying need for speed.

So I fired up Out Run for a little inspiration. A wonderful game from the 1980s in which you drive a car at speed across an undulating terrain whilst avoiding other road users. The game is divided in to stages such that when you cross a checkpoint you are rewarded with a little more time to play.
This did it for me. It was obvious. A game in which you drive a car has to be a challenge of beating the clock.

I could still get away with blasting the bad guys I just needed to ensure that the core goal was to complete each stage in a set amount of time. Adding a timer was simple. I set it to 30 seconds initially and ticked down every second. At zero the car exploded and the game was over.

So the next question was how do I speed the car up and slow it down without having specific controls overlaid on the touchscreen.
This was a no-brainer. I implemented a turbo accumulator. The destruction of cars and military vehicles spawned turbo collectables that bounced around the screen. By collecting several of these the player built up their turbo bar sufficiently to engage a short (10 second) turbo mode in which the car’s speed doubled. The faster the car the quicker the player zoomed through each stage. So there was plenty of incentive for the player to destroy the other vehicles and go collecting the turbo shards.

But this wasn’t enough of a challenge. I wanted to add an element of dodging to the game so I stuck with the idea of the other vehicles launching missiles at the player. One hit and the car was destroyed! Unlike off-road damage or bumping the other cars, missile damage didn’t reduce the player’s “health”. It just wiped them out.

So I’m now confident that I have the game that I was after. As I play it now it’s pretty close to the original design and with the injection of the pulsating soundtrack and over-the-top sound effects I think it’s easily the best arcade game I’ve made to date.

I look forward to sharing it within the PlayStar Arcade shortly.

The relationship between visits, ad impressions and clicks

If you’re serious about monetising your mobile web games then you may well have considered placing adverts within them. You may well have also dismissed the idea as pointless based on previous failed attempts at raising any money this way.
Let me try and give you some encouragement to pursue it. I’ll share one or two of my own experiences whilst I try and decipher the potentially useful relationships between site visits and ad impressions. In a future related post I’ll also explore how you might expose your games to your audience for maximum effect.

Google AdSense

I’ve been using Google’s AdSense for a number of years and in recent months have seen a rise in revenues generated simply because I’ve paid more attention to it. Understanding where your traffic is coming from and how they use your site is very useful when considering how to adapt your strategies.

Back when I started to implement adverts on my web pages I had minimal traffic and it took two years to reach the threshold to receive a payment from Google.
Thanks to the rising popularity and accessibility of HTML5 games I am now going past that threshold in just a few hours every day.

I’ll dive straight in and take a look at the broadest groups that we would consider when discussing web advertising: visitors, adverts and clicks. More adverts = greater probability of clicks = potentially greater revenue; this makes sense. But one thing that I’m always curious about is how raw visitor volumes translates in to revenue. What are the steps and how can I measure it. What’s more once I’ve found a means to measure it how can I improve it?

Consider this workflow:-

VISITORS > ADVERTS DISPLAYED (IMPRESSIONS) > CLICKS > REVENUE

Essentially what I’m showing you here is a rather obvious and direct relationship between each step and the step that precedes it. Your visitors (i.e. each person to arrive on your web page) are clearly your starting point.
If I were to precede this step I may well consider Search Engines and other sources of traffic but for now I’m really only interested in what happens once we have our interested visitor.

CTR, CPC and IPV

There are some simple mathematics that can be applied to each step to give us some figures to play with and measure performance. The classic example is the relationship between steps 2 and 3; ADVERTS DISPLAYED > CLICKS. This is your Click Through Rate or CTR.

Web gurus the planet over will give you different answers to the optimum CTR. It really depends upon your site, its content and your audience.

The relationship between steps 3 and 4; CLICKS > REVENUE gives us the Cost Per Click or CPC. Here we see an average of just how much each click on an advert is worth.

Let’s apply some figures.

ADVERTS DISPLAYED = 1,500
CLICKS = 150
CTR = (150 / 1500) * 100 = 10%

A 10% CTR looks pretty healthy. One in ten of your visitors is clicking a link and therefore earning you cash. In reality this is probably (at least in terms of averages) a very high CTR. But regardless it gives you a starting point. Something to monitor, measure and maintain.

Let’s try some more figures.

CLICKS = 150
REVENUE = £22.50
CPC = £22.50 / 150 = £0.15

So each click is worth on average 15p to you. The mechanics behind all of this is of course in the guts of Google’s ad handling and the relationships that its advertisers create with its publishers in terms of bidding to have their adverts displayed. There are ways that you can improve your CPC but that is not for now.

I want to explore the relationship between steps 1 and 2. I’m no advertising guru so I’m unaware of an acronym to cover it. I’ll come to that in a moment.

On the face of it the relationship seems fairly obvious. If a visitor comes to your web page and you have 2 adverts within that page then you’ll register 1 visit and 2 adverts displayed. In advertising parlance these are commonly referred to as VISITS and IMPRESSIONS. So from now on I will do the same and I’ll call this relationship Impressions Per Visitor or IPV – the number of adverts display per visitor to my site.

It seems fairly logical that every time an advert is displayed it registers an impression. In Google Analytics I see roughly 1.7 times as many impressions as I do visits.
This may well be as a result of each game presenting an advert twice. Once on the title screen and once when the game is finished. i.e. at GAME OVER stage. I never display adverts during the actual game time.

But this in itself raises a question. Is the impression registered by virtue of the fact that the HTML element containing the advert is displayed again or as a result of a call to the Google servers to request the advert. The first scenario is really just a bit of CSS to render the element’s .display property as “block” and it seems ludicrous that this should register an impression. For all intents and purposes the advert was already there. Just not displayed.

If, as seems most likely, the only time an impression is registered is when the initial call is made to Google for the advert’s content then it seems to make sense that my games are being played on average 1.7 times per visitor. I only present the adverts in the games, not around the rest of the site.

Monitoring and using the numbers

An IPV of 1.7 gives me a starting point. But is it of any use?

What benefit could there possibly be in this figure. I know that raising my traffic volumes will have a direct impact upon my revenue by virtue of the fact that it will also raise my advertising impressions. Is there any point in encouraging this figure of 1.7 to rise?

Another thing to consider is that after each visitor has had 1.7 “goes” on my games they’re clicking a link. This effectively spells the end of their engagement with my site. They are now off to the advertisers web page and probably won’t be coming back. At least this is what I have to assume.

If I spend some effort in trying to encourage visitors to play on average 2 or 3 games and therefore raise my IPV to around 2.5 or 3 will it be of any benefit or am I simply delaying something that will most likely happen anyway? i.e. it won’t affect my overall click count.

To try and shed some light on it I trawled my Analytics data for the past few months. Here’s some figures.

August IPV = 1.53
September IPV = 1.53
October IPV = 1.59
November IPV = 1.72
December IPV (so far) = 1.83

What I can say is that I made a concerted effort to increase exposure to my games from within the PlayStar Arcade throughout October and November. I did this in a number of ways but mainly with some banner advertising to advertise my own portal. Some were placed in the games and some at the head of the site.

My IPV has risen. Prior to August the IPV was fairly static at around 1.5

Show me the money!

So crucially how does this translate in to revenue?

I’m not keen on divulging precise figures so here is a percentage shift through each month.

September saw a 2.2% rise on the revenue generated in August.
October (when I started to make significant changes to the portal in terms of promotion) saw a 37.72% rise on September’s revenue.
November a 26.48% rise on October’s revenue.
And finally December is I believe on target for a 32.36% rise on November.

So if you were to plot these on a chart you would see a dip but don’t forget this is a dip in rising figures. Although 26.48% isn’t greater than the 37.72% from the previous month it’s still a significant rise in the amount of money being generated.

A conclusion?

So there’s nothing entirely scientific in this just yet but a conclusion that I’m happy to draw is that by encouraging gamers to stay within the arcade (a good practice in any case) I am exposing them to a greater variety of advertising. This in turn appears to be converting more gamers in to “clickers”.

I naturally have a bitter sweet attitude toward this. My motivation for maintaining this arcade is not financial. I just love making games and seeing people play them. I don’t necessarily want to see every ounce of traffic disappearing to another web site because it’s a better option than playing my games. Sure any revenue generated is useful in maintaining my infrastructure but I won’t ever lose sight of the fact that what I’m here for is to make fun games.

I’ll go in to some detail shortly on the structure of the portal and how I’ve approached the challenge of retaining visitors and turning them in to loyal gamers.