[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
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]));