Archive for the 'Javascript' 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
21
Feb
12

Games for Kids. Flash vs HTML5

By swingpants 2 Comments
Categories: Actionscript, as3, Conference, Flash, Flash Games, Games, HTML5 and Javascript
Tags:

For my session at FITC Amsterdam 2012 I’ll be talking about making games for kids.

More and more, mobile devices are allowing people to visit our websites away from the desktop. The sites that I work on chiefly consist of games (Flash) and video content (delivered via Flash). This means that mobile devices without Flash will only be able to gain access to a very small amount of content. To improve this situation we are looking at broadening our game content to include HTML5 builds.

HTML5 has a great deal of promise, and in the future we will be able to achieve amazing things within the browser. But what about now? What can be achieved on the current crop of those mobiles and tablets that are available to children?

To explore the development of HTML5 games, I set myself the task of building whole game prototypes with NO libraries. Here, I felt the best way for me to discover and analyse the issues was to code raw.

With a target of mobile and tablet devices I figured that I’d need to hand-roll my own highly performant physics systems, and I wanted this to be fairly sophisticated. I will describe my methods with code and visual examples.

Throughout the session I’ll detail my discoveries. What are the most optimal ways to achieve cross (mobile) browser game builds? How do you achieve high performance on low spec devices? How do you optimise assets? What tools are good to use?

I’ll look at what we can and can’t do with HTML5 – some of the exciting possibilities and some of the game related (currently)missing features.

Also, what next for the mobile technology and gaming? HTML%, Apps or the cloud?

I’ll be posting the session content – game prototypes and performance tests – here on the GameLab before my FITC Amsterdam session.

07
Feb
12

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

By swingpants 2 Comments
Categories: Code Snippet, Conference, CSS, Games, HTML5 and Javascript
Tags: , , ,

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.

02
Nov
11

Creative Javascript – 3D Tree with Leaf-fall

By swingpants Leave a Comment
Categories: 3D, Effect, HTML5, Javascript and Mathematics
Tags: , , , ,

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).

creativeJS

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

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