Archive for category HTML5

Threading in JavaScript with Web Workers

I’m about 5 weeks into the second 8 week game competition now building my, as yet unnamed, (original) Syndicate clone.

My levels consist of real images from Bing Maps (which I was surprised to find had nicer imagery when compared with Google, despite Google maps generally being my go-to maps site), which I then outline the buildings on using a level editor I built for the task, then save a big ol JSON array. This is then used in game to tell the little guys where they are and aren’t allowed to walk, amongst other things. The windy streets of my first level (Brighton, on the south coast of the UK) make for some difficult navigation- so I had to employ an A* search algorithm which would let my little guys find their way around these defined polygons which represent the footprints of the buildings. This all worked fine, however I noticed a the browser would lock up for a second or so while it ran through checking all the polygons and building paths for all four of your guys. “Wouldn’t it be great if I could do this in another thread” I thought…

Web Workers to the rescue!

Web workers are new in HTML5 and let you fire up another piece of javascript code in another thread, totally separate from the UI (so it will stop the freezeing I was seeing when the Javascript had to think really hard). You only have one mechanism (correct me if I’m wrong here) to send messages between your “Worker” thread and back to the parent application; the postMessage() method and onmessage callback function.

On the application side you create your new worker like this;


// setup the worker- giving it the url for the js file with the code to execute
var worker = new Worker('mysource.js'); 

// define a call back to handle messages we get from the worker
worker.onmessage = function(msg) {  
  alert(msg);
}

// send a message to the worker
worker.postMessage('shaw');  

Then on the worker side you have the same methods at your disposal;

// this exists in mysource.js
// setup a call back to handle messages we receive from the application
self.onmessage = function(msg) {  
  // post a message back to the application
  self.postMessage('hello ' + msg);  
}

In case you’ve not figured it out, in the above example you should expect to get an alert box saying “hello shaw”.

It’s also work pointing out that “self” is the global scope inside one of these web workers, as you won’t have access to any of the usual browser window or document objects.

So this is all pretty straight forward, but I still had a problem with my route finding example; I’d written a class which has a constructor accepting the polygon array and then a method which works out the route and returns it– how does that work in this model?? How do you call methods and constructors when the only access you have to your thread is a simple postMessage method?

Calling methods from ‘the other side’
postMessage() lets you send JSON as well as just plain old strings, which makes it quite a bit more useful. I used this to build a basic messaging system between the app and the thread- I would pass something like this;

worker.postMessage({ method: 'Init', args : [my_array, null, 5]})

then in the worker I would have a call back which looked like this;

self.onmessage = function(msg) {
    // the if catches the 'Init' special case- this instanciates a new RouteFinder
    if (msg.method == 'Init') 
    {
        // create a new instance of our route finder class, using it's constructor and passing in args
        self.MyRouteFinder = RouteFinder.apply( null, msg.args );
    }
    else  // the else catches all the other method calls, whatever they may be
    {  
        // find the method from the prototype chain, and apply it against our globally scoped object, again passing the args
        // the result of this method call is passed straight back to the application
        self.postMessage(RouteFinder.prototype[msg.method].call(self.MyRouteFinder, msg.args));
    }
}

This worked well for me though there are lots of (often better!) variations of this pattern on-line.

What if I don’t want to put my worker code in another file?

Also not a problem as detailed in this article on html5rocks.com. It basically involves grabbing your code from it’s own script tab on the same page, then smashing it into a Blob, then passing this blob into the construtor of your web worker.

Wait a sec.. how do I debug these workers?

You may have fired up some code in Chrome and noticed it hasn’t worked, so gone to the dev tools (F12) then flicked around in the scripts tab and… wait a minute… the web worker code doesn’t show up in the scripts panel! Well don’t worry- if you’re up to date with your copy of Chrome go down to the bottom right hand corner of the scripts panel where you’ll see one of the collapsably panels is called “Workers” and lists the code executing in each of your workers- just click one to launch another debug window which you can set break points on in the usual way.

No Comments

Mobile HTML5 Offline app links

I’m looking at writing some apps I did on the iPhone a while ago (the first of which will be Karma) to be mobile html5 offline accessible apps, using html5 audio/ canvas etc- so I’ll use this post to collect some useful links for research;

Also decided to use this as an opportunity to mess with nodejs, using one of the “nosql” db platforms;

http://blog.mongodb.org/post/812003773/node-js-and-mongodb

http://nodejs.org/

1 Comment

New Adobe HTML5 Animation tool “Edge”- free tech preview

A real nail in the coffin for Flash, as it’s own parents (Adobe) release a free tech demo version of Edge- A new editor that lets you make flash style animations– without Flash! Instead the animations are scripted using standards html5, JavaScript and CSS3. Having been hand coding stuff like this over the past year (for 8week game and the like) I’m interested to see what kind of code this tool actually spits out! Check it out herel; http://t.co/I46QFYm

3 Comments

Work Starts on my WebGL Game!

Caught up in all the excitement of WebGL becoming more mainstream, I’m building another javascript game. My first offering to the browser based game community was Manic Spaceman, a straight platform game based on ManicMiner which was a little rough around the edges, but boshed out on the quick for the 8weekgame competition.

This time round I intend to go full 3d, taking advantage of WebGL, and make a desert strike style game. I considered starting from scratch, as I did with Manic Spaceman, and writing my own engine to power it all, however given that I’ve next to no 3d experience I thought I would reduce the scope a little and use an engine that’s already out there. After about a week of research I’ve settled for Three.js – I say “settled”, but it’s actually shaping up to be a pretty awesome engine. There’s are a few decent engines out there, all obviously in their infancy, but having reviewed the feature set and looked at the demo’s and read around other developers experiences,  Three feels like the best choice. The other’s I considered were;

The Short List

Other contenders

I only considered open source offerings and looked for engines which

  • were still being actively developed (!)
  • seemed performant with high poly counts
  • handle shadows/ reflections
  • exposed access to GLSL
  • UV Mapping support
  • be relatively stable.

It was surprising how many engines had broken demo’s on their site, which never bodes well, but on the whole, they are all good offerings with almost all of them fulfilling my requirements.

While building my game, I shall be working through some OpenGL tutorials I found- a port of the well known NeHe OpenGL tutorial set, on LearningWebGL.com, which should put me in good stead to build my next game totally from scratch.

I shall post updates as I have something to show.  So far I’ve written a HeightMap generator which works from a greyscale bitmap to build terrains, and I’m currently working on getting the model to follow the landscape; I’ve a long road ahead!

3 Comments

ManicSpaceMan now works in IE(9)!

Cast your mind back to about 6 months ago when Gareth, Martin and myself did the first 8WeekGame competition- Controversially I didn’t use XNA, but instead created a game which would run from your browser, using the new HTML5 canvas support- at the time it was a niche feature without wide browser support, but with the recent release of IE9, you can now finally play ManicSpaceman in IE! So go upgrade your browser and give it a go! Although I should note– for some reason the sounds don’t play in IE, despite me creating a whole MP3 set of the sounds specifically for it; so the best experience is still in FireFox or Chrome!

While on the subject of IE9- see here for the terribly useful developer notes on the new browser detailing all the new cool stuff it supports (css3/ html5 features) http://msdn.microsoft.com/en-us/ie/ff468705#_Intro

2 Comments

More Manic Spaceman (8weekgame) documentation done

I promised I would, and I’m finally getting round to documenting the rest of the classes I wrote for my javascript platformer I built for the 8weekgame competition, as well as putting up the sourcecode. There’s still a few more to do, which I shall bash out through the course of the rest of the week. Check them out at www.shawson.co.uk/codeblog/8-week-game-competition/

No Comments

Transparent CSS Sprites – Smashing Magazine

If you are familiar with CSS Sprites, you should be able to grasp this twist relativ

via Transparent CSS Sprites – Smashing Magazine.

No Comments

8WeekGame – I Won!

Woo hoo! I won the very first 8weekgame competition with my HTML5/ Javascript rendition of Manic Miner named “Manic Spaceman”.

Hats off to both Martin & Gareth- I think we all did brilliantly to get a game smashed out in 8 weeks with no previous game development experience. The next competition kicks off in October (the 4th) where I will be joining the other guys to tackle some XNA! We will be free to produce any game we want this time round!

I’m on holiday for the next 3 weeks, returning mid-August when I shall complete the articles detailing the classes I wrote for Manic Spaceman, just incase anyone else wants to try doing something similar and needs some ideas!

No Comments

Great HTML5 Canvas/ Chrome Demo sites

Found this today; www.chromeexperiments.com loads of cool canvas experiments- geared towards google chrome but most run well in up to date firefox build.

Update: also worth a look in; www.canvasdemos.com

No Comments

Couple of interesting news items today

Couple of bits I spotted in the news today that I though warranted posting;

I’m particularly interested in the IE9 release 3 to test it out with the html5/ javascript game I’m building for the 8 week game competition

No Comments