Emanuele Feronato

Talking about Actionscript 3, Flash and Game development.

Some years ago I showed you how to use the AS3 Color Matrix Filter in the post Understanding AS3 ColorMatrixFilter class, and since then a lot of sites around the web are showing how to manipulate image colors with this technique.

Today I am giving you a tip about the use of ColorMatrixFilter class in tile based games. Imagine a tile based game with a lot of tiles of the same kind, like A Blocky Christmas.

Placing tens of tiles with the same image or color will make your level look flat, that’s why most developers use to draw more textures for the same tile and place them randomly on the stage to give the level a better look.

That’s the same thing you can do with ColorMatrixFilter class, look at this script:

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.filters.ColorMatrixFilter;
	public class Main extends Sprite {
		var randomness:Number=1;
		var randomRange:Number=0.2;
		var tileCanvas:Sprite=new Sprite();
		public function Main() {
			addChild(tileCanvas);
			for (var i:Number=0; i<20; i++) {
				for (var j:Number=0; j<15; j++) {
					var tile:Tile=new Tile();
					addChild(tile);
					tile.x=32*i;
					tile.y=32*j;
				}
			}
			stage.addEventListener(MouseEvent.CLICK,generateTiles);
		}
		private function generateTiles(e:MouseEvent):void {
			removeChild(tileCanvas);
			tileCanvas=new Sprite();
			addChild(tileCanvas);
			for (var i:Number=0; i<20; i++) {
				for (var j:Number=0; j<15; j++) {
					var tile:Tile=new Tile();
					addChild(tile);
					tile.x=32*i;
					tile.y=32*j;
					if (randomness>Math.random()) {
						var colorMatrix:Array = new Array();
						var colorOffset:Number=Math.random()*randomRange;
						colorMatrix=colorMatrix.concat([1-randomRange/2+colorOffset,0,0,0,0]);
						colorMatrix=colorMatrix.concat([0,1-randomRange/2+colorOffset,0,0,0]);
						colorMatrix=colorMatrix.concat([0,0,1-randomRange/2+colorOffset,0,0]);
						colorMatrix=colorMatrix.concat([0,0,0,1,0]);
						var finalFilter:ColorMatrixFilter=new ColorMatrixFilter(colorMatrix);
						tile.filters=[finalFilter];
					}
				}
			}
		}
	}
}

The first highlighted code just places some Tile sprites on the screen, while the second places them and applies small random changes to the colors.

Look at the result:

At the first run, you’ll see a flat, plain bunch of tiles. Click on the movie with the mouse to randomly generate a new level using Color Matrix Filter on Tile sprite.

Download the source code.