as3 image over another using bitmap - actionscript-3

Ok so im trying to load a bitmap image as a background using this:
screenBitmapData.copyPixels(tilesBitmapData,new Rectangle(sourceX,sourceY,tileSize,tileSize),new Point(destX,destY));
screenBitmap = new Bitmap(screenBitmapData);
addChild(screenBitmap);
This load my tiled map correctly and display it on the screen.
Now i want to add another image which will be used as my character and the frame displaying it contain my character movement and then display the image as follow:
screenBitmapData.copyPixels(playerSheetBitmapData, new Rectangle(currentSpriteColumn * CHAR_SPRITE_WIDTH, currentSpriteRow * CHAR_SPRITE_HEIGHT, CHAR_SPRITE_WIDTH, CHAR_SPRITE_HEIGHT), new Point(xPos, yPos), null, null,true);
I setted the alpha channel on my character image and this is the result when im moving around my map with it:
http://snag.gy/L2uuR.jpg
As you can see, the background image doesnt refresh. And i simply dont know how to do this. Im pretty new with flash and as3 and ive been trying for days to make it work. I know it have something to do with the copypixel or redrawing the background before i draw the sprite again... Any ideas?

You need to redraw the entire scene. All you're doing at the moment is drawing the player ontop of the result of your previous draw.
All you need to do in your case is draw the entire background each frame before you draw the character. It could look like this:
function renderScene():void
{
// Draw the background, which will replace all the current graphics
// on the Bitmap.
screenBitmapData.copyPixels(tilesBitmapData,new Rectangle(sourceX,sourceY,tileSize,tileSize),new Point(destX,destY));
// Then draw the player.
screenBitmapData.copyPixels(playerSheetBitmapData, new Rectangle(currentSpriteColumn * CHAR_SPRITE_WIDTH, currentSpriteRow * CHAR_SPRITE_HEIGHT, CHAR_SPRITE_WIDTH, CHAR_SPRITE_HEIGHT), new Point(xPos, yPos), null, null,true);
}
To actually clear the Bitmap though, you can just use fillRect() to fill it with a color (e.g. black):
// Fill the Bitmap with black.
screenBitmapData.fillRect( screenBitmapData.rect, 0x000000 );

Related

How to use a mask in actionscript 3.0?

I want to mask the png image pattern.png with another image - mask.png, but it doesn't work at all and I can't find the reason. Instead of masking the image, the mask just disappears and the pattern stays the same as it was.
I tried making a MovieClip, drawing e.g. a circle and using that as the mask instead of mask.png and it works just fine. Is it because you can't use loader objects as masks? How do I make it work?
edit: After changing the size of mask.png to be smaller than the pattern, I've realized that it actually does kind of work, but what happens is instead of cutting the pattern into the shape I've drawn in the png file it just cuts it into the shape of the entire file, as in, it counts the rectangular transparent background as well. How can I make it cut out just the shape?
var mask:Loader = new Loader();
mask.load(new URLRequest("mask.png"));
var pattern:Loader = new Loader();
pattern.load(new URLRequest("pattern.png"));
pattern.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
function loadComplete(e:Event):void {
addChild(pattern);
addChild(mask);
pattern.mask = mask;
}
Your code is looks correctly. The mask property of DisplayObject wants DisplayObject too. But try to make few things, to find the trouble:
You have only one listener, to pattern.png. But you must be sure, that mask.png has loaded already too.
Despite that Loader is DisplayObject too - try to get content from loader for mask, and just after that try to use it.
*Ah, and one more thing. You must at first add listener, and only later try to load.

Libgdx tiled gaps between tiles

so I have a problem with tiled map, My map has gaps/texture bleeding, I read other questions with this problem but I could not get the one which works.
I'm using already made sprite sheet which includes all of tiles, so does enyone know the solution for it ? that I could make and I wont need to cut like 60 tiles from sprite sheet ?
use texture filter Nearest not Linear since Linear user 4 surrounding texels to calculate actual color so when it is on the border of tile it will generate the gap. You can read about TextureFilter here:
http://www.badlogicgames.com/wordpress/?p=1403
and you set it just like:
Sprite sprite;
//now you are initializing the sprite...
sprite.getTexture().setFilter(TextureFilter.Nearest, TextureFilter.Nearest);
of course you can call setFilter() direct on texture if you have an access to it. If you don't because you create tiledMap from file you can try to iterate over tiles and set proper filter for every tile texture:
Iterator<TiledMapTileSet> iter = tiledMap.getTileSets().iterator();
while(iter.hasNext())
{
Iterator<TiledMapTile> iterTile = iter.next().iterator();
while(iterTile.hasNext())
{
iterTile.next().getTextureRegion().getTexture().setFilter(...);
}
}
You can also just extrude your atlas in TexturePacker - it will double every pixel on the border so color blending wouldn't affect it

flash actionscript 3.0 hide part of an image

I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}

rotating image using pixelbender

I have background image and smaller image. I copy the smaller image into the bigger image using copypixels like this:
destBitMap.copyPixels(img, new Rectangle(0, 0, img.width, img.height),
location);
Now I want to rotate the image before copying it. Whats the best way to do it?
I tried using Matrix and bitmapData.draw() but its unacceptable. it has pixelated edges.
I found this pixelbender filter : http://life.neophi.com/danielr/2009/07/image_rotation_with_pixel_bend.html
for rotating images. on the plus side, it is really fast. I never used pixelbender so Im curious if its possible to take that filter, apply it to bitmapimage and copy the rotated image into the background image.
This is what Ive tried (which doesnt work):
shader = new Shader(new RotateFilter() as ByteArray);
shader.data.origin.value = [resizedImage.width / 2, resizedImage.width / 2];
shader.data.rotation.value = [rotation];
filter = new ShaderFilter(shader);
var bm:BitmapImage = new BitmapImage();
bm.source = resizedImage;
bm.filters = [filter];
Whats next? Is this possible at all?
If you want to apply a single filter to a bitmap, use BitmapData.applyFilter() method. Obviously, you can do anything with the resultant bitmap. But, you have to apply all this on a lower level than UIComponent allows. If your resizedImage is type Bitmap, you do this:
resizedImage.bitmapData.applyFilter(resizedImage.bitmapData,resizedImage.bitmapData.rect,new Point(),filter);
After this, your resizedImage.bitmapData will contain a rotated bitmap.

Changing a sprites bitmap

As of right now, I am trying to create a tiling effect for a game I am creating. I am using a tilesheet and I am loading the tiles to the sprite like so...
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(30, 0,tWidth ,tHeight );
var tileImage is the bitMapData. 30 is the Number of pixels to move retangle. then tWidth and tHeight is how big the rectangle is. which is 30x30
This is what I do to change the bitmap when I role over the tile
this.graphics.clear();
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(60, 0,tWidth ,tHeight );
I clear the sprite canvas. I then rewrite to another position on tileImage.
My problem is....
It removes the old tile completely but the new tile positions farther to the right then where the old bitmap appeared.
My tile sheet is only 90px wide by 30px height. On top of that, it appears my new tile is drawn behind the old tile. Is there any better way to perfect this.
again, all i want is for the bitmap to change colors
You could try to load the whole tilesheet in your sprite, and then redefine the scrollRect property each time you need to.
this.scrollRect = new Rectangle( 30, 0, tWidth ,tHeight );
Note that you can't just edit scrollRect.x, .y, .width or .height ; you have to redefine a new Rectangle each time.
Using scrollRect will probably be much faster that redrawing part of the bitmap.
You can read this excellent article from Grant Skinner for more informations about scrollRect.