Drawing a bitmap based on a transformed movieclip

Question

I'm drawing bitmaps of movieclips which I then feed into my hittest function to test for collisions. However, I'm not quite sure how i would add to the code below to take into account and draw bitmaps for movieclips which have been scaled and/or rotated. The below code obviously only works for non-transformed movieclips. I've included in comments code which i've already tried but to no success.

When adding the drawn bitmap to the stage, no matter whether the movieclip in question is transformed or not, the drawn bitmap is "cut off" and incorrectly drawn - it appears to only draw a section of it. However, this does not particularly affect the collision testing for the non-transformed movieclips, but has an adverse effect on transformed movieclips.

All of the movieclips I want to be drawn have been created through the graphics property.

           //for example: 
            var mymc:MovieClip = new MovieClip();
            var g:Graphics = mymc.graphics;                        
            g.moveTo(0,0);
            g.lineTo(17.5,0);
            g.lineTo(8.75,17.5);
            g.lineTo(-8.75,17.5);
            g.lineTo(0,0);

main code:

for each(var mc:MovieClip in impassable) {  

        //var bMatrix:Matrix = new Matrix();

        //bMatrix.scale(mc.scaleX, mc.scaleY);

        //bMatrix.rotate(mc.rotation * (Math.PI/180));

        var bData:BitmapData = new BitmapData(mc.width, mc.height, true, 0);

        //bData.draw(mc, bMatrix);

        bData.draw(mc);

        var bitmap:Bitmap = new Bitmap(bData);

        bitmap.x = mc.x;
        bitmap.y = mc.y;


        var HitTest:Number = newCollision(bitmap, centerX, centerY, 13.7);

Any thoughts? thanks

Answer 1

This function will create a BitmapData clone of a DisplayObject, taking into account its transform matrix, though it doesn't take into account bitmap filters. (Based on this answer.)

function createBitmapClone(target:DisplayObject):BitmapData {
    var targetTransform:Matrix = target.transform.concatenatedMatrix;
    var targetGlobalBounds:Rectangle = target.getBounds(target.stage);
    var targetGlobalPos:Point = target.localToGlobal(new Point());

    // Calculate difference between target origin and top left.
    var targetOriginOffset:Point = new Point(targetGlobalPos.x - targetGlobalBounds.left, targetGlobalPos.y - targetGlobalBounds.top);

    // Move transform matrix so that top left of target will be at (0, 0).
    targetTransform.tx = targetOriginOffset.x;
    targetTransform.ty = targetOriginOffset.y;

    var cloneData:BitmapData = new BitmapData(targetGlobalBounds.width, targetGlobalBounds.height, true, 0x00000000);
    cloneData.draw(target, targetTransform);

    return cloneData;
}

Answer 2

When you call successive transforms on a Matrix, the ordering is very important and can really mess things up.

Luckily there is a helper method that allows you to specify translation, rotation and scaling in one go and avoid those issues - createBox

For your case, something like this:

var matrix:Matrix = new Matrix();
matrix.createBox(mc.scaleX, mc.scaleY, mc.rotation*Math.PI/180, 0, 0);

(the two zeros are for x and y translation)