flashpunk animation problems

Question

i am having a problem with animations in my game using flashpunk

this is one of the animations that are causing problems in the game. The animation looks like that. The actual entity however with the animation on it looks like this

but without the tiled background

the code i am using is this

package
{

import net.flashpunk.Entity;
import net.flashpunk.graphics.Image;
import net.flashpunk.FP;
import net.flashpunk.graphics.Spritemap;

public class Fireball extends Entity
{
    public var angle:int = FP.angle(Player.playerX,Player.playerY,FP.world.mouseX, FP.world.mouseY);
    [Embed(source = 'Images/fire ball.png')] private const FIREBALLANIME:Class;
    protected var animatedSprite:Spritemap = new Spritemap(FIREBALLANIME,128,128);

    public function Fireball()
    {

    animatedSprite = new Spritemap(FIREBALLANIME, 16, 16);
    graphic = animatedSprite;
    animatedSprite.add("defaultfire", [0, 1, 2, 3], 24);
    x = Player.playerX;
    y = Player.playerY;
    animatedSprite.play("defaultfire");
    }
    override public function update():void
    {

    }

}

} 

i turned the png's into an animation using texture packer. The ide i am using is FlashDevelop. I used pyxel edit to make the actual art.

Answer 1

I assume that with texture packer you mean TexturePacker, right?

The default settings in TexturePacker assume that you use a data file wich describes the positions of the sprites in the sheet. Why? Because this allows a whole bunch of nice tricks like removing transparency, packing different sized sprites and more.

Your code does not use such a data file - for this you have to change a bunch of the settings:

1. Layout > Algorithm = Basic
2. Layout > SortBy = Name
3. Layout > ShowAdvanced > Detect Identical Sprites = Off
4. Sprites > Trim Mode = None

Also make sure that your sprites all have the same size and the animation is aligned within the sprite frames.