r3dux.org

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.

Sneaky!

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:

// NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!!!!!!!
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!

Cheers!

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

Read the rest of this entry »

My second attempt at recreating the PS3 XMB “wave” thingy in Flash – I’m thinking it’s not too shabby for purely using blurred 2D lines for the waves. I’m sure it could be fine-tuned to match up with the real XMB better, but for what I wanted this is fine.

And all using zero 3D, and zero splines/beziers.

Not bad for 7KB of Flash!

In the final week of the ActionScript intro we get into using sounds with ActionScript, and play audio which is external to our flash file(s), embedded within our flash files as well as covering topics like offsetting and repeating. We also create our own custom pause function (because weirdly, the functionality isn’t natively available).

This wraps up all the ActionScript stuff I taught over a brief course about a year ago, and I’ve got to say, I didn’t mind ActionScript 3 as a language at all. You can do a lot of nice bits and pieces with it which can be embedded directly on the web, or you can use it for some quick prototyping (although if you were prototyping some serious effects, you’d probably be more likely to do so in the processing language), so yeah. Glad I spent a month or so getting my head around it.

Download link: An Introduction to ActionScript 3.0 – Week 9
Audience: Beginners who know a little about variables, functions, objects and how to perform some basic programming math.
Format: PDF
Content License: The document, its contents and the provided source code are released under a creative commons non-commercial attribution share-alike 3.0 license by me (r3dux) and comes with no guarantee of correctness, fitness for purpose or anything of the sort. The audio samples used are the property of their respective owners and are used under a fair-use type of deal.

If you’ve followed the series of posts over time, or just stumbled across one week’s worth of notes and found it useful, then I’m happy I went to the effort – and if you’ve learnt something from them then even better

Cheers!

When it comes to programming, the devil is always in the details. In this case, I just wanted to add a MovieClip to the stage in a flash file, and then access that MovieClip’s instance properties to control some other instance stuff from within a class. Sounds simple, right? But could I do it? Could I ****. If you’re reading this, then there’s a good chance you’re in the same boat. Luckily for us both, it’s not too difficult to do at all. Here’s some simple proof of concept code to help you along:

Note: This first example uses a class called Ball. If you want to see it in action either download my pre-made code (Adobe Flash CS4 format), or just draw a circle or something, select it, convert to symbol (shortcut key: F8), tick the “Export for ActionScript…” checkbox and give it a class name of “Ball” (capital B) then use the following code to access instance properties of a given Ball object from within the class itself.

Main Flash File (.fla) Code

import Ball;
 
var myBall:Ball = new Ball(stage);
myBall.name = "myBall"; // If you don't set a name, you can't call getChildByName("THE-NAME")
myBall.x = 100;
myBall.y = 100;
stage.addChild(myBall);
 
var ball2:Ball = new Ball(stage);
ball2.name = "ball2";
ball2.x = 150;
ball2.y = 150;
stage.addChild(ball2);

Ball.as ActionScript File Code

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.display.Stage;         // Needed to use stages
	import flash.display.DisplayObject; // Needed for getChildxxx functions, which return a DisplayObject
 
	public class Ball extends MovieClip
	{
		// Per object instance variables
		// private var someVar:SomeType;
 
		// Static (shared) instance of what stage the balls are on (i.e. a reference to the main stage)
		private static var ballStage:Stage;
 
		// Constructor
		function Ball(theStage:Stage):void
		{
			// Set the stage the particles are on so we can use it to get details.
			ballStage = theStage;
 
			// Bind each particle to update once per frame
			this.addEventListener(Event.ENTER_FRAME, updateBall);
		}
 
		private function updateBall(e:Event):void
		{
			trace(ballStage.getChildAt(0)); // MainTimeline
 
			var tmp:DisplayObject = ballStage.getChildAt(1); // myBall
			trace("By getChildAt, x is: " + tmp.x);
 
			tmp = ballStage.getChildByName("ball2"); // ball2 - requires the built-in ".name" property to be set!
			trace("By getChildByName(blah): " + tmp.x);			
 
			// Move the balls around a little on the stage, just so we can see the properties change
			if (this.x >= 200)
			{
				this.x = 1;
			}
			else
			{
				this.x += 1;
			}
		}
 
	} // End of class
 
} // End of package

The trick is that we keep a reference to (or really a copy of) the main flash file’s stage handy by passing it into the constructor, so we can refer to it and get at any instances of anything on that stage to work with. Also, if we’re getting an instance by name, then we have to set the .name property! I thought you could just get it by the instance name itself (as in, the variables own name, not it’s .name property), but apparently not.

You might wonder why go to all this effort when we could just call this.x instead of ballStage.getChildByName(“SOME_NAMED_DISPLAYOBJECT”) or such in the above code, but the reason is that by jumping through these extra hoops we can access the properties of instances of other classes inside any other class. For example, if I had a Football class and a Player class, I could access the properties of a Football instance on the stage from within the Player class, or vice-versa.

To show a more concrete example, try using the cursor keys to move the attractor (just an instance of a MovieClip on the stage) around the below – the particles interact with the location of the attractor MovieClip, because I grab a copy of it by name (which is slower than by index from what I read, but this is just an example) and then move each particle instance from that information in the Particle class:

Full source for the above keyboard attraction example can be found: here.

Cheers!

In week 8 of the ActionScript intro we move on to collision detection and using hitTestObject to find out if two objects overlap, and what we should do about it if they have!

In this bundle I’ve combined both Week 8 Lessons 1 and 2 into a single document and provided the full source code to the exercises, but it’s recommended that you work through it yourself instead of just copying and pasting the code. I know typing in code isn’t fun, but by typing it rather than pasting it you get a far better idea of how everything fits together and you’re forced to think about the code and what it’s doing a lot more.

By the end of this tutorial, you’ll be able to build a simple Breakout/Arkanoid clone like this:

I’m not saying that it’s a fun game, but it’s starting to shape up – we’ve got functions, graphics, input and some basic collision detection. These are the tools you need to be able to write a proper game! We’re making progress! =D

Download link: An Introduction to ActionScript 3.0 – Week 8 (both lessons combined)
Audience: Beginners who know a little about variables, functions, objects and how to perform some basic programming math. You’re going to have to focus for this one – but you can do it!
Format: PDF
Content License: The document, its contents and the provided source code are released under a creative commons non-commercial attribution share-alike 3.0 license by me (r3dux) and comes with no guarantee of correctness, fitness for purpose or anything of the sort. The background was sourced randomly from the Internet last year and I’d be happy to add a correct attribution or remove it if it’s yours.

I’ve tarted up the breakout game above (from its more basic state as included in the download pack) to wait for a mouse click before starting, reset on click, and also reset when you lose the ball or break all the blocks, plus I’ve added a change in ball speed dependent on whether the ball hits the left or right side of the bat. The updated flash file can be found here – however, be warned that ALL THE CODE is in the same file, and it’s just bodged together to keep things as simple as possible while actually doing something vaguely useful. What I’m saying is – don’t write your stuff this way. When you write your awesome code use classes and methods and public/private access restrictions and do things properly! Also, faking mouse events is a sure sign of badly designed code, okay? I just used it to keep the code size down.

Honest