[Flash 10]

Juillet 2011

BitmapPatternBuilder, a simple and usefull tool

/**
 * @author YopSolo
 */
package
{
	import flash.display.BitmapData;
	
	public class BitmapPatternBuilder
	{
	/**
	*
	* @parameter pattern:array, pixels position and color index.
	* @parameter colors:arrray, colors.
	* @returns BitmapData		
	* 
	var colors:Array = [0xFF000000, 0xFFFFFFFF];
	var pattern:BitmapData = build(BitmapPatternBuilder.HORIZONTAL, colors);
	* 
	* */
	    public static function build(pattern:Array, colors:Array):BitmapData
		{
			var bitmapW:int = pattern[0].length;			
			var bitmapH:int = pattern.length;
			var bmd:BitmapData = new BitmapData(bitmapW, bitmapH, true, 0x00000000);			
			for (var yy:int = 0; yy < bitmapH; yy++) {				
				for (var xx:int = 0; xx < bitmapW; xx++) {
					var color:int = colors[pattern[yy][xx]];
					bmd.setPixel32(xx, yy, color);
				}
			}
			
			return bmd;		
	    }
		
		
		// -- pattern		
		public static const HORIZONTAL:Array = [
		[1],
		[0]
		];
		
		public static const VERTICAL:Array = [
		[1, 0]
		];
		
		public static const DIAGONAL3x3:Array = [
		[1, 0, 0],
		[0, 0, 1],
		[0, 1, 0]
		];		
		
		public static const DIAGONAL_4x4:Array = [
		[0, 1, 0, 0],		
		[1, 0, 0, 0],		
		[0, 0, 0, 1],
		[0, 0, 1, 0],		
		];
		
		public static const STAR_5x5:Array = [
		[0, 0, 0, 0, 0],				
		[0, 0, 1, 0, 0],				
		[0, 1, 0, 1, 0],		
		[0, 0, 1, 0, 0],		
		[0, 0, 0, 0, 0]		
		];		
		
		public static const SQUARE_5x5:Array = [
		[0, 1, 0, 1, 0],				
		[1, 1, 0, 1, 1],				
		[0, 0, 0, 0, 0],		
		[1, 1, 0, 1, 1],		
		[0, 1, 0, 1, 0]		
		];	
		
		public static const CIRCLE_5x5:Array = [
		[0, 0, 1, 0, 0],				
		[0, 1, 0, 1, 0],				
		[1, 0, 0, 0, 1],		
		[0, 1, 0, 1, 0],		
		[0, 0, 1, 0, 0]		
		];			
		
		public static const WAVE_5x5:Array = [
		[0, 0, 0, 0, 0],				
		[0, 1, 0, 0, 0],				
		[0, 0, 0, 0, 0],		
		[0, 0, 0, 1, 0],		
		[1, 0, 0, 0, 0]		
		];			
		
		public static const GRID_5x5:Array = [
		[1, 0, 0, 0, 1],				
		[0, 1, 0, 1, 0],				
		[0, 0, 1, 0, 0],		
		[0, 1, 0, 1, 0],		
		[1, 0, 0, 0, 1]		
		];		

		// [0xFF121212,0xFF3e3e3e,0xFF696969,0xFFc0c0c0,0xFFe0e0e0,0xFFefefef,0xFFffffff]
		public static const DIAG_LIGHT_RIGHT_4x4:Array = [
		[3, 4, 5, 6],
		[2, 3, 4, 5],
		[1, 2, 3, 4],
		[0, 1, 2, 3]
		];				
		
		
		// [0xFF121212,0xFF3e3e3e,0xFF696969,0xFFc0c0c0,0xFFe0e0e0,0xFFefefef,0xFFffffff]
		public static const DIAG_LIGHT_LEFT_4x4:Array = [
		[6, 5, 4, 3],
		[5, 4, 3, 2],
		[4, 3, 2, 1],
		[3, 2, 1, 0]
		];
		
		// [0xFFf4f4f4,0xFFdfdfdf,0xFFc9c9c9,0xFF9f9f9f,0xFFffffff,0xFFeaeaea, 0xFFbebebe,0xFF6a6a6a]
		public static const LIGHT_TOP_4x4:Array = [
		[0, 4, 4, 0],
		[1, 5, 5, 1],
		[2, 6, 6, 2],
		[3, 7, 7, 3]
		];		
		
		// [0xFF7f7f7f,0xFF404040, 0xFFbfbfbf,0xFFFFFFFF]
		public static const LIGHT_4x4:Array = [
		[0, 2, 2, 3],
		[1, 3, 3, 3],
		[1, 0, 0, 3],
		[1, 1, 1, 0]
		];		
		
		//... create your custom patterns here...
	}
}

StreetFighter/Tron ArtWork from bosslogic

---

You can use this tool in many ways :
.you can add it on the top of another displayObject :

var shape:Shape = new Shape;			
shape.graphics.beginBitmapFill( BitmapPatternBuilder.build( BitmapPatternBuilder.GRID_5x5 , [0xFF000000, 0xFFFFFFFF] ) );
shape.graphics.drawRect( 0, 0, 256, 256 );
shape.graphics.endFill();
shape.blendMode = BlendMode.OVERLAY;
addChild( shape );

.You can apply a full or semi transparent pattern to any Bitmap with the copyPixels and take advantage of the alpha merge.

.You can also obtain cool result by using a transform Matrix when you draw your bitmap pattern.

.update 14/03/2014
Upscaling the background image can create a cool effect, thx to this tutorial

Before

After
for this effect i use this pattern :

public static const LIGHT_4x4:Array = [
[0, 2, 2, 3],
[1, 3, 3, 3],
[1, 0, 0, 3],
[1, 1, 1, 0]
];
...
shape.graphics.beginBitmapFill(BitmapPatternBuilder.build(BitmapPatternBuilder.LIGHT_4x4, [0xFF7f7f7f, 0xFF404040, 0xFFbfbfbf, 0xFFFFFFFF]));