2D Fire Effect in ActionScript 3

I had a little bit of time today to do some me-coding (as opposed to work-coding), so I knocked up a quick 90’s era 2D fire effect. I’d actually written it C++ and OpenGL the other week and was meaning to transfer it into WebGL so it can run live rather than having a captured video, but my WebGL kung-fu is pretty weak at the moment so just to get it done I translated it to Flash.

How it works

The effect itself is incredibly simple, as the video below explains. You randomly add “hot-spots” to the bottom of the pixel array, then the new temperature value for a pixel is just the average of the pixel and the 3 pixels below it with a small amount subtracted so that the flames “cool”, which you then map to a colour gradient.


Flash implementation

In the OpenGL version I’d made the colours for the flames into a 1D texture which can be easily interpolated, but I had to find some functions to do that in AS3 as there don’t appear to be 1D textures! Also, getting and converting the colours from uints and hex-codes and stuff was a pain – but I finally nailed it after googling around and pulling functions from various places (referenced in the source).

I think the most important thing I learnt from getting this working in Flash was how to and how NOT to convert colours from uints into red/green/blue components. For example, a lot of code online will use a function like the following to convert red/green/blue values into a 24-bit uint:

function rgbToUint(red:uint, green:uint, blue:uint):uint
	var hex = "0x" + red.toString(16) + green.toString(16) + blue.toString(16);
  	return hex;

The above function looks like it works, and in fact in most cases does work – but if you get single digit values they aren’t zero-padded properly and craziness ensues!

The correct way to convert RGB to uint is by using the two functions below which ensure that values are capped AND zero-padded as appropriate, which means that everything works under all possible conditions:

function convertChannelToHexStr(hex:uint):String
	if (hex > 255)
		hex = 255;
		//trace("hex val overloaded");
	var hexStr:String = hex.toString(16);
 	if (hexStr.length < 2)
		hexStr = "0" + hexStr;
	return hexStr;
function getHexColourFromRGB(r:uint, g:uint, b:uint):uint
	var hexStr:String = convertChannelToHexStr(r);
	hexStr           += convertChannelToHexStr(g);
	hexStr           += convertChannelToHexStr(b);
	var strLength = hexStr.length;
	if (strLength < 6)
		for (var j:uint; j < (6-strLength); j++)
			hexStr += "0";
	var finalStr = "0x" + hexStr;
	return finalStr;

Wrap up

Overall, it’s a nice simple effect – but it’s pretty CPU intensive. In the above example I’m only using a stage size of 250px by 120px and the framerate takes a hit even then.

I could use a single loop instead of embedded x and y loops, and I could manipulate more colours directly as uints rather than pulling out the RGB components, but it’s prolly not going to improve more than about 10-15%. As usual, there’s source code after the jump, so if you have a play with it and manage to speed it up a bunch, feel free to let me know how you did it!


Download Link: 2D-Fire-Effect.fla (Flash CS4 fla – but CS5 and later will convert on load).

Continue reading 2D Fire Effect in ActionScript 3

ActionScript 3.0: A Simple StarField

I’ve been pootlin’ about with Flash a little behind the scenes of late, just making the occasional graphical trinket, and it struck me that I hadn’t made a starfield yet in ActionScript – so I knocked together a quick and dirty one in about 20 minutes…

The “star” itself is just a really small, white circle – so small that it turns into a single-pixel block with filtering on it – you can change out the symbol to anything you like, or just draw actual points if you wanted to – I’m happy enough that the guts of it work and will leave it alone and re-use the code when I want the effect sometime…

Source code after the jump if that’s your thing…

Continue reading ActionScript 3.0: A Simple StarField

ActionScript 3.0 Particle Systems #6: Particle Attraction

More ActionScript… This time we’re attracting the particles towards the mouse cursor when the distance between them is low enough… Looks alright, just a kinda fun effect & dead simple to code.

Source code and flash files on the flipside…

Continue reading ActionScript 3.0 Particle Systems #6: Particle Attraction

ActionScript 3.0 Particle Systems #5: Smoke Effect

I’ve basically spent the day trying to get this one right, and it’s not too bad, although it’s pretty heavy on the CPU. Really, you want about 150 particles and a slower fade out, or 150 particles and add two per frame instead of just one, but on my rig it’s getting jerky with that many particles, so in the animation below we’ve got 80 particles as a compromise =( Also, because we’ve only got 80 particles I’ve deliberately ramped up the alpha decay (i.e. how quickly the particles fade out) and upped the vertical speed to get them off the stage before the particle is forced to vanish by our particle limit. If you put the mouse cursor right down near the bottom of the stage and look at the particles at the top you’ll just catch them vanishing instead of fading out fully, but these are the compromises we make for a smoother framerate ;)

If it’s running poorly on your machine, try right clicking on the stage and lowering the quality, or just grab the files from after the jump and mess around in Flash CS4 (free trials available) with all the different variables (especially the ones that start with min or max!!).

I’ve set the window-mode to use GPU acceleration on this one, so if nothing displays and you’ve got an older graphics card (and you want to see it), just view the source code for this page, grab the object section and change wmode=”gpu” to wmode=”direct”.

Credits: LearnFlash.com’s particle systems vids for the how-to, kaioa.com for the FPSCounter Class, and me for coding it up and running with it!


Update: I’ve modified the above example to use the RateController Class I wrote yesterday. Aside from adding a RateController object, the only other modification was adding a listener to toggle the animation on a MOUSE_LEAVE event (cursor leaving the stage), and then changing the toggleAnimation function to wait for a click (and not MOUSE_MOVE i.e. cursor returns to stage) before adding particles again. Too easy… :)

Update 2: Many thanks to Joel for pointing out that in my zeal to optimise things I’d actually added some null pointer errors as well as some extra fps, and for correctly suggesting that using Sprites instead of MovieClips would result in a small speed boost, too. The swf file above and code & zip file below have received suitably stern words, and everything now works (relatively) swiftly and error free.

As usual, source code and flash files after the hop skip jump…

Continue reading ActionScript 3.0 Particle Systems #5: Smoke Effect

ActionScript 3.0 Particle Systems #4: Bubbles

Yet more ActionScript 3.0 again! This time it’s a kind of 2D particle fountain. New in this iteration is code so we can pause and resume the animation instead of just start/stopping it, and each bubble’s colour gets subtley modified via colorTransforms.

Last one for the day methinks – I’m knackered. Happy, but knackered :)

As usual, source code and flash files after the jump for those of a particularly masochistic bent…

Continue reading ActionScript 3.0 Particle Systems #4: Bubbles