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.

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:

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);
    }
}

}

`

Answer 1

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);
}