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
iPad – in search of Space Monsters

Neogun: New arcade game in Beta

I’m thrilled to announce that my latest HTML5 arcade game is nearing completion. The bugs are ironed out and the action is super fast. If you’re a fan of old school SNES styled gaming then I think there is plenty here for you to get your teeth into :-)

The game will be available very soon for your web browser and also for your mobiles via the app stores. Watch this space!

Taking on the app stores – step 1: Google

I’m on something of a mission to have my HTML5 arcade visible to the search engines. Naturally I’ve a number of keywords and phrases that I want to have positioned favourably in Google et al. My goal is to have phrases such as “free arcade games” on the first page of results and ideally “above the fold”.
To this end I’ve done a good deal of work in making sure that the site’s content is specific, relevant and perhaps most important of all unobtrusive to the player. I think I’ve achieved a reasonable balance.

Every once in a while I grab a coffee and spend 5 minutes punching in variations on my keywords in to Google.
The most recent search phrase was “free arcade games for ipad”.

Before I go on I must at this point pledge my love for Apple’s iPad. I’ve had an iPad since its launch and have very much fallen for its elegance, execution and simplicity. Contrary to popular opinion I also rather like its sandboxed nature. I’ve no intention to “jailbreak” it. There’s no need. Not for me. It does what I want it to do and then some. Most important of all though it plays HTML5 games like a dream.
So appearing favourably for a search phrase containing the words arcade, games and ipad is a key goal for my plans of 2014. Free is obviously also an important word since HTML5 games tend to be largely synonymous with free gaming just now. I guess that will change. It’s interesting that I’ve not identified HTML5 as a key search word just now. I’ve made some provision for it but until it becomes a key word in the mind of the public searching for games on their mobile I’m less concerned about it. That said part of my mission is to create that relationship amongst the gaming public with the words HTML5 and games.

So what do I get when I punch “free arcade games for ipad” in to Google?

Well, disregarding adverts, I get several results before my own site playstar.mobi is returned.
I set out to take a closer look at the links that preceed my own. Here’s some detail.

Results as at 21st February 2014

1. http://www.techradar.com/news/mobile-computing/tablets/60-best-free-ipad-games-692690
A very respectable list of free iPad games available from the app store. Very difficult to compete with as some of those games are AAA in iPad terms.

2. http://toucharcade.com/2013/12/25/best-free-iphone-and-ipad-games-of-2013/
Different games but the same premise. A list of very good quality games that you can install and enjoy for free before you hit the brick wall of In App Purchasing.

So far it’s hard to see where my humble little HTML5 games arcade could possibly fit in to the big world of iPad arcade gaming. But I’ll persevere.

3. https://itunes.apple.com/gb/app/namco-arcade/id465606050?mt=8
This time a direct link to some of the games that influenced me both as a boy and as a “grown up” game developer. Geez. This is getting tough. How on earth can I compete with this?

4. http://www.pcmag.com/article2/0,2817,2373779,00.asp
Holy hell another list. This seems to be the way to get your pages ranked well. TechCrunch, TouchArcade, Apple and PCMag are all well ranked within Google so this is no surprise. It’s looking quite ominous a task.

5. http://reviews.cnet.com/8301-31747_7-20110992-243/the-best-free-ipad-games-period/
ANOTHER take on the best free iPad games available to us in 2013. It’s becoming very much a trend is this. I doubt the authors care a jot about what games are good and what are bad. They just want their site ranking well for these search phrases. “The best free ipad games, period“. Well if that’s not arrogant I don’t know what is. Arrogant link baiting. Wow. The internet sinks a level.
This list is different but really no different to the others, other than it ranks lower in Google’s index.

I offer some very simple arcade games that are based on a simple premise: shoot, dodge and blast your way to the top of the high score table. It’s old school and I’m starting to feel like I cannot compete.

6. http://ipad.about.com/od/Action-Arcade-Games/tp/The-Best-Action-Arcade-Games-For-The-iPad.htm
I couldn’t see a date alongside this entry. I think it may be a couple of years old given some of the titles on offer – “Rage” for example.
I quite like this list. It’s simple and honest. But still it points directly to the app store. HTML5 gaming hasn’t a sniff. Yet.

7. http://ipad.about.com/od/iPad_Games/u/A-Guide-To-iPad-Games-And-Gaming.htm
I didn’t delve too deep here but it looks like all the results of number 6 categorised. The author is the same. Yup, very much an SEO exercise.
“Daniel, get us listed up there with Techcrunch for free iPad games. We’re about.com for God’s sake. We need to be registering.”

8. http://iappguide.com/ipad/top-games/arcade-games/free
Hang on. This looks different. I’ve never heard of iappguide.com. These guys could well be HTML5 focused.
Alas, no. It’s another bunch of links to the app store. To its credit it looks pretty well maintained. Right now Flappy Bird is all the craze and there’s a bunch of “flappy” games on offer. No HTML5 but it’s a bit different. Credit to them for weighing in at number 8 but I’m not sure I’d install any of their listed games. It’s just a list and feels pretty pointless. i.e. content I could get just by going to the app store or reading one of the previous 7 lists.

Lists, lists, lists. There’s no experience to be had here. Just lists. If you play Google you can position yourself well but have limited relevance to your audience. I’m not convinced lists are what people searching with the word “arcade” are after. I’m possibly (and probably) wrong.

9. http://iphone.mob.org/genre/arkady/
Proceed with caution! I’m not convinced that this site is a friendly site.
It’s the first site on the list that offers games outside of the app store. Yup, you’ll need a jailbroken iPad for this lot.
If you’ve jailbroken your iPad you’ve really missed the point. You probably should have some form of Android detritus like a Nexus 7 or Samsung Galaxy Mega. Both fine bits of kit but for my money inferior to Apple’s offerings. Anyway, that’s technical opinion and I try to avoid that.
I don’t like this site. It’s just a bit “hey look at my adverts”. There’s no promise of an experience to be had here. Just a vehicle for ranking highly and splurging adverts at you.

10. http://www.makeuseof.com/tag/muo-free-ipad-games-addicting-arcade-edition/
Aaaand another list. A bunch of iPad games that somebody has hastily assembled without any real thought or care. Actually perhaps there was some care taken not to replicate what Techcrunch or About.com were offering.
This is a terrible list wrapped with some adverts. Again.

I must be close to being listed. Surely.

11. http://www.imore.com/namco-arcade-ios-freetoplay-classic-arcade-titles
205 words in this article. 205 words. The rest of the page is adverts and links to other site content. Those silly enough to fall for it have commented in the comments section. Jesus.
So for anyone genuinely looking for free arcade games to play on their iPad it’s looking pretty grim. Unless they’re happy with wading through a list of somebody’s opinion as to what’s good they’re not really going to get the “arcade” experience.
Perhaps that’s not important.
I perhaps need to think about this.
Most people surfing the web for games were probably born after the glory days of arcade gaming. Is it really right that I should harp on about the beauty of playing games and striving for the high score for the cost of a single coin?
Maybe not. I am quite possibly barking up the wrong tree. But that said I’m convinced that what was fun for me as a boy 30 years ago ought to be fun for today’s casual gamer. The challenge of a good arcade game with that single goal of dominating the high score table – the one thing that identified you as the “best” – has to be a worthwhile pursuit.

12. http://playstar.mobi/
HUZZAH! I made it. Amongst the endless lists of lists I made it.

So what does a searcher see for their “free arcade games for ipad”?
To better understand this I’m going to try and step inside the mind of the searcher. What kind of a person might want to find free arcade games for their ipad?

Free games for iPad is quite different to free arcade games for iPad. At least I think it is.
If you include the word arcade you’re looking for something quite specific. That’s not to say you’re looking for something from 30 years ago. Not at all. But you’re looking for a style of game that almost by definition is brief, challenging, entertaining and most likely pretty intense.
So far a few of those lists have thrown up their own results and a bunch of the games listed are very good. Very good indeed. But they’re not “classic” in their execution. Not necessarily.
So from this I deduce that what I want from my searcher is an unwritten desire to play “classic” arcade games.
To have my games returned without having to supply an extra (and arguably implied) keyword is good.
The person I want to be searching for “free arcade games for ipad” is an iPad owner (obviously) and somebody interested in (ideally) classic style arcade games from what I would call the golden era.
This is both useful and limiting.
Useful in that it provides a niche target audience to aim for an limiting in that it restricts me to that very same audience.
Nonetheless I am happy to target this audience.

So what words greet my searcher?

Well right now it’s

Free Mobile Arcade Games – HTML5 gaming – No Downloads, no installs | Play Where can I play games on my iPad, Android, iPhone or iPod Touch for free 

Woah. Look at that – HTML5 gaming.
If I can get this person to click they’ve suddenley (hopefully) made an association with free and/or arcade gaming and HTML5.
I’d be happy with either of those associations.
One day HTML5 will be a key search phrase for anyone looking for a particular style of game. Ideally “mobile” and possibly “free”. Whether that shifts to the stinking world of In App Purchasing remains to be seen but certainly the mobile angle is key.

Same game > any device. That has to be a winner. It is afterall our unique selling proposition to our audience.

Great Boulder of Death and in app purchasing in HTML5 games

Every once in a while a new game emerges that I think is worthy of a closer look. Recently I downloaded Pik Pok’s Giant Boulder of Death (GBoD). As with one of their earlier titles, Flick Kick Football, the key to the game’s appeal is in that nagging “if I just have one more go I’ll improve…” dynamic. It really does work a treat.

Flick Kick Football is a tight game. You can launch and be playing within seconds, the controls are very basic and the challenge is enormous. A perfect game experience in every respect.

Giant Boulder of Death Giant Boulder of Death Giant Boulder of Death Giant Boulder of Death

GBoD is the same. Well almost. It takes just a little longer to start playing and the adverts and in-app purchasing breaks are a distraction. This aside though and the game is just too perfect to ignore.

Note: I initially titled this post Great Boulder of Death – a study and blueprint for making fun, challenging and market friendly games.

So what is this game?
Well essentially it’s a love story between two boulders. Man boulder sits high atop a mountain rock whilst woman boulder sits as an ornament in the village at the foot of the valley. A man with a chisel hacks the woman boulder in to tiny pieces and from afar man boulder seeks to exact his revenge by rolling at pace down the mountain destroying everything in its way.

This game is just loaded with tiny elements that go to making a wonderful challenge and overall experience.
As you hurtle down the mountain (itself an extremely satisfying experience) the town mayor orders some defences. Spiky walls, spike ball hurling contraptions, giant spiky robots… the more you unravel the game the more you will see.

To steer the boulder you tilt your device. I play on iPad Mini. It works a treat. To leap over stuff you tap the screen.

Initially your tilting effectiveness is pretty minor. As is your ability to jump. But the more in-game coins that you earn the greater your ability to “pay” for upgrades. As with all good games that use this model you don’t have to spend a single real-world penny. You can just play the game. The more you play the better you become and the more dib-dobs you earn. Spending your money wisely results in improved control, reduced adversaries and an overal greater chance of obtaining rewards.
The balance is perfect. No goals seem too distant. There’s always an upgrade within reaching distance.

My own experience developing Distant Orbit showed to me that achieving this balance is not the result of guess work. It takes a tremendous amount of testing to get the right balance of challenge to reward.

So the game is essentially an exercise in swerving around obstacles, destroying targets (sheep, ramblers, cars, horses, houses…) and accumulating enough coin to upgrade and make future games fractionally less challenging and therefore more fun. The carrot that is dangled by suggesting that a few more coins could increase the speed or height at which your boulder can slide or leap is enticing. The thought that you could reap even more destruction on the world by spending hard-earned game currency is a real thrill.
And that is also a key factor in the game. The process of actually playing the game and taking on the challenges is fun. Why? Because you are destroying stuff. Whatever could be more fun?

By combining speed with destruction and injecting a liberal amount of chaos the developers have, I’m sure, tapped in to what we as humans crave – total control and a little bit of madness :)

I should say right here that this game is not easy.
Dodging spike bombs is hard. In fact maddeningly so. You are left with a sense of frustration that it wasn’t actually humanly possible to avoid certain obstacles. In some scenarios the seemingly random nature of the object generation really does conspire against you. I’ve never encountered a dead end – let’s face it that would be a fairly neat way to hack someone off and never see them again. But I have encountered situations where an emerging pathway is suddenly blocked and only the mightiest of leaps would get you through.

But this is nit-picking.

Where GBoD succeeds is in its tying together of all of theses wonderful elements.
As a gamer I’m left with that holy grail of gamer emotions – just one more go.
I love games that focus on the score and on the importance of achieving as high a score as possible.
Some of the targets in the game focus on achieving high scores. This has to be the ultimate in “if I have one more go I’ll beat it”.

I’d really like to include as many elements from this game as I can in my current project. My current project is the start of a series. I’d like the gamer to feel that the first game in the series sets a precedent. I’d also like to leave the door open for in-app purchasing should any of my publishers require that feature.

In almost every conversation I have with clients these days in-app purchasing features.
I have code written to handle this but it’s my code. Integrating with 3rd party APIs will of course differ from solution to solution (assuming they’ve not gone the route of plugging in one of the off-the-shelf solutions).
I don’t like in-app purchasing models. They’re not a gamer’s solution. But I have to support them.

In-app purchasing is probably another post. For now I urge people to go and download Pik Pok’s impressive Great Boulder of Death.

Viewports and the scaling & positioning of the canvas

Having just spent a couple of hours poring over my code for scaling & positioning the game canvas I thought I’d share the experience.

Despite having made several HTML5 games over the last couple of years I’ve never experienced any real issues with scaling or positioning. Just recently however I’ve started to notice inconsistencies between browsers and OS versions.

In some cases the canvas would scale perfectly but not position properly. In other cases the canvas would not scale properly yet position well in the centre of the screen.

My criteria is simple – I want the games to be played in any orientation and to fit consistently in the centre of the screen.
Where full screen is available in either width (landscape orientation games) or height (portrait) I will also aim for that.

It’s 90% there. On Galaxy S2+ and iPhone4+ portrait games load and scale to fit fine in portrait and landscape games load fine and scale in landscape.
The problem arises on iOS when the games are loaded in the wrong orientation.

e.g. if the game is a portrait game and it loads up in portrait mode then it scales to fit just fine, as you would expect. (illustration 1)


illustration 1 – game loads in portrait mode

But if the player then decides to play it in landscape it scales fine but doesn’t centre correctly. Just sits to the left of centre. (illustration 2)

illustration 2 - game loaded in portrait and rotated to landscape

illustration 2 – game loaded in portrait and rotated to landscape – note white space where HTML BODY is simply untouched.

If the game loads up in landscape then it centers beautifully and is playable (illustration 3)

iPad HTML5

illustration 3 – game loaded whilst tablet in landscape mode

If the player then rotates to portrait the game scales just fine on iPhone to fit the screen but on iPad it sits rather awkwardly to the right of the screen with about a third of the content out of sight. (illustration 4)


illustration 4 – loaded in landscape and rotated to portrait

This has an impact on my regional touchEvent code that I use for driving menus and other in-game features.

I no longer present a banner message instructing the player to rotate. It seems clunky and my clients hate it.

Of course it’s far too easy to suggest that as long as the games load up in their preferred orientation then surely I’ll be OK.
The reality is it needs to work and work properly.

So what’s my code doing?

Well surprisingly little.
I certainly don’t sniff the device. It’s 2013. So I don’t actually know I’m dealing with iOS any more than I know it’s a desktop or mobile browser.

The first thing I do is record the screen’s physical width less any scrollbars.

var w = window.innerWidth;
var h = window.innerHeight;

I also record the game’s intended canvas dimensions.

var rw =320;
var rh = 480;

Then to accurately scale the canvas I use the Math.min() method to first determine how best to scale the canvas to preserve the aspect ratio.

multiplier = Math.min((h / rh), (w / rw));
var actualCanvasWidth = rw * multiplier;
var actualCanvasHeight = rh * multiplier;

Fairly simple stuff there just to keep the aspect ratio of the game’s canvas intact and as previously stipulated aim for full screen in the preferred orientation.

To actually position the canvas on the screen I use CSS.

So first I’ve already got a handle on the canvas and stored it within my global namespace (g):


<div id="game">
<canvas class="canvas"></canvas>


g.gamecanvas = document.getElementById('game');


.canvas { width: 100%; height: 100%; }

I then make sure that the canvas parent is displaying as a block level element, assign a width to it and use the margin property to centre it. The canvas fits its parent to the pixel.

g.gamecanvas.style.display = "block";
g.gamecanvas.style.width = actualCanvasWidth + "px";
g.gamecanvas.style.height = actualCanvasHeight + "px";
g.gamecanvas.style.margin = "0px auto 0px auto";

My scaling function is called every time the onresize() or onorientationchange() events are fired. It is also called at the very top of the code before the assets are loaded.

So when we tie all this together we get a perfect presentation the first time the game is loaded.
The canvas scales to fit the orientation and centers perfectly in the centre of the screen.

So why on earth do I get that “dead” area when the tablet is rotated from portrait to landscape? (illustration 2 above)
Why does the canvas shift over to the right when the tablet is rotated from landscape to portrait? (illustration 4 above)
There has to be something else to look at.

The answer lay in the META description for the VIEWPORT.

Here’s what I used to present in the index.html of every game:

<meta name="viewport" content="width=320, height=440, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

What a mess. I’d never touched this in almost two years.
Understanding the viewport is essential to understanding mobile presentation. Generally speaking the rule is if you don’t understand how it works don’t use it. The results can be undesirable.

Rather than go to the trouble of fully understanding what the viewport definitions are and do I decided to look at what I actually want to achieve. The answer here is very simple – a) stretch content to screen dimensions, b) suppress ability to pinch / zoom.

There is no need to specify the physical width or height in pixels of the device screen. There is also no need to restrict user scaling with the user-scalable attribute. Finally there is no need to set a maximum-scale, which I must admit I found surprising.

The only code I need here is:

<meta name="viewport" content="width=device-width, initial-scale=1">

The scaling of the canvas and positioning of the parent element within the document body are now perfect. No more “dead” regions and no more strange horizontal positioning.

There appears to be more sympathy for my lousy meta code within Android browsers than there is with iOS and Safari.

46 per cent of all video game time comes from a mobile device

It is with huge interest that I read this statistic. For the last 2 months I have had my head buried on a project and haven’t really looked up very much to the wider mobile gaming world around me.
I had wondered just how much of a foothold mobile gaming has achieved lately so it’s hugely encouraging to see that almost 50 percent of games are played on a mobile device.
From the point of view of an open web game developer it’s surely significant since these devices will be HTML5 compatible. Quite whether the browsers are good enough and fully support all the features that we have been spoiled by on desktop is another matter, of course.

46 per cent of all video game time comes from a mobile device | Mobile content industry news | Mobile Entertainment.

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.

Area 51 – adding some nice touches


15 – 20 years ago I devoured games such as Wolfenstein, DOOM and of course the 15 year old genius that is Quake. What I loved about those games was so much more than the pleasure of blasting monsters – for me was all about the neat little extras that the developer threw in.


Most notably the muzzleflash and weapon recoil when the trigger button was pressed. This lit Quake up beautifully. In fact before OpenGL changed the look of the game you could pretty much light your way along a gloomy corridor with a few rounds from the shotgun / nailgun or with a single shot from the rocket launcher. I can’t tell you how many times I did that and enjoyed it.

For Area 51 I wanted to achieve my own very stripped down version of this super satisfying sensation.
To achieve the muzzleflash I simply re-rendered the wall overlays to include a touch of Photoshop light rendering. I aimed the cursor to the right of the weapon area so that it pretty much just lit up the right hand corridor wall. If you look you can see it slightly illuminates the darker corridor in the distance. The effect was satisfying enough but empty without the recoil of the weapon in hand.

I set a .nextthink attribute on the weapon object and depending on the weapon it would be anything from 4 game ticks to 10 for the slower non-auto weapons.
During this period I would flash the walls and recoil the gun. Better yet I lifted the already written blood spurting code and created a white version that spat from the gun with every round. Almost like bullet cases being shed when unloading an automatic rifle.

You can see the muzzleflash in the above right image compared to the left side.

Finally I got around to iconising the weapons for display in the HUD. You can tap each unlocked weapon to use it. The first three weapons will unlock fairly quick but the last two might just be beyond level 20. That’s when the aliens and hideous experiments start to come at you :-)

Hugely entertaining to develop this. Loving making games again.

Incidentally the text in the green console is dynamic. I intend to write meaningful things in there during each mission to assist the player. As yet I haven’t thought of anything to say in there.

iPad shoot em ups “shmups”

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

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

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

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

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

List of iPad shoot em ups

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

Air Attack HD
Do Don Pachi
Infinity Field
Lightning Fighter
Sky Combat
Sky Force
Space Falcon

%d bloggers like this: