Philip Thonbo
Creative / Game Designer at Nozebra
DisplacementMapFilter(mapTexture:Texture, mapPoint:Point = null, componentX:uint = 0, componentY:uint = 0, scaleX:Number = 0.0, scaleY:Number = 0.0, repeat:Boolean = false)
// Embed the texture: [Embed(source="../assets/bg.jpg")] public static const BG:Class; private var _bg:Image = Image.fromBitmap(new BG()); private var dTexture:RenderTexture; private var dFilter:DisplacementMapFilter; dTexture = new RenderTexture(800, 600); dTexture.draw(mapQuad); dFilter = new DisplacementMapFilter(dTexture, null, BitmapDataChannel.RED, BitmapDataChannel.GREEN, 255, 255, false);
content.filter = dFilter;
private var dTexture:RenderTexture;
private var dFilter:DisplacementMapFilter;
private var dropMatrix:Matrix
private var drawContainer:Sprite = new Sprite()
private var dropsArray:Array = new Array()
function start(){
dTexture.draw(grayQuad) // DISPLACEMENTS ALWAYS NEEDS 0x808080 as "transparent" - so we start of by making shure out map is clean
grayQuad.alpha = 0.1
drawContainer.addChild(grayQuad)
for(var i:int = 0; i<NUM_DROPS;i++){
var thisDrop:Image = Image.fromBitmap(new Drop());
dropsArray[i] = thisDrop
drawContainer.addChild(thisDrop)
thisDrop.alpha = 0
// SET THE DROP IN MOTION
TweenMax.fromTo(thisDrop, MathUtils.randRange(1, 3), {x:Math.random()*_bg.width, y:Math.random()*_bg.height, alpha:1, scaleX:MathUtils.randRange(0.1, 0.5), scaleY:MathUtils.randRange(0.1, 0.5)}, {bezier:makeBezierWiggle(), delay:MathUtils.randRange(0.5, 1), y:"+"+String(int(MathUtils.randRange(50,200))), alpha:0.00, onComplete:onDropTweened, onCompleteParams:[thisDrop], ease:Quart.easeIn})
}
dFilter = new DisplacementMapFilter(dTexture, null, BitmapDataChannel.RED, BitmapDataChannel.GREEN, 200, 200, false); // THIS IS WHERE THE MAGIC HAPPENS
content.filter = dFilter;
}
addChild(drawContainer)
private function frameHandler(event:EnterFrameEvent):void{
dTexture.draw(drawContainer)
}
protected function onTimer(event:TimerEvent):void{
///////////////////////
// !!! HACK !!!
// here i clean up.. just drawing grayquad ontop of the map
// just to whipe the tails of the drops once in a while
// try without and see how crazy it looks after 30 sec - interesting side-effect
// I tried tweaking the fadeoutvalue with colormatrix filter
// forcing everything into 808080 by a 1% pr frame - no luck
// it wont fade comletely to gray 100% as in old days "shader bug" i guess
///////////////////////
grayQuad.alpha = 1
dTexture.draw(drawContainer)
grayQuad.alpha = 0.1
}
private function onDropTweened(thisDrop:Image):void{
// moving the drops with a wiggle effect from bezier
TweenMax.fromTo(thisDrop, MathUtils.randRange(1, 3), {x:Math.random()*_bg.width, y:Math.random()*_bg.height, alpha:1, scaleX:MathUtils.randRange(0.1, 0.5), scaleY:MathUtils.randRange(0.1, 0.5)}, {bezier:makeBezierWiggle(), delay:MathUtils.randRange(0.5, 1), y:"+"+String(int(MathUtils.randRange(50,200))), alpha:0.00, onComplete:onDropTweened, onCompleteParams:[thisDrop], ease:Quart.easeIn})
}
private function makeBezierWiggle():Array{
var localArray:Array = []
var iterations:int = MathUtils.randRange(5, 10)
for(var i:int = 0; i < iterations; i++){
var localObject:Object = new Object()
var localValue:Number = MathUtils.randRange(-5, 5)
var localString:String
if(localValue < 0){
localString = String(localValue)
} else {
localString = "+"+String(localValue)
}
localObject.x = localString
localArray.push(localObject)
}
return localArray
}
var Xobj:Object = {Xvalue:85};
var bmp:BitmapData = new BitmapData(_mask.width, _mask.height, false);
var offArr:Array = [new Point(0.1, -0.1),new Point(-0.1, 0.1)];
bmp.perlinNoise(30, 30, 1, int(Math.random()*100), true, true, 1, true, offArr);
var bm:Bitmap = new Bitmap(bmp);bm.blendMode = 'overlay';
_mask.addChild(bm);
_mask.blendMode = 'alpha';
var myColorFilter:ColorMatrixFilter = new ColorMatrixFilter();
_mask.addEventListener(Event.ENTER_FRAME, onFrame);
function onFrame(e:Event):void{
offArr[0].x += 0.1;
offArr[0].y += -0.1;
offArr[1].x += -0.1;
offArr[1].y += 0.1;
bmp.perlinNoise(30, 30, 1, int(Math.random()*100), true, true, 1, true, offArr);
myColorFilter.matrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,-28.333333333333332, -28.333333333333332, -28.333333333333332, Xobj.Xvalue,0];
this.filters = [myColorFilter]
};
TweenMax.to(Xobj, 5, {Xvalue:85, ease:Power3.easeOut});
myColorFilter.matrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,-28.333333333333332, -28.333333333333332, -28.333333333333332, Xobj.Xvalue,0];
this.filters = [myColorFilter]
};
TweenMax.to(Xobj, 5, {Xvalue:85, ease:Power3.easeOut});
the matrix is basicly what your contrast is. In this ex. 85 devided by 3(colorchannels) in negative - and then use that as the variable turning it up and down so the variables in the whole matrix subtracts eachother (disregard the first 15 slots)
myColorFilter.matrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,-28.333333333333332, -28.333333333333332, -28.333333333333332, Xobj.Xvalue,0];
private var dTexture:RenderTexture; private var dFilter:DisplacementMapFilter; // init mapQuad = new Quad(256, 256, 0x808080, false); dTexture.draw(mapQuad); // set content ready content.addChild(_bg) content.addChild(heroArm.display as Sprite) addChild(content) // init filter dFilter = new DisplacementMapFilter(dTexture, null, BitmapDataChannel.RED, BitmapDataChannel.GREEN, 100, 100, false); //add filter content.filter = dFilter; // if update map //draw displayobject (starling sprite) dTexture.draw(mapsContainer) // reset map dFilter.mapTexture = dTexture private function getSnapValue(arr:Vector.
, value:Number):Number { var diff:Number = 999999; var closest:Number = 0; for (var c in arr) { var r1:int = (value >> 16) & 0xff var r2:int = (arr[c] >> 16) & 0xff var g1:int = (value >> 8) & 0xff var g2:int = (arr[c] >> 8) & 0xff var b1:int = value & 0xff var b2:int = arr[c] & 0xff //3D pytagoras var d:Number = Math.sqrt(Math.pow(((r2-r1)*_red.value),2) + Math.pow(((g2-g1)*_green.value),2) + Math.pow(((b2-b1)*_blue.value),2)) //30 //59 // 11 if (d < diff) { diff = d; closest = arr[c]; } } return closest; }
By Philip Thonbo