Create better-looking tile based games with AS3 Color Matrix Filter

February 13, 2013 • Actionscript 3, Flash, Game design by Emanuele Feronato • 5 Comments

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];
					}
				}
			}
		}
	}
}

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.

Rate this post: 1 Star

(12 votes, average: 3.75 out of 5)

Loading ...

Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 5 comments

daylyn

on February 19, 2013 at 8:54 am

a nice job!!!! thks!
Maras

on February 19, 2013 at 10:50 pm

Very nice! (As always)

Thanks for sharing, and thanks @AdobeFlashPro for tweeting it :-)
Bence Dobos

on February 20, 2013 at 6:31 pm

Played with it a bit here: http://wonderfl.net/c/w93c
Bence Dobos

on February 21, 2013 at 12:40 pm

Here is the exact same thing but with ColorTransform: http://wonderfl.net/c/b8Ak
bleedinghorse

on March 9, 2013 at 12:04 pm

a very interesting piece of code !
thanks indeed

Emanuele Feronato

italian geek and PROgrammer

Create better-looking tile based games with AS3 Color Matrix Filter

This post has 5 comments

daylyn

Maras

Bence Dobos

Bence Dobos

bleedinghorse