Posts Tagged ‘js

05
Sep
12

Box of Delights. Fun for all the family.

For my session at the amazing Reasons to be Creative conference I will talk through three areas that BBC Children’s have developed for in the last year. These are Installations, Desktop Browser and Mobile. Each is a different journey of how to make games in that space.

In the installation section I’ll talk through the implementaion of optical flow for the Flash Maestro project – a collaboration with BBC R&D and the BBC Philharmonic. Also, I’ll talk through a similar implementation with a game made for Blue Peter’s Big Olympic tour. Code will be cracked open, and the experience demonstrated – fully interactively.

BBC Children’s have made some amazingly successful desktop browser games this year. I’ll describe the efforts, processes and game design decisions that have helped bring extra quality.

In the mobile space, my team have put in a lot of effort into investigating the mobile web. We researched optimal methods for rendering graphics, making physics lightweight and also how to develop against the way kids use devices.

With a great deal of opportunity in the HTML5/JS mobile web gaming space, I’ll describe findings, and offer tips on why, how and what agencies need to ‘skill up’ on to be successful.

‘Box of Delights’ is on in the Brighton Pavillion from 2.30pm to 3.30pm. Sept 5th 2012

This is going to be a lot of fun.

08
Feb
12

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

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




Categories

Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates


Follow

Get every new post delivered to your Inbox.