Swingpant's Game Lab

HTML5 Game Dev. DOM Manipulation. It’s costly, so minimise its use.

swingpants — Wed, 08 Feb 2012 00:22:45 +0000

Typically when manipulating display objects in Flash, applying positional data is a trivial task so you wouldn’t think twice about applying the data on every game loop. It doesn’t matter that the object hasn’t moved on that frame. The overhead would be minimal, you can just reapply without penalty – in fact to engage with any conditional to test for the need to apply could be more costly in the long run.

With DOM manipulation, any update seems to be fairly processor expensive. Very non-trivial. Here it is essential that updates should be applied ONLY when absolutely necessary.

I ran a test script at JSPerf.com which demonstrated the issue. I set up a Div with some simple text content. Then manipulate it on every iteration. I move the x-position by 0.2, then round off the position before applying. To optimise I only apply the dom manipulation when the actual object has changed position. The results are stark. A massive performance boost.

Optimise your DOM manipulations. It pays.

The code used is simple, and as follows. Create a div, populate then manipulate:

var targetDIV = document.createElement(“div”);
targetDIV.innerHTML = “test data”;
document.doby.appendChild(targetDIV);
var posX =0, prevPosX=0;

function unoptimisedManipulation()
{
posX+=0.2;
var roundX = Math.round(posX);

if(posX>500) {posX=0;}
targetDIV.style.left=roundX+”px”;

prevPosX = roundX;
}

function optimisedManipulation()
{
posX+=0.2;
var roundX = Math.round(posX);
if(prevPosX!=roundX)
{
if(posX>500) {posX=0;}
targetDIV.style.left=roundX+”px”;

prevPosX = roundX;
}
}

The results aren’t indicating that DOM manipulation should be avoided – Android devices really struggle with Canvas so DOM is preferable – it just takes a bit of effort to make the DOM production ready.

Try running the tests yourself at JSPerf.com : http://jsperf.com/optimising-dom-access

HTML5 Flipping a DIV – Horizontally Inverting content with Javascript and CSS

swingpants — Tue, 07 Feb 2012 22:21:23 +0000

As I prepare for my talk at FITC Amsterdam (Feb 2012) I’m building a web game in both Flash & HTML5.

I’m aiming my HTML5 build at the mobile web (but will try to reach as many desktop browsers as possible) – so it will need to run optimally across Android & iOS.

I’ve discovered a few issues so far that for the purpose of record and reference I’ll post here in game lab.

First up. I have a player character that I’m animating via a spritesheet. I need the character to be able to face left and right.

I made the assumption that I could drop the sheet into a div (as background image) and then apply a scaleX transition to the div when I need to face left, and remove the transition when I need to turn right.

I’m applying the horizontal flip by adding a CSS classname to the div.

The CSS:

.flip-horizontal
{
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH; /*for IE*/
-ms-filter: “FlipH”;
}

Then when I need my character to face left I add the class name to the character div:

function faceLeft() {characterDIV.className = “flip-horizontal”;}
function faceRight() {characterDIV.className = “”;}

So, is this good? Works fantastically on the desktop browsers and really well on Android.

BUT, on iOS (iPad in my tests) there is a BIG lag when the webkit transform is applied.

I mean big – in my game there can be up to a second long hang. Totally unacceptable for any game usage (unless as a one shot on initialisation).

The answer? Unfortunately I couldn’t come up with a technical solution. I had to resort to putting the reverse animation on the spritesheet. This gives me the performance I want – but at the expense of more weight to the game.

If my game has many characters then I am essentially doubling my asset weight for those characters. Boo.

Creative Javascript – 3D Tree with Leaf-fall

swingpants — Wed, 02 Nov 2011 23:34:39 +0000

A HTML5 prototype…

Finally getting around to have a play with HTML5 Canvas – enabled by attending Seb Lee Delisle’s excellent CreativeJS course.

I’m impressed with performance from Canvas nowadays – my first sight of it many moons ago left me pretty disappointed – but now it actually feels useful and some pretty impressive visual effects can be achieved without resorting to WebGL.

The prototype I threw together here demonstrates a growing tree, in 3D with numerous branches, leaves, leaf fall, faux-shading and colour phasing. The demo will re-grow a tree on mouse click, and will allow for left and right rotation by means of mouse position (left/right).

3D Tree with Leaf Fall

To talk through the code a little: The tree is constructed using a recursive buildBranch function. Every branch spawns two new branches, or in the last generation it has a 90% chance of spawning a leaf. The branches are coloured from brown to green related by the recorded generation of the branch.

No 3D libraries were used in this demo – all of the 3D is via a simple scaling calculation for 3D points [ fov / (fov + point.z) ]. This allows for any 3D point to be translated (scaled) onto the 2D canvas.

The Painter’s Algorithm (priority fill) is applied via the sorting of all branches and leaves on their mid-point. This means that those furthest away are drawn to screen first.

Shading is applied by mapping colour to the z value of a branch’s position. This is very simply applied. There is a related alpha to add a fog effect to the furthest away elements, this gives some subtle but nasty artefacts and could be improved.

When a branch is fully grown the leaves will then appear and grow to their full size. When they fall a sine value is applied to rotation to make it rock as it falls. Leaves will collect on the ground.

Performance is pretty good here, but I did have to restrict the number of branch generations to 9. Of course some of the out-of-the-box features that Flash has such as Glow and Blur filters don’t exist – which means work-arounds or approximations have to be used – sound implementation isn’t very consistent across browsers – it is still early days, more and more JS will be used across the web, as it is the browser manufacturers will hopefully drive their products into more useful areas and consistent implementations.

The demo is a fast turn-around ‘prototype’, so not optimal or well formed. Feel free to have a play with the code, offer improvement suggestions or adapt in anyway you wish.

No attempt has been made to cover HTML5 cross-browser issues – so don’t expect this to work in IE!

Direct Link: 3D Tree with Leaf Fall

References from Playability: Making Games for Kids

swingpants — Mon, 12 Sep 2011 17:31:49 +0000

Here are the references from my talk at Flash on the Beach 2011:

Games:

Horrible Histories: Moo Spew

Horrible Histories: Gong Farmer

Shaun the Sheep: Alien Athletics

Deadly 60: Deadly Dash

Dick and Dom: Let Rip

Swingpant's FOTB Flinger

Your keyboard doesn’t work:
The functioning key test app. Many keyboards have a mechanical issue that means if two keys are pressed, certain other ones cannot be registered as being used. On the keyboard I am currently typing on if I press [Down], [LEFT] and then [Space], the [Space] fails to work. If I press [A] and [W], then [Q] fails to work.

Test your keyboard here: http://bit.ly/keytest
(Sorry users of keyboards that aren’t exactly like the one I have here – I made the app from a pic of this one)

Accessibility

A simple introduction to web accessibility – Ian Hamilton

Recommended Reading on Game Design:
Game Design Books:

The Art of Game Design – Jesse Schell

A Theory of Fun for Game Design – Raph Koster

Challenges for Game Designers – Brenda Brathwaite & Ian Schreiber

Academic Papers:

MDA: A Formal Approach to Game Design and Game Research (PDF) – by Robin Hunicke, Marc LeBlanc, Robert Zubek

Playability: How to Identify the Player Experience in a Video Game – by José Luis González Sánchez, Natalia Padilla Zea, Francisco L. Gutiérrez.

From usability to Playability: Introduction to player centred video game development – by José Luis González Sánchez, Natalia Padilla Zea, Francisco L. Gutiérrez.

Dissecting Play: Investigating the Cognitive and emotional motivations and affects of computer gameplay – Lindley, Nacke, Sennerston

Flash on the Beach Titles by GMunk

Flash on the Beach 2011: My Schedule

swingpants — Sat, 10 Sep 2011 00:41:44 +0000

The amazing Flash on the Beach conference is upon us again. A must every year for me to get my fix of the latest tech, design and web game ideas.

This year I’m speaking on the monday morning – great for me as I don’t have to sweat it for the following few days.

Some major clashes this year – I may have to miss Seb Lee Delisle, Stray, Joel Gethin Lewis, Keith Peters, Conrad Winchester and Stefan Richter. Sorry guys – my arm is up for being twisted though.

Mon 12th Sept 2011
Keynote.
Jon Howard – Playability: Making games for kids
Rob Bateman – Flash 11: Get Ready for Gametime
Eugene Zatepyakin – Natural Features Tracking and Image Pattern Detection / Recognition
Han Hoogerbrugge – Prostress of the graphic universe of Han Hoogerbrugge
Jon Burgerman – A short talk about working and not working and how to waste your time proficiently

Tue 13th
Tomek Augustyn – Riding the Hislope
Joa Ebert – The Tale of a travelling salesman and his four colours
Mike Chambers – Deconstructing theexpressiveweb.com
David Lenaerts – Keeping It Real
Remy Sharp – HTML5: Where flash isn’t needed anymore
Cyriak Harris – Destroying my laptop with After Effects
Jame Victore – Who died and made me boss

Wed 14th
The Elevator Pitch.
Thomas Vian – All aboard the game engine
Lee Brimelow – Render for Speed
Frank Reitberger – Real(hard)time
Joshua Davis – The Unknown Voyage

Playability: Making games for kids

swingpants — Thu, 08 Sep 2011 23:02:16 +0000

I shall be speaking at this year’s Flash on the Beach conference in Brighton, UK (11th to 14th September 2011).

The subject is playability in relation to making web games for kids. As a lead developer, tech lead and team leader I have had huge amounts of experience working on game design and development with major kid’s TV brands. It is exciting, fun and always a privilege.

In the session I will be looking at how a gamedev team is made up, the product lifecycle from idea to release. Important points I’ll look at are the specific needs of the game’s audience. How to design the best control method, the most appropriate aesthetics and which mechanics work best.

I’ll dig into the elements of a successful game – which measures are used to find out if a game is ‘good’ and successful.

With constantly shifting sands in the world of the web,I’ll touch on what I see as the future of games for a major broadcaster – what technology will be used and on what platforms.

During the session I’ll be showing examples of games, video examples and I’ve arranged for a Skype call to the TV offices…

Playability at FOTB2011

Introduction to Mercator Projections, Latitude and Longitude

swingpants — Sat, 05 Mar 2011 00:05:02 +0000

Or how to place a map coordinate into 3D space. This post is a brief walk through of the basics from my 2010 presentation “Where in the world? Intercontinental Ballistic Flash”.

Belgian, Flemish geographer and cartographer Gerardus Mercator, in 1569 presented a cylindrical map projection. The Mercator Projection quickly became the standard map used for nautical purposes. It’s advantages were that the scale is linear in any direction around a point, meaning all angles were preserved (conformal).

Gerardus Mercator

Around the equator feature shapes are accurately portrayed but as the poles are approached there is a size and shape distortion. The scale increases as the pole is neared, eventually becoming infinite when the pole is reached.

If you imagine the world as a beach ball. The Mercator Projection is the equivalent of cutting open the ball at each pole and stretching the skin to form a cylinder. Now slice down the cylinder and you have the map.

The first Mercator projected map. 1569.

All map projections distort the shape or size of the Earth’s (or for that matter any other planet’s) surface. The Mercator Projection exaggerates areas far from the equator. Greenland seems as large as Africa, but is in fact 1/14 of the size, Antartica appears to be the largest continent but is in fact only 5th in terms of area.

Despite the obvious distortions, the Mercator Projection makes a great interactive map. Thanks to the conformality it can be zoomed nearly seamlessly.

So here we have a system that converts a 3D scene, the real world, onto a 2D plane, the map. This system can just as easily convert the 2D back to 3D. It is a coordinate system that requires two positional parameters and one constant: the planet radius.

The positional parameters are latitude and longitude. As developers we are used to standard coordinates x and y. Across then up. Horizontal then vertical. With latitude and longitude we have to think differently. Latitude is vertical and longitude is across. Up then across. Latitudes run from pole to pole, while longitudes run around the planet.

There are 180 degrees of latitude from the South Pole to the North pole, and 360 degrees around the planet. Imagine yourself sat at the centre of the Earth with a laser pointer. Point at the Equator then you are at 0 degrees latitude, at the South Pole -90 degrees and at the North Pole 90 degrees. Now point at the Equator again you can turn 180 degrees around the equator to the right (-180 degrees longitude) and to the left (180 degrees longitude).

With these any point on the surface of the planet can be recorded or indeed any position on a map.

So we have a system for calculating a position on the surface of a sphere, a 3D coordinate, but how do we convert latitude, longitude and the planet’s radius into a 3D x,y,z coordinate?



public static function convertLatLonTo3DPos(lat:Number, lon:Number, radius:Number):Vector3D

	{

		var v3d:Vector3D = new Vector3D();
		//Convert Lat Lon Degrees to Radians

		var latRadians:Number = lat * TO_RADIANS;

		var lonRadians:Number = lon * TO_RADIANS;
		v3d.x = radius * Math.cos(lonRadians) * Math.sin(latRadians);

		v3d.z = radius * Math.sin(lonRadians) * Math.sin(latRadians);

		v3d.y = -radius * Math.cos(latRadians);
		return v3d

	}

Here the latitude and longitude are converted into radians ( TO_RADIANS:Number = Math.PI / 180 ). Then the trigonomic functions are applied to the planet radius to return a vector3D x,y and z.

Adobe User Group XL

swingpants — Tue, 16 Nov 2010 09:36:52 +0000

On Nov 17th, I’ll be speaking at the Adobe User Group XL event in Amsterdam. This conference is festooned with glittering array of industry big wigs, not just Flash, but all across the creative spectrum. Belinda van Valkenburg from Pixar (her credits include Monsters Inc., Toy Story 3, Finding Nemo, The Incredibles <- wow!), Roger Stighäll and Daniel Ilic from the amazing North Kingdom, Seb Lee-Delisle from Plug-in Media and Frank Reitberger from Prinzipiell. As well as Northern Europe’s finest and Adobe evangelists Serge Jespers, Mike Jones, et al.

Adobe User Group XL 2010 Amsterdam

The event has a theme of ‘Celebrate Creativity’ and feature talks on interactive design and development, cross-media, imaging, gaming, augmented reality and PCB design.

I shall be doing my Where in the World? Inter-Continental Ballistic Flash talk with a few additions.

Really looking forward to this conference.

Keyboard Woes

swingpants — Wed, 27 Oct 2010 21:18:57 +0000

I came across a problem today. Surely I should should have spotted this sooner – but maybe I just never used these key combinations.

It seems that there are issues with using ARROW KEYS and SPACE. Specifically on my keyboard the combination LEFT, DOWN and SPACE doesn’t work. I’ve spotted that other key combinations fail on different keyboards. Another laptop I have fails with LEFT, UP and SPACE as does my desktop at work.

Here is a quick app that will tell you what keys are being accepted. Try different combinations of arrow keys and space to see if you have any fails.

Seemingly this is nothing to do with Flash and everything to do with keyboard design. The problem varies from model to model, but is VERY common.

Test your keyboard.

Keyboards use a matrix to wire up the keys and register presses. The matrix is made up of columns and rows. When a key is pressed the column and row contact each other completing a circuit. The controller for the keyboard detects this and registers the key press. ‘Ghosting’ and ‘Masking’ of key presses can occur with a matrix keyboard. Here is a technical explanation of the issue. This article is from a decade ago, seemingly the drive to fix these keyboard problems hasn’t been strong enough.

Let’s gauge how bad it is. Try the Keyboard Woes app out and then let me know if there are any issues with your set-up.

How to fix this? The ONLY solution is not to use the SPACEBAR in combination with the ARROW keys.

Flash on the Beach 2010 Review

swingpants — Sat, 02 Oct 2010 16:43:03 +0000

Wow. Another great year for Flash on the Beach. The doom merchants may well have predicted (or desired) it’s death but the evidence in Brighton this week demonstrated what a great future Flash has. Packed out presentations across the whole event with attendees from all over Europe (shown by the lack of people who had heard of Family Fortunes (Feud) – an amusing circumstance in Seb Lee Delisle’s session).

I kicked off day 1 at FOTB2010 by attending a talk by Conrad Winchester on Robot Legs and Signals. Very interesting and well thought out presentation with a good smattering of code examples. Andre Michelle‘s Pulsatile Crackle session was very well received. More excellent demonstrations of Andre’s apps with some very nice playful audio interfaces. His hilarious ball falling out of tube demo was a treat. Would love to see Andre give an audio coding 101 session… Mario Klingemann next: It was Mario’s session a few years ago – when he broke down the seemingly lesser bitmapData functions – demonstrating how to use floodfill, etc for optimal image analysis that really inspired me to concentrate fully on Flash. All of his sessions have been excellent since including this his last one for at east a year – slightly chaotic but full of great takeaway ideas. His attempt at a jigsaw puzzle analyser and solver was inspired. Such a shame he couldn’t coax it closer to a solution. I’ve been wanting to get to a Stacey Mulcahy session for a couple of years and finally succeeded here – I wasn’t going to miss a presentation with ‘douchebag’ in the title. Stacey is a fine purveyor of fun from the darkest corners of the interweb, I found the session to be hilarious but I still came away with some salient points about social media and the increasing usage of oauth.

The inspiration sessions were excellent. I love Robert Hodgin‘s work and especially love his love for maths. Stefan Sagmeister in the evening looked like a slightly smarter Nick Cave – he kicked off talking about ‘chelly fish’ which I thought was a wonderful pronunciation – his body of work is amazing and he has some great philosophies about working and taking time off to refresh.

Day 2 started off with the Elevator Pitches (I presented 3 Games in 3 Minutes here last year). The standard this year was amazing. I only saw the first 10 or so (I had to go and prepare for my session) but the stand outs for me were Sarah Bird/@AnimNation – 3D in 3 minutes, wow!, Tomek Augustyn/@blog2t – a real web cam eye opener, Tom Vian/@SFBTom – 8 bit sound engine SFXR and Trine Falbe/@TrineFalbe – Do not use bullet points – Trine has l33t preso skills!

Jon Howard's FOTB2010 session as sketched by @UBelly

I was next up with my “Where in the World? InContinent Ballistic Flash”. The session went really well. A poor data feed prevented me showing off the really cool bits of the deep zooming but I skirted around that issue. As I started I was told to try and cut 5 mins to help the schedule catch up so I dropped a little bit of code explanation around the explosions. I’ll do a post soon to cover that soon. It is amazing how simple clean understandable solutions to big problems can be the killer point – I certainly didn’t expect my little polynomial equations from Excel graphs method to be lauded so much in the Twittersphere. Lesson learnt though – I’ll try to come up with some more of those nuggets. The audience was great (thanks guys) and laughed at all my jokes =-)

Swingpants and his balls (photo Marc Thiele)

I love Joa Ebert‘s work but I have to confess I was vainly catching up on the twitter feed about my session rather than concentrating on Joa’s pres (sorry) but the improvement stats sound amazing. Seb Lee Delisle‘s presentation this year was immense. Great interviews with people across the web development world about the state of Flash, why people hate it and what kind of future Flash has. Seb has a lovely relaxed style and a great understanding of how to deliver in an entertaining way. He also has a conveyor belt of some sort if you hadn’t heard. Mind Candy finished the afternoon for me. I met up with the Moshi Monster’s gang a couple of years ago and since then they have become hugely successful. They explained about their Agile methods which seemed to go down really well. To finish the day off I managed to get along to Brendan Dawes session which was entertaining and very funny.

Attentive faces of an FOTB audience (photo by Marc Thiele)

I got asked to do the Jam Throwdown this year – a great honour. I was up on stage with Seb Lee Delisle, Iain Lobb, Andre Michelle, Robert Hogin and Julian Dolce. 10 mins each. John Davey had asked me to ‘blow the others off the stage’ – so I did literally or at least digitally. I put in a few hours the night before to pull it off – it seemed to work well. Seb’s crowd ‘beat capturing’ worked excellently and really got the guys going.
By all accounts Iain Lobb’s Zero to Game Designer in 60 Minutes was an amazing session – but I couldn’t get in. Ralph Hauwert‘s session introduced me to 2D and 3D depth fields – something I really need to look into. Ralph is inspired by reading a lot of Maths papers – makes me feel I should read a few more. (and learn to understand the syntax better). I went along to Frank Reitberger‘s presentation (another Elevator Pitcher from last year). Really nice graphical effects and explanation of his processes. Joshua Hirsch and Jared Tarbell wrapped up proceedings.

Another amazing few days. My inspiration batteries have been recharged and I’ll be looking to try and get back as a speaker again next year.

If you’re a Rich Media developer/Designer and haven’t been to Flash on the Beach then why not? It is the number #1 conference in Europe and you are pretty much guaranteed to make a whole host of new contacts.

[ Huge thanks to Brett Jephson @brejep for building a 3D tree model for me to blow up, and to Aidan O'Brien @scaryclown for designing some scenery to adorn my character explosion tests. Last but not least big big thanks to John Davey @FOTB for organising such an immensely successful conference(festival) ]