Animation Angle

[richardortiz84]

I have noticed that this only detects collision on the original images, and not the translated images when the angle is changed.

[quidmonkey]

That is correct. You'd have to transform each pixel to the appropriate angle using the rotation theorem. If I find some time, I'll see if I can add it. Best.

[quanghd]

Same problem, please fix it as soon as you can. Thank for a great plugin!

[richardortiz84]

I was able to get this to work with rotated images. I did notice a glitch that will affect this down the line for others but for my game it is working well enough. This is that you are saving the alphas on the actual image itself, and not the entity. What I noticed is that if I am using this image on multiple entities, whichever image alpha was set last now affects all entities with this image. I would recommend moving this up from the image level.

[richardortiz84]

This is my updated loadAlphas function:

    awidth: 0,
    aheight: 0,
    // awidth and aheight = animation width and height
    // I am using Box2d and dynamically getting these values as the images rotate
    loadAlphas: function(angle, awidth, aheight){
        this.alphas = [];
        this.pixelCount = 0;
        var canvas = ig.$new( 'canvas' );

        var cwidth = this.data.width;
        var cheight = this.data.height;

        if ( angle !== undefined ) {
            cwidth = awidth;
            cheight = aheight;
        }

        this.awidth = cwidth;
        this.aheight = cheight;

        canvas.width = cwidth;
        canvas.height = cheight;

        var ctx = canvas.getContext( '2d' );

        if ( angle === undefined || angle == 0 ) {
            ctx.drawImage( this.data, 0, 0 );
        } else {
            ctx.translate(
                cwidth/2,
                cheight/2
            );
            ctx.rotate( angle );
            ctx.drawImage( this.data, this.data.width/-2, this.data.height/-2, this.data.width, this.data.height );
        }

        var pixels = ctx.getImageData( 0, 0, cwidth, cheight ).data,
            aIndex = 0,
            width = cwidth * 4,
            height = cheight * width;

        var count = 0;
        for( var y = 3; y < height; y += width ){
            for( var x = 0; x < width; x += 4 ){
                this.alphas[aIndex++] = pixels[x + y] ? true : false;
            }
        }
        this.alphasLoaded = true;
    }

In the touches function I modified the following lines to: touches: function( other ){ ..... imageWidthA = animation.sheet.image.awidth, imageWidthB = otherAnimation.sheet.image.awidth, }

The offset stuff was messing up and I could not figure it out so I removed it from the code since I did not need it

[quidmonkey]

richardortiz84-

Some of my variables aren't well-named, but offsetAx and offsetAy are the animation frame x & y for the first entity (this entity), and conversely, offsetBx and offsetBy are the frame coordinates for the second entity (other entity). Impact itself decouples ig.Image from ig.Entity so that assets can be re-used, allowing entities to share the same image. Could you give me a bit more detail about the animation issue?

I may hold off on the rotation update, as it's a bit more work than I anticipated, and I don't have a lot of time right now. If either you or quanghd want to take a stab at this, and come up with a workable solution, I'll gladly accept a pull request. The base algorithm will look like this:

1) Position the entity so that it's pivot point is the origin. 2) Normalize x1, y1, x2 & y2 with respect to the pivot origin. 3) Rotate using the 2d Rotation Theorem. 4) Check for out-of-bounds indices. 5) Compare the new alpha indices.

Best.