Recently I was asked to investigate the potential for creating cinematic scenes in-game. These are different from pre rendered scenes as they utilise realtime 3D graphics, which has the advantage of being flexible and easily edited at the cost of visual quality. Creating these cinematic requires precise control over the animation and positioning of the various actors in the scene, commonly using curved paths to describe the motion of  these actors.

The solution I was investigating required these cinematics to be created in a 3D editor like Maya or Blender, both of which use cubic Bézier curves to create paths. Unfortunatly, Away3D, the 3D engine of choice for the game did not support cubic Bézier curves, only quadratic curves. If you are wondering what the difference is between cubic and quadratic Bézier curves, it is simple the number of control points the curve uses. Quadratic curves have three points – start, control and end – whereas cubic curves have four – start, control, control, end. The wikipedia entry for Bézier curves has some simple animations demonstrating the differences.

As you may have guessed the solution to this was to add support for cubic curves into Away3D. I simply duplicated the Path classes to CubicPath classes – adding the extra control point and changing the path functions to cubic. This worked well, but it resulted in the classes related to path operations being rather disjointed and inflexible – two animator classes for example. I therefore decided to refactor the path classes and abstract them using intefaces, which means there is now a single animator class, to which you pass an IPath interface or either a CubicPath or QuadraticPath.

Here is a simple demonstration of the new cubic and quadratic curve animations.

Currently, this work is residing in the ‘dev’ branch of my own fork of Away3D pending a pull request.

Been a long time since I’ve written anything. But that’s all set to change you’ll be glad to hear. For the past year or so I’ve been working at Mindshapes, developing a forthcoming game.
It’s been and interesting time, and I’ve learnt so many new things and used lots of new and exciting technologies. Away3D, AwayPhysics, Maven to name a few. In addition I’ve also developed a number of useful libraries and tools, some of which I thought I would start documenting here.

First up is the ColorMatrixMethod for Away3D 4.0. I developed this to answer a need to desaturated meterials on the fly. One approach could have been to create a desaturated bitmap texture for each coloured texture. However, this results in extra bitmaps to be loaded, and makes updating textures that much more of a pain.
Away3D already had a ColorTransformMethod, which uses the ColorTransform class as its input, but that doesnt facilitate desaturation, and doesn’t give the fine control that a color matrix allows.
The ColorMatrixMethod itself is pretty simple, it uses a ColorMatrixFilter as its input and only requires a couple of AGAL instructions to implement. However, using a color matrix is a bit recondite, so it really needs a wrapper for the ColorMatrixFilter which provides more tangible methods for manipulating the matrix – adjusting saturation, hue, contrast etc. A quick scan of the Internet threw up a fantastically useful ColorMatrix class, which is used to adjust the raw matrix data in a ColorMatrixFilter.
I’ve created a simple demonstration to show some of the methods capabilities.

Have you ever wondered how runtime shared libraries get into Flex? No? Well, neither did I. Lets face it, it’s not the hottest or most common thing to arise in the world of Actionscript development.

Today, however, I did have a need to understand the process. I’ve been tasked with building a system for a large game we are developing, which needs to load modules and RSLs. In a Flex application, this process is hidden as part of it’s initialisation – the SystemManager class handles this magic. Pass in the RSL URLs (try saying that quickly ten times) to the compiler, and it’s loads ‘em. Great for Flex, but not so great for us building Actionscript only projects.

My initial research focussed on the mx.managers.SystemManager which is ‘possibly the most important class in Flex’. This has the responsibility of booting up any Flex application. It is the factory class called from any Application subclass (subclass being very important, but more later).

If you look at the SystemManager class, you’ll notice that it has an info() method that returns an empty Object. If you look at other parts of the class, you’ll see it referring to data in the info Object (e.g. info()['rsls']). The odd thing is, is that the object info returns is always empty – return {}; – so whats going on?

It turns out that SystemManager is actually a base class that has subclasses automagically generated by the compiler. If you use the -keep compiler argument in a Flex project, you’ll see these generated classes. SystemManager implements IFlexModuleFactory, whose methods (including info()) are actually the ones generated. In the generated class you’ll see that the info() object now has references to some of the compiler arguments.

So, how do we retrieve this info() info in a non-Flex project?

After a little more research and experimentation I discovered it’s fairly simple. Firstly we need to create a factory which implements IFlexModuleFactory. In it’s most basic form, we only need to add a listen to an Event.COMPLETE from the loaderInfo, which then creates and adds the main application class. Also, this factory must extend Movieclip.

1
2
3
4
5
6
7
8
9
10
11
12

	public function Factory()
	{
		super();
		stop();
		loaderInfo.addEventListener(Event.COMPLETE, onComplete);
	}
 
	private function onComplete(event:Event):void
	{
		nextFrame();
		addChild(create() as DisplayObject);
	}

Simple enough. Since a subclass of this will be generated, we need do nothing with any of the other methods.

Now we need to use this factory. Following a similar method to creating a preloader we will use the Frame metadata. However, we can’t exactly follow this. In a seemingly odd move, we have to add the metadata to a superclass of the main application class, not the application class itself. I guess this is because in the flex world, a main application class extends mx.core.Application which has the metadata in it.
Therefore, we create a class that extends Sprite which acts as the application superclass, then extend this to create the actual application class

package
{
	import flash.display.Sprite;
 
	[Frame(factoryClass="factory.Factory")]
	public class ApplicationBase extends Sprite
	{
		public function ApplicationBase()
		{
			super();
		}
	}
}

I”ve created a simple project which demonstrates this. I’ve added a -runtime-shared-libraries compilier argument which you can see in the factory as info()['rsls'].

Of course, it isn’t just RSLs you can access, a quick look through the source of SystemManager will reveal others. I’m sure there are many other uses, and at the very least it gives an interesting insight into what the mxmlc compiler does.

Ok, in a decidedly odd tangent I’m going to post up recipes as well as any computery based posts. I love cooking, as much as I enjoy making things using computers, so why not feature both? Also, my memory for my own recipes is rubbish, so it serves a memory bank.

First up is something I thought up on the way home the other day. I was pondering classic, prosaic food done in an unexpected fashion. Lofty thoughts, but really I was in a Homer Simpson-esque food day dream. Mmm…sausages. Ok, enough of the dreaming, onto the real food.

Here’s a Moroccan-ish version of sausage and mash. It combines spicy kofte with a sweet spice-infused butternut squash mash. To got with it is a fresh mint and parsley pesto. It’s good with a simple chopped salad and a bit of yoghurt.

Sausages (well, kofte)

• 500g lamb mince
• 100g breadcrumbs
• 1 egg
• 1 tbsp Ras-al-hanout
• 1 tsp hot paprika
• 1 tsp sweet paprika
• 1/2 onion
• 1 clove garlic
• Parsley
• Kebab sticks – I use bamboo ones

Put the onion, garlic, parsley, spices in a food processor and run it for a little bit. Put this in a mixing bowl and add the meat, egg and seasoning. Mix it together for a bit, then add some of  the breadcrumbs. Mix it and add breadcrumbs until it starts to come together and feel doughy.

Once done, break it up into fist sized pieces. Roll each of these out into a rough sausage shape, and poke a stick through the middle of it (lengthways! it’s not a cocktail sausage). Carefully continue to roll it out until the whole thing resembles a shish kebab.

When they are all done, put them on a plate and into the fridge to harden up for  at least 20 minutes – this helps to stop them falling apart when cooking. If you can, prepare them a few hours in advance so they marinade and get even better. You can also freeze them.

To cook them, put them under a medium grill until they brown, roughly 15 minutes.

Squash mash!

• 1 butternut squash (or any squash really)
• Aromatic whole spices such as cloves, cinnamon, aniseed, cardamom, etc.
• Cumin seeds for garnish (optional)
• Lemon or orange zest
• Butter

You’ll need a saucepan with a steamer attachment. If you don’t have that, get McGyver-like and make up something using a colander. I’m unsure if you could use a bespoke steamer, the spices get added to the water so might interfere with it. It might be possible to boil it, but I’ve never done that – the spices will get mixed up with it unless you put them in a little muslin bag.

In the pan, add an inch of boiling water and put the whole spices in. Peel the squash and slice it into big chunks and put the chunks into the steamer basket. Let the squash steam for about 40 minutes, until it’s soft and squidgy. As it softens it absorbs the aromas of the spices. While it’s steaming, make the pesto and anything else you fancy.

When it’s cooked, put the squash in a colander and drain the water out of the pan and throw away the spices. Add the squash back into the pan, add a knob of butter, and zest. Mash it up, sprinkle over the cumin seeds. Done.

Mint and parsley pesto

• Bunch of fresh mint
• Bunch of parsley
• Whole almonds
• 2 clove garlic
• Good extra virgin olive oil

Toast the almonds in a dry pan until they get a bit of colour on them. Make sure they don’t get burnt, that tastes awful. When toasted use a big mortar and pestle to break them up into small chunks.

Chop up the herbs and put into the mortar and pestle. Finely chop the garlic and add it. Bash the ingredients together and add the oil a bit at a time until it’s texture is somewhere between a sauce and a paste, and hey presto! you’ve got pesto (groan).

The other day I found a pair of 3d glasses on my desk. You know, the red and green/blue ones which make you look like Dr Jacoby from Twin peaks…

…or not. I certainly don’t have such a splendid beard, or (seemingly) a fondness for listening to the cries of unborn chicks.

The glasses split from a copy of .NET magazine, advertising The Alien Abduction Lamp, whatever that is. They also seem to have been designed for someone with an alien head shape.

Being at a lose end, I pondered that philosophical question “Can I make an anaglyph animation in Flash in half an hour?”. 29 minutes later I had my answer – a resounding ‘Yes’. Heres the result.

It’s not perfect by any means, especially the code which is as bizarre and messy as the plot in season two of Twin Peaks.

Achieving the effect is pretty simple in principal. Each textfield (lets call it a virtual textfield) actually consists two textfields – red and cyan. These two textfields are moved together or pushed apart as the virtual textfield moves back and forth. The distance between the textfields is proportional to the z value of the virtual textfield.

One day I’d like to find a practical use for this and take it a bit further, but for no it can take it’s place in the archive next to the ‘Early 90′s TV series’ section.

..No, not a cheap rip-off of Blackhawk Down, but a badly named port of the highly useful lightweight markup Markdown. In reality it’s a direct translation of the JavaScript version Showdown.

The initial reason for this port is for an internal content editing tool I’m developing. I want to provide it as an alternative along side the Flex RichTextEditor control for fast content writing.

It’s at a very early stage at the moment – it’s more of a proof of concept working version. There are no optimisations and adaptations for Actionscript right now and it’s frankly quite ropey (look at those lovely ..rest parameters). Lot’s of changes and updates will follow. It’s also built as a static utility-type class which will change in the future. I just wanted to get it out there now.

Please have a look at Actiondown on GitHub and feel free to make rude comments about the name.

Today I encountered an odd issue using Ant and mxmlc, something I thought would be worth sharing to avoid pain for others. I was compiling projects using Ant within Flash Builder. I built most of them with no problems, except for one which just wouldn’t work. Rather than throw an error to give me some steer it just sat there and did nothing, hanging on the ‘Loading configuration file…’ message.
I eventually figured out it had something to do with embedding images using the [Embed] metatag. It didn’t matter what image or where, it would just stop working. Take out the Embed and it would compile fine. I tried compiling it using the normal Flash Builder setup and that also worked.
After searching the internet I found no similar issues reported, the nearest was references to java heap size and adding in JRE VM arguments. Even though I didn’t think it was this as I got no memory errors I thought I’d give it a go anyway.
I opened the ant Build Configuration and then the JRE tab to add in the VM arguments and noticed instead that for reasons unknown it was using JVM version 1.4. That didn’t sound right to me so I changed it to 1.6 and it, you’ve guessed it, compiled fine.

How annoying that was.

Heres a fun little adaptation on the motion detection work I did before. You’ll need a webcam for it to work, and wait a few seconds for the camera to activate and setup.

It’s created using the same base as the initial work I did. Every frame it randomly tests 100 or so pixels – if they are white (motion) it draws a circle, if black (no motion) it does nothing. These are then drawn onto another bitmap, which is blurred every frame, to give the fading blurred trail effect. I also apply a random color transform every few seconds which gives it the trippy look.

Ok, so it’s not really finger painting, more like ‘flail-around-like-a-fool’ painting, but at least your hands are paint free.

Continuing my recent posts of various experments, here is a little experiement about motion tracking and using a webcam (or any digital video camera). Admittedly there is nothing fantastically new here, it’s just my interpretation of a common approach. I got the gist of it from a description on the Flash Game programming course mentioned in previous posts, and decided to have a go at making it from scratch without reference to other sources.

It relys on comparing the difference between two bitmap snapshots of a video – one from the current frame, the other from the previous frame. These two images are combined using a difference blend mode which, as the name suggests, highlights the difference between two bitmaps. In this case the only difference is what moved between the two frames.

Difference blend mode

Once we’ve got the difference a bit of blurring is added to take out the background noise. Also, the contrast is increased to make the movement stand out a bit more.

The final stage is to threshold this image. Each pixel colour value is tested; if it’s above a certain level it’s converted to white, below the level it’s turned to black.

Threshold

Although this isn’t the most exciting looking thing in the world, it’s the foundation for lots of interesting things. It’s not too much extra work to find out the direction and speed of movement. I’ve already started using it in some pretty fun and interesting ways, which I’m sure will be the subject of a future post.

Below is the final working version, just click the ‘Allow’ button to let it use the camera, then wait a few seconds and wave furiously at the camera. If it doesn’t work, please believe it’s not a way to make you look like a fool madly waving at your computer. Or is it?…

A couple of weeks ago I attended the rather good Flash Game Training course in Brighton, run by Seb Lee-Delisle. Over the two days it covered most aspects of Flash game programming you’d expect using lots of examples. Along with being a highly useful course, there were a couple of aspect that really stood out to me, which are more to do with a way of thinking than specific technical details.

I’m with ‘Keep it simple, stupid’

One was a simple rule for making anything – don’t over complicate things. Even though there may a ‘perfect’ way of creating or solving something, it doesn’t necessarily make it the best solution. A lot of the time using a lateral approach is far more practical, though it’s easy to forget this.

In the modern warfare that is Flash we are armed with batteries of  application frameworks and platoons of unit tests. These are fantastially useful additions to our arsenal, but are often overkill and even restrictive in small applications, especially games. Having the freedom to play and experiment are essential to creating novel game experiences, a bit like going…

Back 2 School

After the course, I had a rush of playful energy. Playing around making games was like going back to my first encounters with Flash, when I was bombarded by crazy experiments, cool arty projects, and lots of other visual orgies. It’s been really refreshing to not to think of practicallities, or whether what I make has any real-world uses. It’s like doing letterpress work after years of InDesign or pencil drawing after knocking out Photoshop icons. It’s the reason I got into all this in the first place.

Although not a strict rule, I’m trying to complete each of these experiments within a few hours, just to keep the pace up. It’s too easy to start fiddling with code, or try to make it into an overly open tool or utility. So far I’ve kept up the energetic pace, and produced a fair few experiments, which I’m going to post over the next few weeks.

ASCII Webcam

First up is a classic ASCII art. Hardly original, but still fun to do. Rather than just a static image, I applied to a web-cam feed. Heres what it looks like, just click to ‘Allow’ button.

To achieve this I created an AsciiConverter class. It can take any input BitmapData object and convert it into an output BitmapData object. This means it can be used for any application using bitmaps, including video. Here’s the usage with the web-cam.

/*
AsciiConverter(input:BitmapData,
			output:BitmapData,
			charSize:int = 10,
			characters:Array = null,
			brightnessValues:Array = null,
			font:String = '_sans', isBold:Boolean = false)
*/
private function init():void
{
	//Get the camera
	camera = Camera.getCamera();
	camera.setMode(CAM_WIDTH, CAM_HEIGHT, 20);	
 
	//Create a Video object
	video = new Video(CAM_WIDTH, CAM_HEIGHT);
	video.attachCamera(camera);
 
	//inputData holds the video data
	inputData = new BitmapData(CAM_WIDTH, CAM_HEIGHT, false, 0);
	//outputData holds the processed data
	outputData = new BitmapData(CAM_WIDTH, CAM_HEIGHT, false, 0xFFFFFF);
	outputBitmap = new Bitmap(outputData);
 
	addChild(outputBitmap);
 
	//create the AsciiConverter
	asciiConverter = new AsciiConverter(inputData, outputData, 8, ['O', '~', '\'', ' '], [230, 128, 64, 0], 'Verdana', true);
 
	//update every frame
	addEventListener(Event.ENTER_FRAME, loop);
}
 
private function loop(event:Event):void
{
	//this runs every few seconds to set the stage fromaeRate to the camera, which
	//helps to make it run smooth.
	if (count++ % 60 == 0)
		stage.frameRate = (camera.currentFPS <= 10) ? 10 : camera.currentFPS | 0;
 
	outputData.lock();
 
	//draw the video to the input
	inputData.draw(video);
 
	//update the converter
	asciiConverter.update();
 
	outputData.unlock();
}

I’ve put up the code for the AsciiConverter up on my Google Code site, which I’ll get round to commenting properly. It’s a pretty fast method for doing this. It comfortably runs at 20fps on my PC, which is the maximum frame rate of the camera.