How to get transparency to work on a bitmap in Actionscript

Question

For a class project I'm working on "Pissed Off Pigs" (I think you get the idea, the pigs get revenge, don't worry, I'm not going to release it!) and I want to create circles with a fill from a bitmap (circles because the collision math is easier). Here is how they look now.

How my Pigs look now

Of course, the white is the problem. Below is my "pigs" class. Any ideas? I've tried gif's, pngs, 8-bit pngs, etc and it seems to make no difference. The image itself is 20px square and the radius of the circle is 10px (so a 20px diameter). Here is the image I'm using: My Pig Image

And I know I should probably load the image outside the class and just pass the BitmapData when I make a new pig so I don't have to load the image every time I create a new pig but for now it works! (Sorta).

Is the matrix translate the problem?

Oh, and I have checked bmpImage.transparent and it returns true (even when I don't specify true in the constructor).

` package { import flash.display.; import flash.net.; import flash.events.; import flash.geom.; import flash.display.BitmapDataChannel;

public class pig extends Sprite {
    public var radius:uint;
    public var velocity:Vec2;
    public var tt:Sprite;
    public var pigLoader:Loader;
    public var bmpImage:BitmapData;
    public var framesAlive:uint;


    public function pig(xx:uint, yy:uint, radius:uint, vx:Number, vy:Number, sprite:String){
        this.x = xx;
        this.y = yy;
        this.radius = radius;

        this.velocity = new Vec2(vx, vy);

        pigLoader = new Loader();
        pigLoader.load(new URLRequest(sprite));
        pigLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, picLoaded);

    }
    private function picLoaded(event:Event):void {
        bmpImage = new BitmapData(pigLoader.width, pigLoader.height, true);
        bmpImage.draw(pigLoader);
        tt = new Sprite();
        var matrix:Matrix;
        matrix = new Matrix();
        matrix.translate( -10, -10);
        tt.graphics.beginBitmapFill(bmpImage, matrix, false, false);
        tt.graphics.drawCircle(0, 0, this.radius)
        tt.graphics.endFill();
        this.addChild(tt);
    }
}

}

`

Adam Smith · Accepted Answer · 2011-04-23T21:53:46.120

2

You've way overcomplicated the problem. Bitmap fill is normally used when you want to fill a large area with a tiled pattern, and the pattern is coming from a bitmap (think wallpaper), you don't need to use it here. What you should be doing is using the Loader.content Bitmap. You don't need the draw() or the matrix, just use .x and .y to move your pig Bitmap centered over your Sprite's (0,0) point if that's the center of the circle you're using for collision detection.

There is no reason for your pig sprite to have a visual circle for you to use circle-based collision detection. The visual representation should not matter to your collision detection at all. Circle-based collision detection is normally just an application of the Pythagorean distance formula, i.e. if the distance between centers is less than (or equal to) the sum of the radii of the circles being tested, you have overlap (collision).

What if you replace that last function with this:

private function picLoaded(event:Event):void
{
    var pigPic:Bitmap = event.target.loader.content;
    pigPic.x -= 10;
    pigPic.y -= 10;
    this.addChild(pigPic);
}

edited Apr 23 '11 at 21:53

answered Apr 23 '11 at 21:35

Adam Smith

1,917
12
14

Thanks for adding the code! I saw the first version and was trying everything I could think of. I kept trying something like: var pigPic:Bitmap = pigLoader.content; but I got the "Implicit coercion" error. Figured the pigLoader was a public var so I could get to it from anywhere but apparently it's not a reference. – tooshel Apr 23 '11 at 22:09
Do you think I should use the loader like this for each pig? Shouldn't I take that part out and then just pass "pigLoader.content" as a parameter to the constructor for pig? – tooshel Apr 23 '11 at 22:10
I personally would not load a new one for each pig instance as you're doing. What I would do is load the GIF from the web one time and in the Loader's complete handler save a reference to the BitmapData (loader.content.bitmapData). You can do this, as long as you have the right crossdomain.xml policy file on the server serving the image to give you permission to get to the bitmapdata. Then, when you construct each pig sprite, pass it the bitmapdata reference and internally do a new Bitmap(bitmapdata) to create the Bitmap display object that you attach as a child. – Adam Smith Apr 24 '11 at 00:04
You don't need to move the loading of the GIF to outside of the class, you can make the reference to the bitmapData a pig class static variable. The first time you make a pig instance, you start the file load. Each subsequent pig you create uses the already-loaded data. Only the first pig you make creates a Loader, but any soon after that might still have to wait for the load (i.e. wait for the static reference to become non-null) before they finish constructing. Or (simpler) load the file outside the pig class, wait for it to load, then pass it to the pig contructor. – Adam Smith Apr 24 '11 at 00:09
P.S. You were getting the Implicit Coercion error because the compiler is able to typeCheck pigLoader.content at compile time (it knows it's a DisplayObject, but not specifially a Bitmap). The code I wrote skips around that because event.target is a generic, dynamic Object that can't be compile-time type checked. But you can do this: var pigPic:Bitmap = pigLoader.content as Bitmap; Casting makes it clear to the compiler what you expect. – Adam Smith Apr 24 '11 at 00:18

Chunky Chunk · Answer 2 · 2011-04-24T02:52:09.687

in order to have a functional alpha channel in your bitmapData canvas you need to set a zero alpha for the 32-bit hex value (0x00FFFFFF) of the BitmapData object's fillColor property prior to drawing.

package
{
//Imports
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.Bitmap;
import flash.display.BitmapData;

//SWF Metadata Tag
[SWF(width = "1000", height = "500", frameRate = "30", backgroundColor = "#000000")]

//Class
public class Test extends Sprite
    {
    //Constructor
    public function Test()
        {       
        var sh:Shape = new Shape();
        sh.graphics.beginFill(0xFF0000, 1.0);
        sh.graphics.lineTo(200, 200);
        sh.graphics.lineTo(0, 200);
        sh.graphics.lineTo(0, 0);
        sh.graphics.endFill();

        var shBitmapData:BitmapData = new BitmapData(sh.width, sh.height, true, 0x00FFFFFF); //32-bit Hex Value
        shBitmapData.draw(sh);

        addChild(new Bitmap(shBitmapData));
        }
    }
}

swap it out to the default value of 0xFFFFFFFF to see the difference.

How to get transparency to work on a bitmap in Actionscript

2 Answers2