Archive for the 'Uncategorized' Category

26
Feb
12

Games for Kids: Flash vs HTML5 – Presentation Content

By swingpants 2 Comments
Categories: Actionscript, Conference, CSS, Flash, Flash Games, Games, HTML5, Javascript, References and Uncategorized
Tags: , ,

Here are the notes for the content of my FITC Amsterdam 2012 presentation Games for Kids: Flash vs HTML5. There are links here to some of the demos, notes and references.

I set myself the objective of learning best practice in game design using HTML5. To best discover all of the foibles and dark corners of this new technology I set myself the constraint of using NO libraries. I wanted to build a game that would work across many devices, and exhibit some sophistication. The presentation details the discoveries made on this journey, showing how I’ve optimised the game engines – and some of the hacks that I’ve felt necessary to apply.

Demo Panel for Session - Click through

While experimenting with HTML5 touch I found some Android devices had a terrible response. It took me a while to realise that it was my display method, Canvas, that caused the poor performance. Moving to displaying with DOM gave me a workable response on most devices.

Multi-touch Ball Physics

A first quick attempt at gameplay interaction was to build a simple ball physics engine. This gives many options in game design and allows for good utilisation of the major strength of mobile devices: touch input. Getting this to work across multiple devices and operating systems gave me confidence that I could achieve a consistency of performance.

Eggy Eggy Pig - visual design by Eloisa(9) & Lola(7)

With the help of my daughters, I set about designing and building a platform game. Eggy Eggy Pig. The requirement was for platforms and surfaces that could run at any angle, as well as spritesheet animations, triggered interactions, collectables and parallax scrolling. Of course control method was key too.

Optical Flow with Lucas Kanade (Flash)

After looking what can be done with HTML5, it is important to understand what can’t be done. Any game project should start with the question ‘what is the appropriate technology to achieve our objectives?’. In many cases the answer will not be HTML5. I show a couple of cases where Flash could be the only solution, including a look at Maestro Flash – a production implementation of the Lucas Kanade optical flow method.

References:

Advertisement
09
Feb
12

HTML5 Game Dev. Removing elements from the screen. Finding the fastest method.

By swingpants 2 Comments
Categories: Benchtesting, Code Snippet, Games, HTML5 and Uncategorized
Tags: , ,

Using removeChild to clear off a few in-game elements I noticed a bit of lag when testing on some devices so thought I’d better have a look at what the fastest removal methods are.

The three methods I selected to test were removeChild, display=”none” and a simple hide the element offscreen. Again, testing has been carried out at JSPerf.com.

My first test was on Chrome 16 and the results were pretty conclusive. display=”none” was very slow, and hide the element was by far the fastest – over 4 times faster than display=”none”.

So, conclusive proof – I should just hide my elements off the screen.

Err, no. I next tested Firefox 9.0.1. Ah, here removeChild was 2.5 times faster than both display=”none” and hiding the elements.

IE7.0 then. display=”none” and the hiding elements method were nearly 3 times faster than removeChild.

What about devices?
With Android 2.2 (Galaxy Tab 1) display=”none” was the fastest method, but only marginally so over the other two.

Safari on iPad #1 (4.2.1) flips the results on their head again with removeChild() being nearly 3 times quicker than the other two.

So how do we interpret this data? A chief decision to make would be what the target devices are. Then choose the quickest method. If we wanted a more generic approach then a series of conditionals would allow for all three methods to be present, using the most relevant one for the current browser.

For the prototypes I am working on, number one target is the iPad. A lot of my focus has been on trying to avoid using the Canvas element (entirely due to horrible performance on Android with it).

Element removal.

The (very simple) code used is here (for simplicity’s sake I use the inverse method as well to bring the element back onto the stage for subsequent removal):


var testDIV = document.createElement(‘div’);
testDIV.innerHTML = “Hello World”;

function displayIsNone()
{
testDIV.style.display=”block”;
testDIV.style.display=”none”;
}

function removeChild()
{
document.body.appendChild(testDIV);
document.body.removeChild(testDIV);
}

function moveVideo()
{
testDIV.style.left=”10px”;
testDIV.style.left=”-9999px”;
}

Try the tests yourself here: http://jsperf.com/removing-an-element-from-the-screen/3.

Categories

Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Swingpants at Flash on the Beach

Flash on the Beach 2009

Swingpants at FOTB2009