After talking to many engineers/programmers I am sort of shocked of their understanding of bits, bytes, hexadecimal and binary. They all use them but don’t really understand what is going on exactly. An understanding of bits is essential to game development (most peoples response to this is really??).

Let’s have a look at the number 256, it is a magical number. Let’s have a look at the relationship:

256 in hexadecimal is 0×100 and in binary is 1 0000 0000 (8 zeros). So what’s so magical about it. Well, 256-1 is 0xFF which is 1111 1111, all 8 bits are set, not quite magical yet. 256/2 = 128/2 = 64/2 = 32/2 = 16/2 = 8/2 = 4/2 = 2/2 = 1, so keep dividing by 2 gives you 1 exactly, nearly magical right? 256 can also be looked out in different ways, 2 pow 8 = 256 = 1<<8 (logical shift) = 256. 256 pow 4 = 4294967296 – 1 which we all know is the maximum 32 bit number 0xFFFFFFFF and in binary (32 x 1’s). Well I think it’s magical, perhaps you will one day.

So if we understand 255 (256-1) being 0xFF, that means if you stack 4 bytes together you get 0xFFFFFFFF (4294967295, ARGB, 32 bits set). Let’s say we want to break the number down into ARGB ( pixel, alpha, red, green, blue) components, we do it in this way:

var argb:uint = 0xFFFF8040; // full alpha, full red, half green, quarter blue
var alpha:uint = argb >> 24;
var red:uint = (argb >> 16) & 0xFF;
var green:uint = (argb >> 8) & 0xFF;
var blue:uint = argb & 0xFF;

Let’s break this down, what is argb >> 24? Basically it is moving the number down 24 bits:

1111 1111 1111 1111 1000 0000 0100 0000 (0xFFFF8040) >> 24
0000 0000 0000 0000 0000 0000 1111 1111 (0x000000FF) // result


And doing the same with the red >> 16:

1111 1111 1111 1111 1000 0000 0100 0000 (0xFFFF8040) >> 16
0000 0000 0000 0000 1111 1111 1111 1111 (0x0000FFFF) //result


Trouble with this is that the A part (Alpha) is still lingering above the red, this is where the & (bitwise And) comes in:
0x0000FFFF & 0x000000FF - this is not helpful, let's look at it in binary:
0000 0000 0000 0000 1111 1111 1111 1111
0000 0000 0000 0000 0000 0000 1111 1111
---------------------------------------
0000 0000 0000 0000 0000 0000 1111 1111

Why? Simply walk along the numbers if the bit is set in either then the result is bit set, if one value is 0 then the answer is 0. Perhaps you need more reading up on this http://en.wikipedia.org/wiki/Bitwise_operation.

0×000000FF >>8 = 0×0000FF00 (each digit is 4 bits, a nibble). Some crazy dude thought it would be interesting to use eating words for binary data, bit (1), nibble (1111) and byte (1111111), so why is an int not called a meal? Nevermind.

So how about some real usage, well I use these bits for collision filtering (a bit primitive, but essential to AS3 for performance):

var bPerson:uint  = 1<<0; // 1
var bBuilding:uint  = 1<<1; // 2
var bRock:uint  = 1<<2; // 4
var bBarrel:uint  = 1<<3; // 8
var bWall:uint  = 1<<4; // 16

Let’s say each object has one of these variables assigned to something called flags, so a barrel.flags = bBarrel:

flags = bBarrel; // 1<<8 16 0x08 1000
var _compareFlags:uint = bBarrel|bWall; // 24 0x18 1100
if ( _compareFlags & flags) // 1000 & 1100
<do something>

So instead of saying is it a barrel or is it a wall or is it a person etc. It’s a single line check. And you can pretty much use this everywhere you want to do this kind of comparison.

I hope this helps in your future game dev… good luck!

“The term particle system refers to a computer graphics technique to simulate certain fuzzy phenomena, which are otherwise very hard to reproduce with conventional rendering techniques. Examples of such phenomena which are commonly replicated using particle systems include fire, explosions, smoke… etc.”, Particle system (WikiPedia).

Particle systems have been around for years and there are many packages out there that you could use to generate effects etc. The only problem is that the size of your SWF file will grow significantly with generate bitmap sheets or files. In order to prevent this it is definitely worth an investment of time to create a system that suits your needs for effects (in my opinion).

Particles are moving displayed objects, given an initial position, a life and a delta (direction of movement). With these parameters they move on the screen in a fairly linear path, this is where attractors come in. Attractors can affect the particle’s delta (they could do more, i.e. change it’s color or spin it, etc.) sending them flying in different directions. Attractors can push particles away from its center or attract them towards its center.

Well it is a little tricky to get so many particles moving around and then on top of that, applying attractors could also slow the process down to a halt.

With the use of Space partitions and some very simple maths it is possible. The example demo only demonstrates the basics of attractors and particles. Have a play and create some cool effects.

Run Particle demo

I wasn’t blessed with the ability to draw, I have tried and tried to teach myself but I don’t wake up in the morning thinking about drawing stuff or creating art assets for games, however I do wake up thinking about what cool things to program today. So I taught myself to model 3D art and created a neat little program (made in Flash) to import a 3D model/scene, apply animations and textures and output a 2D sprite sheet to be used in my games. I want something to take this (from Sketchup):

(Creating models can be fairly simple when your looking at simple models (it gets a little harder with higher detail graphics). Put a few joints in and a simple texture… it looks OK.)

So I want to take the above model and turn it into this:

This is the output file from FL3D, it renders all the frames from the animation onto a simple bitmapData object and then saves it as a PNG using the Adobe encoders. I cheated a little and added the details of the sprite sheet on to the end of the png file, keeps it all together nicely so that I can embed it quickly in AS3.

Have a look, if you have a better solution or a product you know of that performs the same task, then please let me know!

Run FL3D demo

The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970. It is a widely known example of a cellular automaton… Conway’s_Game_of_Life (wikipedia).

Recently I was invited to talk to a group of programmers at Spil games in the Netherlands. As homework I challenged the group and myself to create an implementation of Life.

Life has fairly simple rules:

1. Any live cell with fewer than two live neighbours dies (under-population).
2. Any live cell with more than three live neighbours dies, (overcrowding).
3. Any live cell with two or three live neighbours lives on to the next generation.
4. Any dead cell with three live neighbours becomes a live cell (reproduction).

Anyway on to the implementation: The task was to create 1000 x 1000 simulation of life (a 1000 x 1000 bitmap), a total of 1 million pixels, and make it run at more than 25fps. My initial thought was impossible, however what it is a challenge without considering the impossible and if something impossible was made possible, well you know how that feels. So as always I looked at my options and came up with three:

Try #1 – Processing each cell individually: Process each cell individually, go through each individual cell and process them one by one. 1,000,000 pixels, processing them, in AS3… no chance, the frame rate would drop and probably, at a guess,  run at 1 frame per second. I tried it and it was about that.

Try #2 -Pixel bender shader: The pixel bender – yeah, this is has got to be it… no again, something that is meant to be fast, is not that fast. This was the first time looking at it, so perhaps my usage was incorrect, I will certainly be spending more time investigating it. But for now…

Try #3 – BitmapFilter: It is now 3am in the morning and I was pulling my hair out over the Pixel Bender. And then it hit me, what is the key thing in life that slows things down: counting the adjacent pixels. So I thought, which native filter could give me a helping hand here? Ah, the convolution filter could do this, could it, omg yes it can, see ConvolutionFilter (Adobe livedocs).

You can work out the rest!

Run Life demo

View LifeFilter class