AS3 copying masked bitmap onto another bitmap - actionscript-3

I'm having a bit of a problem copying the masked only pixels from one bitmap onto another. Basically I'm masking bitmap A with bitmap B, which is working fine, but I'm unsure how to copy just the masked pixels onto Bitmap C which is the only one I want to keep.
//all this works fine
var _texture:Bitmap = new Bitmap(new Dirt_Bitmap);
var _mask:Bitmap = new Bitmap(new Mask_Bitmap);
var _planter:Bitmap = new Bitmap(new Planter_Bitmap);
_texture.cacheAsBitmap = _mask.cacheAsBitmap = true;
_texture.mask = _mask;
//This is where things get weird :[
var newBitmap:Bitmap = new Bitmap(new BitmapData(50, 50, true));
newBitmap.bitmapData.copyPixels(_texture.bitmapData, _texture.bitmapData.rect, new Point());
_planter.bitmapData.copyPixels(_newBitmap.bitmapData, _newBitmap.bitmapData.rect, new Point());
how would I go about just copying or drawing or maybe merg() just the masked texture so its copied over the planter graphic where the dirt should be? Any and all help will be greatly appreciated! :]

When you use copyPixels, you are actually copying the content of a bitmap without anything that's added by environment (no masking or transforms).
Use draw() instead.
Here's a sample:
var texture:Bitmap = new Bitmap(new BitmapData(200, 200, false, 0xFFFF0000));
var imageMask:Bitmap = new Bitmap(new BitmapData(200, 200, true, 0));
var rect:Rectangle = new Rectangle(0, 0, 10, 10);
imageMask.bitmapData.fillRect(rect, 0xFF000000);
rect.x = 50;
rect.y = 50;
imageMask.bitmapData.fillRect(rect, 0xFF000000);
texture.cacheAsBitmap = true;
imageMask.cacheAsBitmap = true;
texture.mask = imageMask;
addChild(imageMask);
addChild(texture);
var planter:Bitmap = new Bitmap(new BitmapData(200, 200, true, 0));
// that's it
planter.bitmapData.draw(texture);
addChild(planter);
planter.x = 100;

Related

How to scale BitmapData AS3?

I am editing an air application for a client, and he wants the images that you import to be scaled to 650x650 when you save them by using the code below. I tried changing the values but when the image is exported some part is missing:
function menuItemClick1(event:Event):void{
var mat:Matrix = new Matrix();
mat.scale(2.0,2.0);
var bmpData:BitmapData = new BitmapData(this.template_mc.width * 2, this.template_mc.height * 2, false, 0xFFFFFF);
bmpData.draw(this.template_mc, mat);
var _bmp:Bitmap = new Bitmap(bmpData);
_bmp.smoothing = true;
//
imgBytes = PNGEncoder.encode(_bmp.bitmapData);
fs = new FileStream();
targetFile = File.desktopDirectory.resolvePath("icons/image.png");
targetFile.browseForSave("Save Your File");
targetFile.addEventListener(Event.SELECT, onSaveSelect);
}
I tried changing to this with no luck:
mat.scale(1.0,1.0);
var bmpData:BitmapData = new BitmapData(650,650, false, 0xFFFFFF);
Calculate matrix scale ratio this way:
var mat:Matrix = new Matrix();
var ratio:Number =Math.min(650/this.template_mc.width,650/this.template_mc.height);
mat.scale(ratio,ratio);
var bmpData:BitmapData = new BitmapData(650, 650, false, 0xFFFFFF);
bmpData.draw(this.template_mc, mat);

As3 performance for Sprite beginFillBitmap vs addChild(bitmap)

Just a quick question:
which of the following method of create a sprite have quick rendering and less memory usage?
Add bitmap to the sprite
var sprite:Sprite = new Sprite();
var bitmap:Bitmap = new Bitmap();
sprite.addChild(bitmap);
vs
Draw rectangle and fill with bitmapData
var bitmapData:Bitmapdata = new BitmapData(100, 100);
var sprite:Sprite = new Sprite();
sprite.graphic.drawRec(0, 0, 100, 100);
sprite.graphic.beginFillBitmap(bitmapData:Bitmapdata);
sprite.graphic.endFill();
Thanks for any idea.
The first one is faster because vector rendering mathematics are required to fill your shape in the latter.
If you want noticeable (and I mean very noticeable) performance gains, you should have one Bitmap on the stage. What you do from there is store references to BitmapData to represent graphics, and sample those onto your one Bitmap via .copyPixels().
Example:
// This is the only actual DisplayObject that will hit the Stage.
var canvas:Bitmap = new Bitmap();
canvas.bitmapData = new BitmapData(500, 400);
addChild(canvas);
// Create some BitmapData and draw it to the canvas.
var rect:BitmapData = new BitmapData(40, 40, false, 0xFF0000);
canvas.bitmapData.copyPixels(rect, rect.rect, new Point(20, 20));

As3 draw bitmap + copyPixel around mouseX and mouseY

I am doing a magnifying glass effect?
I have a working version. However the performance is not good enough on the tablet.
What i have done so far:
I had a ENTERFRAME event on a mouseDown
So it start capture the screen when the mouse click down, and follow the mouseX and mouseY
It works, but the only problem it keep draw the whole stage rather than maybe (300px * 300px) around the mouseX and mosueY. is there a way i can make the draw area according to your mouseX and mouseY. I guess that would help the performance as well. :)
e.target.removeEventListener(Event.ENTER_FRAME, startCapture);
function startCapture(e:Event):void{
var glassWidth:uint=80;
var glassHeight:int=80;
var curBd:BitmapData;
var curBmp:Bitmap;
var posX:int = _parentStage.mouseX - 40;
var posY:int = _parentStage.mouseY - 40;
//-------------------------------------------------------------
//var subArea:Rectangle = new Rectangle(0,0,500,500);
//var newBmp:Bitmap = new BitmapData(500,500);
//var cutoutBmp:Bitmap = new Bitmap( newBmp, PixelSnapping.ALWAYS, true );
//cutoutBmp.bitmapData.draw( jpgSource, new Matrix(1, 0, 0, 1, -357, -341) , null, null, subArea, true );
//-------------------------------------------------------------
bd = new BitmapData(1024, 768, true, 0);
var subArea:Rectangle = new Rectangle(_parentStage.mouseX, _parentStage.mouseY, 500, 500);
// bd = new BitmapData(500, 500);
bd.draw(_parentStage.mc_mainContainer);
// bd.draw(_parentStage.mc_mainContainer);
curBmp=new Bitmap(new BitmapData(glassWidth,glassHeight), PixelSnapping.ALWAYS);
curBmp.bitmapData.copyPixels(bd,new Rectangle(posX,posY,_parentStage.mouseX,_parentStage.mouseY),new Point(0,0));
curBd=curBmp.bitmapData;
var ma:Matrix = new Matrix(1, 0, 0, 1, -40, -40);
glass.name = 'glass';
glass.alpha = 1;
glass.graphics.clear();
glass.graphics.beginBitmapFill(curBd, ma);
glass.graphics.drawCircle(0, 0, 35);
//glass.graphics.drawCircle(0, 0, 35);
glass.graphics.endFill();
//var imageCircle:Bitmap = new _magGlass();
//trace(_magGlass);
//glass.addChild(_magGlass);
if(!_parentStage.contains(glass))_parentStage.addChildAt(glass, _parentStage.numChildren - 2);
glass.x = _parentStage.mouseX;
glass.y = _parentStage.mouseY - 75;
}
Where your performance problem is coming from is where you're creating new bitmaps and bitmapdatas and rectangles on every frame. Instead, just create one or two in the constructor or on click and then reuse them. Since you already have a BitmapData, you can probably just put that on the stage and mask it, rather than using the graphics object in glass. At least pick one approach or the other. Doing both is killing you, performance wise.

how to set a bitmap as a mask

i want to apply a picture which contains transparent areas as a mask to a display object.
the mask only show the area which the mask has color.but in fact,the display object still show the whole area.so i convert bitmap to a vector image,that's solve the problem,but the convert method is horrible.
public static function createVectorImage(bd:BitmapData,colorKey:uint = 0):Shape{
if(bd==null){
return null;
}
var sh:Shape = new Shape();
var g:Graphics = sh.graphics;
g.beginBitmapFill(bd);
var beginPixel:int = -1;
var i:int,il:int,j:int,jl:int;
var value:uint;
for(i = 0,il=bd.height;i<il;i++){
for(j = 0,jl = bd.width;j<jl;j++){
value = bd.getPixel32(j,i);
if(value!=colorKey&&beginPixel==-1){
beginPixel = j;
}else if(value==colorKey&&beginPixel!=-1){
//draw rect
g.drawRect(beginPixel,i,j-beginPixel,1);
beginPixel = -1;
}
}
if(beginPixel!=-1){
g.drawRect(beginPixel,i,j-beginPixel,1);
beginPixel = -1
}
}
g.endFill();
return sh;
}
is there any way better than this?
You can convert your display object to a bitmap then apply a mask on it.
Convert you display object to a bitmap data:
var rect:Rectangle = displayObject.getRect();
var displayBD:BitmapData = new BitmapData(rect.width, rect.height, true, 0);
displayBD.draw(displayObject);
Apply the mask:
private static const ORIG:Point = new Point(0, 0);
private static function createBitmapDataWithMask(
baseBD:BitmapData, maskBD:BitmapData):BitmapData
{
var bitmapData:BitmapData;
bitmapData = new BitmapData(baseBD.width, baseBD.height, true, 0x000000);
bitmapData.copyPixels(baseBD, baseBD.rect, ORIG, maskBD, ORIG, true);
return bitmapData;
}
Display the bitmap data:
var bitmapData:BitmapData = createBitmapDataWithMask(displayBD, maskBD);
var bitmap:Bitmap = new Bitmap(bitmapData, "auto", true);
addChild(bitmap);
If you remove the bitmap from the stage, don't forget the free the bitmap data!
removeChild(bitmap);
bitmap.bitmapData.dispose();
bitmap = null;
Another option would be to use bitmap caching. It needs to be applied to the mask as well as the maskee:
var bd:BitmapData = new BitmapData(200, 200, true, 0x00000000);
bd.fillRect(new Rectangle(0, 0, 40, 40), 0xff000000);
var mask:Bitmap = new Bitmap(bd);
mask.cacheAsBitmap = true;
var maskee:Sprite = new Sprite();
maskee.cacheAsBitmap = true;
maskee.graphics.beginFill(0xff0000, 1);
maskee.graphics.drawRect(0, 0, 200, 200);
maskee.graphics.endFill();
maskee.mask = mask;
addChild(mask);
addChild(maskee);

Trying to capture stage area using BitmapData

I am trying to grab part of stage area using BitmapData and copyPixels method:
bmd = new BitmapData(stage.stageWidth, stage.stageHeight);
bmdRect = new BitmapData(320, 240);
rectangle = new Rectangle(360, 20, 320, 240);
bmdRect.copyPixels(bmd, rectangle, new Point());
bmd.draw(bmp);
bmp = new Bitmap(bmdRect);
var myEncoder:JPGEncoder = new JPGEncoder(100);
var byteArray:ByteArray = myEncoder.encode(bmd);
The result i get is an empty .jpg I m pretty sure that the error is in the Bitmap procedure and not the saving one...
Finally used this solution to copy part of the stage
(I copied everything that is on stage from (360, 20) and after)
var bitmapdata:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
bitmapdata.draw(stage);
var bitmapDataA: BitmapData = new BitmapData(300, 250);
bitmapDataA.copyPixels(bitmapdata, new Rectangle(360, 20, 320, 240), new Point(0, 0));
var myEncoder:JPGEncoder = new JPGEncoder(90);
var byteArray:ByteArray = myEncoder.encode(bitmapDataA);
Can't you just call bmd.draw(stage)?
var stage_snapshot:BitmapData = new BitmapData(600, 120);
var myRectangle:Rectangle = new Rectangle(0, 0, 600, 120);
var myMatrix:Matrix = new Matrix();
var translateMatrix:Matrix = new Matrix();
translateMatrix.translate(-100, -225);
myMatrix.concat(translateMatrix);
stage_snapshot.draw(stage,myMatrix,null,null,myRectangle);
var encoded_jpg:JPGEncoder = new JPGEncoder(100);
var jpg_binary:ByteArray = new ByteArray();
jpg_binary = encoded_jpg.encode(stage_snapshot);