Question

I got a huge problem trying to color objects that are flying around in my space game.

When I shoot and hit them – the affected enemies shall blink. The graphics are pre-rendered (i.e. there’s an rotation array and function where the degrees and their appropriate rotation for the objects are stored / calculated for better performance).

So – my idea was to enhance that rotation function with a functionality for additional coloring; but the colored AND rotated objects shall be stored apart of the normal rotated objects. To accomplish this I made a nested array:
in row one there are 360 rotated graphics of one object and in row two there are 360 graphics of a rotated and colored object.

Problem: Coloring works but they are not rotated (always at 0 degrees). Please help me – I was figuring out for hours why it doesn’t work so I gave up. It would be so cool if someone could find the problem! Thank you very much!

public function createRotationWithColorBlitArrayFromBD(sourceBitmapData:BitmapData, inc:int, offset:int = 0):Array
{
    trace("sourceBitmapData.width=" + sourceBitmapData.width);
    trace("sourceBitmapData.height=" + sourceBitmapData.height);
    tileList = [];
    tileListSec = [];
    levelArray = [];
    var rotation:int = offset; 

    while (rotation < (360 + offset))
    {
        var angleInRadians:Number = Math.PI * 2 * (rotation / 360);
        var rotationMatrix:Matrix = new Matrix();

        rotationMatrix.translate(-sourceBitmapData.width * .5, -sourceBitmapData.height * .5);
        rotationMatrix.rotate(angleInRadians);
        rotationMatrix.translate(sourceBitmapData.width * .5, sourceBitmapData.height * .5);

        var matrixImage:BitmapData = new BitmapData(sourceBitmapData.width, sourceBitmapData.height, true, 0x00000000);

        matrixImage.draw(sourceBitmapData, rotationMatrix);
        tileList.push(matrixImage.clone());

        var colorMatrix:ColorMatrixFilter = new ColorMatrixFilter (
                                [1, 0, 0, 0, 0,
                                 0, 0, 0, 0, 0,
                                 0, 0, 0, 0, 0,
                                 0, 0, 0, 1, 0]);

        matrixImage.applyFilter(sourceBitmapData, sourceBitmapData.rect, point0, colorMatrix);

        tileListSec.push(matrixImage.clone());

        rotation += inc;

        matrixImage.dispose();
        matrixImage = null;
        rotationMatrix = null;
    }

    levelArray = [tileList, tileListSec];
    return(levelArray);
}

Answer 1

It seems like you are applying the filter to the source image, when you want to be applying the filter to a rotated version of the source image.

If you look closely at the docs for BitmapData, the apply filter function does the following:

Takes a source image and a filter object and generates the filtered image.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#applyFilter

Your apply filter call is writing over the matrix transformation you are doing in your draw() function with a new, unrotated copy of the source image. The applyFilter() is just like draw, except it applies a filter instead of a transformational matrix. In this case, you are applying a transformational matrix to matrixImage.draw() (to rotate) and then writing over that data with your matrixImage.applyFilter() (to color).

SOLUTION
A quick solution would be to make the following change:

matrixImage.applyFilter(matrixImage, matrixImage.rect, point0, colorMatrix);

This has matrixImage apply the color filter to itself, after it becomes the rotated image.

BTW: In this case, I don’t think you need to have two clone()s of the matrixImage object. Just the final object resulting from the applyFilter() should suffice since it is the source and the filter all in one. But you may need them for other game logic that you haven’t posted.

NOTE:
The only problem with this solution is the following performance kink: ( from adobe docs for BitmapData.applyFilter() )

If the BitmapData object and the object specified as the sourceBitmapData parameter are the same object, the application uses a temporary copy of the object to perform the filter. For best performance, avoid this situation.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#applyFilter

Instantiating these temporary copies is very resource intensive so just instatiating one buffer object and re-using that is much faster. If you’re finding performance issues, it is best to create a third BitmapData object to act as a buffer between the source and the filter. In this case, you would have 3 bitmapData objects instead of just sourceBitmapData and matrixImage.