Cut-off Frames in Sprite Animation

Audio and Graphics
#1

I’m currently working on a project which uses an animated spaceship with flickering lights. I’m setting the animation as follows:

 local shipSheet = graphics.newImageSheet("scene/graphics/ship-front.png", { width = 96, height = 22, numFrames = 2, sheetContentWidth = 96, sheetContentHeight = 44 } ); shipFront = display.newSprite(playerGroup, shipSheet, { name = "flash", frames = {1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}, time = 1600, loopCount = 0, loopDirection = "forward" } ); shipFront.x, shipFront.y = shipBack.x, shipBack.y + 18; shipFront:play();

However, though the animation plays it doesn’t seem to be working correctly. I’ve attached two images below that show how the first frame draws a little bit of the second frame at the bottom and the second frame ends up losing a row of pixels at the top. It’s very subtle but it’s significant enough that I don’t want it to look like that, especially when I end up adding the vector graphics instead of the sketchy raster ones. The spritesheet is 96x44px.

Thanks in advance!

EDIT: Just to add I’ve also tried using what’s explained in “Complex Options” here: https://docs.coronalabs.com/guide/media/imageSheets/index.html but it hasn’t helped

#2

Can you put your project in a .zip file and share a URL to it where the community can download it and see everything (including images) that you’re using?

Rob

#3

You see, my first question in this forum was exactly this, which i asked yesterday, and well… i solved it myself 1 day later.

I guess that when you try to render a sprite sheet, if you don’t want this weird row (or border as i call), you can edit the sprite image and add a 1 or 2 transparent border around each frame in the current image. This seems to make it dispappear when using the minTextureFilter and magTextureFilter as “linear”, if you want more quality when rendering the objects.

But, if you don’t care about quality, and don’t want to edit the sprites (which was my case), before calling the graphics.newImageSheet(), change the default options using   display.setDefault()  and change the textureFilters to “nearest”. When you are done with the creation of sprites, cahnge it back if you need to.

display.setDefault("minTextureFilter", "nearest") display.setDefault("magTextureFilter", "nearest") -- create your sprite sheets using graphics API display.setDefault("minTextureFilter", "linear") display.setDefault("magTextureFilter", "linear")

That’s it, for me this solution worked fine.

#4

the issue is with your png.  you clearly show two different sizes in your OP

#5

Can you put your project in a .zip file and share a URL to it where the community can download it and see everything (including images) that you’re using?

Rob

#6

You see, my first question in this forum was exactly this, which i asked yesterday, and well… i solved it myself 1 day later.

I guess that when you try to render a sprite sheet, if you don’t want this weird row (or border as i call), you can edit the sprite image and add a 1 or 2 transparent border around each frame in the current image. This seems to make it dispappear when using the minTextureFilter and magTextureFilter as “linear”, if you want more quality when rendering the objects.

But, if you don’t care about quality, and don’t want to edit the sprites (which was my case), before calling the graphics.newImageSheet(), change the default options using   display.setDefault()  and change the textureFilters to “nearest”. When you are done with the creation of sprites, cahnge it back if you need to.

display.setDefault("minTextureFilter", "nearest") display.setDefault("magTextureFilter", "nearest") -- create your sprite sheets using graphics API display.setDefault("minTextureFilter", "linear") display.setDefault("magTextureFilter", "linear")

That’s it, for me this solution worked fine.

#7

the issue is with your png.  you clearly show two different sizes in your OP