Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]

Cut-off Frames in Sprite Animation
Started by danielbeer1376 Jul 02 2018 06:51 AM

3 replies to this topic
sprite animation frames cut-off broken
[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Enthusiast

  • 63 posts
  • Corona SDK

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;

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.


Attached File  ship1.PNG   13.83KB   0 downloads


Attached File  ship2.PNG   14.51KB   0 downloads


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

[TOPIC: post.html]

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,380 posts
  • Enterprise

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?



  • roaminggamer likes this

[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Observer

  • 11 posts
  • Corona SDK

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.

[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Corona Geek

  • 1,963 posts
  • Corona SDK

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


Also tagged with one or more of these keywords: sprite, animation, frames, cut-off, broken