The little white line on animation problem: What are ideal Resolution, Mode, and bit depth to set when exporting adobe illustrator vector files to animation frames for iTorque?
by Adam Emrick · in Artist Corner · 10/31/2011 (6:35 pm) · 23 replies
I've created my desired graphics in vector format. (adobe illustrator) What I've been doing is utilizing an adobe photoshop script to take my individual animation frame vector images and convert it to a spritesheet for iTorque. (for anyone interested, this nifty script called sprite sheet explorer is here: http://asouza.com/blog/?p=119
I'm getting little white lines on the edges of my animation though.
I suspect, (but I'm not sure, any information would be appreciated) Resolution, Mode, and Bit Depth might be to blame. These are the settings in the Photoshop dialog box when I load an adobe illustrator file in photoshop and convert it to a pixel image.
What are the optimal Resolution, Mode, and Bit Depth to export my animation frames too (assuming the end result will be about a 1 inch tall graphic on the Iphone)
Thanks for any help! :)
I'm getting little white lines on the edges of my animation though.
I suspect, (but I'm not sure, any information would be appreciated) Resolution, Mode, and Bit Depth might be to blame. These are the settings in the Photoshop dialog box when I load an adobe illustrator file in photoshop and convert it to a pixel image.
What are the optimal Resolution, Mode, and Bit Depth to export my animation frames too (assuming the end result will be about a 1 inch tall graphic on the Iphone)
Thanks for any help! :)
About the author
Recent Threads
#2
11/01/2011 (12:55 am)
I have also had the white line on occasions, but I never figured out what caused it. It would be really nice if someone knew what might cause it.
#3
11/01/2011 (6:48 am)
The white line is typically a result of filter padding being enabled. Is that true in your case?
#4
11/01/2011 (9:33 am)
I have tried with or without filterpadding and filtermode as SMOOTH or NONE, but it can still appear. The white line doesn't show all the time, but it sometimes appear if I move or zoom the camera.
#5
http://imgur.com/F4PPZ
Here is a link to the spritesheet: http://tradeseerpro.com/spriteSheet.png
The white line appears at the back of the bug during some animations. It flashes on and off.
Thanks a ton for any help, this problem has consumed days!! :)
11/01/2011 (9:56 pm)
Still no luck here. I disabled filter pad for sure. Here is a link to the import settings dialog box that I chose:http://imgur.com/F4PPZ
Here is a link to the spritesheet: http://tradeseerpro.com/spriteSheet.png
The white line appears at the back of the bug during some animations. It flashes on and off.
Thanks a ton for any help, this problem has consumed days!! :)
#6
I could not reproduce your issue on my iPad, but iTGB did have some artifacts on the screen.
The image is pretty big: 585 x 2008 pixels. Each sprite is 585 x 502.
Try rendering your sprites at the actual size they will be used in the game, in powers of two: like 64x64, then put them on a sprite sheet who's side's sizes are a power of 2, like 256x256 or 1024x1024 or 2048x512.
When I ran the game in the editor, i did notice little white flecks , artifacting of some sort... generally around the bug's hind legs.
I changed the bug's size in the editor to native, 64x64, and 128x128.
I had a camera mounted to a player walking next to the bug, as it was animating, with physics enabled, bouncing around inside its world bounds.
Each time I had some white lines in the editor, but nothing on my iPad.
Also, I notice that there is a semi transparent area on the green 'wing'. I'm not sure if that is an issue or not, but perhaps you could try without.
One more thing to try would be to try the sprite against different background colors.... I have issues on my mac when I leave areas of the playfield transparent .
11/01/2011 (11:30 pm)
@adamI could not reproduce your issue on my iPad, but iTGB did have some artifacts on the screen.
The image is pretty big: 585 x 2008 pixels. Each sprite is 585 x 502.
Try rendering your sprites at the actual size they will be used in the game, in powers of two: like 64x64, then put them on a sprite sheet who's side's sizes are a power of 2, like 256x256 or 1024x1024 or 2048x512.
When I ran the game in the editor, i did notice little white flecks , artifacting of some sort... generally around the bug's hind legs.
I changed the bug's size in the editor to native, 64x64, and 128x128.
I had a camera mounted to a player walking next to the bug, as it was animating, with physics enabled, bouncing around inside its world bounds.
Each time I had some white lines in the editor, but nothing on my iPad.
Also, I notice that there is a semi transparent area on the green 'wing'. I'm not sure if that is an issue or not, but perhaps you could try without.
One more thing to try would be to try the sprite against different background colors.... I have issues on my mac when I leave areas of the playfield transparent .
#7
Thanks a ton for the help! I'll try your suggestions and let you know how it goes!
11/02/2011 (12:17 am)
Ray,Thanks a ton for the help! I'll try your suggestions and let you know how it goes!
#8
I the sprite sheet was 512x512, with cells of 128x128. rendered at it's native size. I have the camera mounted to the player.
The behavior is very consistent on the iPad. I don't see it in the editor at all. The effect is very pronounced when I let the player collide with a wall.
So, taking it one step further, I replaced my player animation with your bug, and I could see the white line at the backside, stretching all the way down. It would only happen when I was moving to the right, intermittently. When I collide with a wall moving right, it is more pronounced.
Video: www.ustream.tv/recorded/18258406
Now that I can re-create your issue, I'm going to see what I can do about my new one :)
11/02/2011 (12:52 am)
While taking a super close look at your bug, I noticed that my player animation (ninja from the platform tutorial) had a pixel that would flash on and off while I was moving!I the sprite sheet was 512x512, with cells of 128x128. rendered at it's native size. I have the camera mounted to the player.
The behavior is very consistent on the iPad. I don't see it in the editor at all. The effect is very pronounced when I let the player collide with a wall.
So, taking it one step further, I replaced my player animation with your bug, and I could see the white line at the backside, stretching all the way down. It would only happen when I was moving to the right, intermittently. When I collide with a wall moving right, it is more pronounced.
Video: www.ustream.tv/recorded/18258406
Now that I can re-create your issue, I'm going to see what I can do about my new one :)
#9
11/02/2011 (1:07 am)
Wow thanks for the findings. When you say camera mounted to player, you aren't talking about iTorque right? Your video looks 3d to me, and I haven't seen the ninja tutorial so I assume its regular Torque you are talking about? Sorry for my noobness, I surely aim to get educated quickly. :)
#10
The video I posted was from my webcam recording the actual iPad, sorry for the poor quality, and angle, but I don't have the necessary technology to record straight from the iPad
11/02/2011 (1:15 am)
That was iTorque.1.5 You can mount the camera to an object, so that the player stays in the middle of the screen while the rest of the world seems to move around it.The video I posted was from my webcam recording the actual iPad, sorry for the poor quality, and angle, but I don't have the necessary technology to record straight from the iPad
#11
Thanks for your time buddy!
11/02/2011 (1:18 am)
What about the ninja you mentioned? I'm desperate for any other example project besides the Fish one and the Plant watering one from the tutorials.Thanks for your time buddy!
#12
There are a few other tutorials on that site as well. I think they are for TGB, but I've been able to get at least the plat former working in torque.
tdn.garagegames.com/wiki/TGB/Tutorials_and_Guides
I always have to : click the link, log in, then click the links again, if that helps.
11/02/2011 (1:25 am)
tdn.garagegames.com/wiki/TGB/Tutorials/PlatformerThere are a few other tutorials on that site as well. I think they are for TGB, but I've been able to get at least the plat former working in torque.
tdn.garagegames.com/wiki/TGB/Tutorials_and_Guides
I always have to : click the link, log in, then click the links again, if that helps.
#13
I thought that the optimised setting was only for using .pvr files instead of png-files when playing on a device, but it seems to have some sort of effect even when playing in the editor, which does not use .pvr files at all.
Does anyone know more exactly what the optimised setting does?
11/02/2011 (2:04 am)
I noticed that the white line can be caused by the "optimised = 1" setting for the datablock. So far I have only tested with a Static Sprite and playing from the editor, but the white line vanished as soon as I put "optimised = 0". (this might not be the same type of white line that can come flickering on animation edges, but it seems somewhat similar).I thought that the optimised setting was only for using .pvr files instead of png-files when playing on a device, but it seems to have some sort of effect even when playing in the editor, which does not use .pvr files at all.
Does anyone know more exactly what the optimised setting does?
#14
www.garagegames.com/community/forums/viewthread/118449
11/06/2011 (3:32 pm)
Just ran across an old TGB forum post that deals with a 'white line' issue as well. www.garagegames.com/community/forums/viewthread/118449
#15
After some testing I noticed that the flickering line that appeared in some of my animations was in fact a line from adjacent cells. I then tried putting a 1-pixel wide, 100% transparent border around every frame in the spritesheet and the flickering edge disappeared. So a cell that was 130 pixels wide is now 132 pixels, but with 1 added transparent pixel to the left and one to the right. And the same goes for up and down as well.
I believe that the actual bug is still present, but now when the flickering line shall appear it consists of completely transparent pixels and thus it doesn't show.
11/07/2011 (2:27 am)
I think I found a solution.After some testing I noticed that the flickering line that appeared in some of my animations was in fact a line from adjacent cells. I then tried putting a 1-pixel wide, 100% transparent border around every frame in the spritesheet and the flickering edge disappeared. So a cell that was 130 pixels wide is now 132 pixels, but with 1 added transparent pixel to the left and one to the right. And the same goes for up and down as well.
I believe that the actual bug is still present, but now when the flickering line shall appear it consists of completely transparent pixels and thus it doesn't show.
#16
http://www.tradeseerpro.com/spriteSheet.png
I'm still messing with it, I'll let you know if I find out what the problem is.
11/07/2011 (7:54 pm)
Thank you for sharing Simon! I have attempted to add a wider area of transparency to my sprite sheet, but the white flicker still happens. Here is the one I'm working with:http://www.tradeseerpro.com/spriteSheet.png
I'm still messing with it, I'll let you know if I find out what the problem is.
#17
www.eaglesoftworks.com/TGB/spriteSheet.rar
Let me know~ :)
Always~
Vickie ;)
11/27/2011 (11:11 pm)
See if this one works for you Adam, if it does I'll tell you how I did it.www.eaglesoftworks.com/TGB/spriteSheet.rar
Let me know~ :)
Always~
Vickie ;)
#18
Your link shows a page not found error. :(
I think this is the proper URL: www.eaglesoftworks.com/TGB/spriteSheet.rar
I will check it out as I was curious if you had tried Conor's solution from your other post.
11/27/2011 (11:43 pm)
@VickieYour link shows a page not found error. :(
I think this is the proper URL: www.eaglesoftworks.com/TGB/spriteSheet.rar
I will check it out as I was curious if you had tried Conor's solution from your other post.
#20
Thank you so much for venturing in on my little thread, it led me to a wealth of knowledge by exploring your other threads.
Did you settle on ReaConverter or did you use the SuperPNG photoshop plugin?
11/28/2011 (1:45 am)
So far so good Vickie!Thank you so much for venturing in on my little thread, it led me to a wealth of knowledge by exploring your other threads.
Did you settle on ReaConverter or did you use the SuperPNG photoshop plugin?
Ray Delia
SK Studios
I use PNG24 when I export, with a transparent background.
My document setup is 2048x2048px , 72dpi rgb-8bit with transparent background.
A 128x128 pixel sprite is about 1" square on my iPad. @ 1024 x 768 resolution. 1" tall on an iphone is a good chunk (10%ish)of the screen.
If you post a sprite sheet that has the issue, maybe someone can point you in the right direction.