I'm gonna force a BitmapData smooth.
but I can't do BitmapData.draw() because the performance of application.
If I draw Bitmap, the application slow down to next step.
(this is on flex mobile)
so I need how to force bitmapData smooth without redraw bitmapData.
(also, I can't use Bitmap(bitmapData).smoothing)
what can I do for this?
You're assuming the only way to smooth the pixels in a bitmapData is by re-drawing the bitmap container with the smoothing boolean set to true in BitmapData.Draw().
Solution is to set smoothing on the container Bitmap object itself, not the internal bitmapData. Later you can always update the bitmapData but the Bitmap object will always be smoothed.
Logic is something like below :
var myBMPData : BitmapData = new BitmapData(320, 240);
myBMPData.draw( someThing ); //just draw, no smoothing here for BitmapData
var myBMP : Bitmap = new Bitmap( myBitmapData );
myBMP.smoothing = true; //use smoothing on Bitmap that holds bitmapData
addChild(myBMP);
Related
I'm trying to mask a Bitmap object with another Bitmap, but so far with actual success.
There's a jsfiddle by Lanny, but it involves a Shape object being the mask, so my questions are:
Can you use an alpha channel from another bitmap to mask a createjs Bitmap object?
Is it possible to use an alpha channel from a png image as a mask?
#bks's comment is correct. You can use AlphaMaskFilter to use one image to mask another.
From the docs: http://createjs.com/docs/easeljs/classes/AlphaMaskFilter.html
var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.filters = [
new createjs.AlphaMaskFilter(box.cacheCanvas)
];
bmp.cache(0, 0, 100, 100);
Ensure you cache the bitmap after applying the filter. Keep in mind filters can be slow, so don't update it every frame.
Cheers.
I have an AIR application that I'm working on in which I would like to basically get a bitmap of what's going on in a separate spark window. The use case is a scaled preview of the spark window that will likely be on a projector to the main display. I want to pump the bitmap into a spark image as a source. Googling this doesn't seem to reveal much or I just don't what terms to google. Can anybody point me in the right direction? Anybody have a better way to accomplish this?
Thanks!
If you would like to make a bitmap of some DisplayObject, be it the whole window (stage) or just a Sprite, you should use the BitmapData's draw() method.
The following code will take a "screen shoot" of the whole stage, make a bitmap image of it and add it scaled to the top left corner:
var bd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
bd.draw(stage);
var bitmap:Bitmap = new Bitmap(bd);
bitmap.width = 300;
bitmap.scaleY = bitmap.scaleX;
addChild(bitmap);
It would benefit you to read more on Bitmap and BitmapData to utilize such features as:
Pixel snapping
Smoothing
Transparency
and others. For example smoothing is something that would make the image look better when scaled, but it counts as a filter and can be a performance hitter. That's why it would be better to apply smoothing on the bitmapdata when drawing (drawing scaled image is done with the matrix), not on a bitmap; but only when you don't plan to scale the image during runtime.
Hope that answers your question!
I got an swf that has SimpleButtons in the stage, and I need to get the bitmap or bitmapdata information from the button states.
When I load the symbol, it seems that no matter what composes the button states, they are all shapes, at least that's what I get in the expression panel.
So, how can I get the bitmap or bmpdata from a Shape?.
Thanks.
You can use BitmapData#draw() to get BitmapData from any DisplayObject. BitmapData is raster, so be aware you will lose features of the vector Shape
var bd:BitmapData = new BitmapData( shape.width, shape.height );
bd.draw( shape );
If you're targeting FP 11.6 I'd use the method graphics.readGraphicsData as explained here http://www.bytearray.org/?paged=6
I am working on a mobile game using Flash CS6 with AIR. also design and coding on same platform (not using starling etc.).
I am converting movieClips (static, not animated) to bitmap dynamically and its working fine. But i realize with this process bitmapData caching on memory and with big shapes it takes a lot of memory. Then i decide to after added to stage clear to bitmapData by dispose(). But its removes from stage and anywhere its shown.
My code;
var target:MovieClip = new Ex_mc2();
target.x=100;
target.y=300;
addChild(target);
var bounds:Rectangle = target.getBounds(this);
var bmpData:BitmapData = new BitmapData(Math.floor(bounds.width), Math.floor(bounds.height), true, 0);
var bmpMatrix:Matrix = target.transform.matrix;
bmpMatrix.translate(-bounds.x, -bounds.y); // Draw bitmap
bmpData.draw(target, bmpMatrix);
var bmp:Bitmap = new Bitmap(bmpData);
bmp.x=100;
bmp.y=300;
addChild(bmp);
removeChild(target);
//bmpData.dispose(); I want to use this and i dont want my bmp disappear
Searching to solution for one week but i cant figure it out.
So my question is;
Can i converting movieClips to bitmap with freeing to memory? Like adding stage a static png file?
BitmapData -- is actually what's being shown on the screen. The format is almost identical to BMP, but the order of bytes is reversed. Bitmap is only a display container, serving to output image content to the screen and providing common DisplayObject APIs.
So, if you use BitmapData.dispose(), you are actually freeing the memory occupied by image and obviously after that there is nothing to be shown by Bitmap container.
As of right now. I have 3 objects. One BitMap that acts as my canvas. And 2 bitmapDatas. One is my buffer and another is my tiles. I am creating a tiling effect for a game. I would like to take my tile:BitMapData, and turn it into a custom object. reason being is I want each tile to be interactive. So I can click on each one. Is it possible to turn my bitMapData that represents a tile, into a custom object that has properties and methods. Sort of like a movie clip. and draw it into my buffer ?? Could I create a new class that extends bitMapData ?? Or would I have to get rid of the buffer and draw the tile objects directly into the BitMap ??
In other words, what is the best way to put Sprite or a tile into a BitMapData object or even a Bitmap.
First of all, BitmapData and Bitmap are not interchangeable. They are two very different things. The BitmapData class contains bitmap pixel data, and allows you to manipulate that pixel data, e.g. draw to it, change the color of particular pixels, et c. There is no way of displaying a BitmapData directly, i.e. by adding it to the display list.
The Bitmap class, on the other hand, is a DisplayObject, like MovieClips and Sprites, which you can add to the display list. It's single purpose is to render a BitmapData in the display list. In fact, it is not even interactive, so you cannot detect clicks directly on a Bitmap instance, for example.
On to your question: If you have a bitmap data that contains a tile sprite, and you want to draw that tile in another bitmapdata, you can use the BitmapData.draw() method, or the BitmapData.copyPixels() method. The latter is one of the fastest methods you can use on any BitmapData, so I would highly recommend it.
Depending on your particular application, it might not be beneficial to draw everything in a bitmap at all. It sounds as if you want to be able to detect click events on all the tiles, which makes me think that you would probably benefit from having them be separate DisplayObjects, e.g. Sprites.
If you want to, you can create a Tile class that extends Sprite, and draws a BitmapData using a bitmap fill. That way, you can have any properties you want, and also detect mouse events on the tile instances.
package
{
/* ... imports ... */
public class Tile extends Sprite
{
private var _solid : Boolean;
public function Tile(bmp : BitmapData, solid : Boolean)
{
this.graphics.beginBitmapFill(bmp, null, false, true);
this.graphics.drawRect(0, 0, bmp.width, bmp.height);
_solid = solid;
}
/**
* Sample custom property. Could be used to define whether a tile
* is solid, e.g. the player cannot pass it.
*/
public function get isSolid() : Boolean
{
return _solid;
}
}
}
This class could simply be instantiated for every tile in your game, passing in the bitmap data that should be drawn in the tile. You could also listen for events on such a tile instance.
var tile : Tile;
tile = new Tile(myBitmapData, false);
tile.x = 200;
tile.y = 200;
tile.addEventListener(MouseEvent.CLICK, handleTileClick);
addChild(tile);
This way, you don't have to use the Bitmap class at all to render the tiles. They can be added directly to the display list.
I figure a better solution for when you want to select certain parts of the tile without effecting the position of the sprite itself
theMatrix.translate(30,0);
this.graphics.beginBitmapFill(tileImage,theMatrix);
//this.graphics.drawRect(0, 0,tWidth ,tHeight );
this.graphics.endFill();
Your right, leave drawRect at 0, 0. using Matrix.Translate, allows you to move the positioning of what part of the tile you want, without affecting the sprite position itself.