Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Texture Packer: Artifacts?
Started by jerome82 Oct 05 2011 12:34 AM

12 replies to this topic
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

jerome82

[GLOBAL: userInfoPane.html]
jerome82
  • Contributor

  • 159 posts
  • Corona SDK

We are using Texture Packer to process our spritedata but we are finding that we're getting some strange artifacts along the border of sprites. Vertical lines that are maybe a pixel wide, then stretched - most noticeable when viewing a game on iPad.

Am running TexturePackerGUI.exe (Pro ver.2.2.0.2611) - running basic algorithm. Has anyone seen anything like this - or figured out the workaround/fix?

Thanks.

uid: 74844 topic_id: 16001 reply_id: 316001


[TOPIC: post.html]
#2

peach pellen

[GLOBAL: userInfoPane.html]
peach pellen
  • Corona Geek

  • 8,866 posts
  • Alumni

I don't use Texture Packer myself but have you checked your sizes? Any odd numbers?

If a frame is, for example, 51x51 you should adjust it to either 50x50 or 52x52.

Peach
uid: 52491 topic_id: 16001 reply_id: 59468


[TOPIC: post.html]
#3

producerism

[GLOBAL: userInfoPane.html]
producerism
  • Contributor

  • 249 posts
  • Corona SDK

I was having this same issue. I didn't notice even numbers making a difference, instead I made sure there was at least a 1px transparent border around each sprite. That seemed to make my artifacting issues go away.
uid: 49447 topic_id: 16001 reply_id: 59471


[TOPIC: post.html]
#4

jerome82

[GLOBAL: userInfoPane.html]
jerome82
  • Contributor

  • 159 posts
  • Corona SDK

Thank you Peach, thank you producerism... I will attempt the one pixel border and see if this resolves our issue!!

EDIT: I have since tried the clear buffer around the sprites and this indeed does seem to alleviate (eliminate) the artifacts seen before. I don't know if TexturePacker has a newer revision out yet, but this should be addressed hopefully soon.

EDIT 2: I spoke too soon... the artifacting is NOT seen on the Corona Sim first of all. Secondly, it isn't perceivable on the iPhone4 screen. It is very apparent on the iPad2 - due to scaling perhaps? There is DIFFERENT artifacting from the same build on the iPad1. So this is getting pretty interesting...

application =
{
	content =
	{
		width = 320,
		height = 480,
		scale = "zoomStretch"
	},
}
uid: 74844 topic_id: 16001 reply_id: 59473


[TOPIC: post.html]
#5

producerism

[GLOBAL: userInfoPane.html]
producerism
  • Contributor

  • 249 posts
  • Corona SDK

hm, what kind of artifacting are you seeing? Any way you could take a device screenshot?

I have only been testing in the simulator and on 2 different Android devices, so I'm not aware of any iOS specific issues (yet).
uid: 49447 topic_id: 16001 reply_id: 59576


[TOPIC: post.html]
#6

jerome82

[GLOBAL: userInfoPane.html]
jerome82
  • Contributor

  • 159 posts
  • Corona SDK

Typically the artifacting I'm referring to are stray single pixel wide lines that appear to be several pixels tall vertically. They appear on the "edge" of the sprite. Sometimes the left edge, sometimes the right edge. Most always it's a dark pixel (black?).

I will see if I can capture a screen shot.
uid: 74844 topic_id: 16001 reply_id: 59595


[TOPIC: post.html]
#7

producerism

[GLOBAL: userInfoPane.html]
producerism
  • Contributor

  • 249 posts
  • Corona SDK

sounds just like the issue I was having. I might need to test on iOS, I could still be having the same problem and not knowit.
uid: 49447 topic_id: 16001 reply_id: 59602


[TOPIC: post.html]
#8

christian.sanchez

[GLOBAL: userInfoPane.html]
christian.sanchez
  • Observer

  • 3 posts
  • Corona SDK

Here is where the inner padding comes to the rescue.

Use anything from 1-5 pixels for inner padding and that will do the job. The problem has to do with smoothing during the scaling of the elements, they tend to go beyond the border of your image.

The rollover help in Texture Packer - Inner Padding property explains it very well.

It fixed that problem in our app.
uid: 50041 topic_id: 16001 reply_id: 59636


[TOPIC: post.html]
#9

jerome82

[GLOBAL: userInfoPane.html]
jerome82
  • Contributor

  • 159 posts
  • Corona SDK

Christian, I'm unaware of a "inner padding"; is this a parameter within the tool?

EDIT: By the way, I'm wrong - the artifacting DOES appear on the Sim - but when you switch to the iPad skin, I haven't seen it on the other skins. So it most likely is related to the scaling.

EDIT 2: Okay, I found the "inner padding" parameter in Texture Packer and did a rollover "help" look-see... and will give it a try. Thanks for the pointer!

EDIT 3: Confirmed; inner padding fixed my issue. (If I could, I would kiss Christian Sanchez). Inner Padding people... that's the solution to this thread. Good luck all!
uid: 74844 topic_id: 16001 reply_id: 59638


[TOPIC: post.html]
#10

christian.sanchez

[GLOBAL: userInfoPane.html]
christian.sanchez
  • Observer

  • 3 posts
  • Corona SDK

Good to know that it worked for you too. :-)
uid: 50041 topic_id: 16001 reply_id: 59792


[TOPIC: post.html]
#11

ir8primates

[GLOBAL: userInfoPane.html]
ir8primates
  • Contributor

  • 190 posts
  • Corona SDK

I boosted my inner padding to 10, have shape and border padding up to 2 and I am getting edge artifacts on all of my tiled images!!!! Of course they are invisible on the simulator, but on my android they sick out like the black sheep against a white wall.

If there is padding around the images, does making the frame a power of 2 change much?

Are there any solutions? Is something wrong with my artwork that I need to fix before putting it into sprite sheets?
uid: 54716 topic_id: 16001 reply_id: 70479


[TOPIC: post.html]
#12

ir8primates

[GLOBAL: userInfoPane.html]
ir8primates
  • Contributor

  • 190 posts
  • Corona SDK

Also I just noticed this. Sometimes both edges show on overlapping pieces. The edge of my sprites are showing through the layered sprite above it. So currently I am seeing two lines where tiles meet. I doubled check there is no change from the default opacity - the alpha is 100%.
uid: 54716 topic_id: 16001 reply_id: 70481


[TOPIC: post.html]
#13

juliusbangert

[GLOBAL: userInfoPane.html]
juliusbangert
  • Contributor

  • 157 posts
  • Corona SDK

I'm not sure if the problem I was having is similar to this but I was trying to place images right up against each other to form scalable button shapes in my app, essentially tiling small shapes. This worked fine with display.newImageRect but I was getting fuzzy edges where they where supposed to meet when I implemented image sheets.
I decided this was down to the way texture packer downscaled the image sprites in it's autoSD functionality and the anti aliasing applied there. Despite the fact that all my images were carefully prepared to sizes that were divisible by all my scale factors ( @1-5x, @2x, @3x, @4x ) I was getting fuzzy edges.
I spent half a day going over this and finally found that setting "extrude" to 8 (my common factor) did the trick. Not sure why this is but there you go.
uid: 62617 topic_id: 16001 reply_id: 134092



[topic_controls]
[/topic_controls]