Animation issue?
by Jonathon Stevens · in Torque X 2D · 01/09/2007 (7:07 pm) · 9 replies
OK. I don't know what the deal is here. But if you check out this image:
you can see the little white 'line' on the right and bottom which shows up during the animation (but not the entire animation, so it causes a flickering white 'line' on the right and bottom.
I checked the original and can't find anything which should cause that:
Thoughts?
Edit: Oh yea, almost forgot. I tried changing the cell height property to just 'lop off' a lil more from the cell and no matter what I change it to, it resets back to whatever the height of the entire image was / number of cells on the Y axis.
you can see the little white 'line' on the right and bottom which shows up during the animation (but not the entire animation, so it causes a flickering white 'line' on the right and bottom.
I checked the original and can't find anything which should cause that:
Thoughts?
Edit: Oh yea, almost forgot. I tried changing the cell height property to just 'lop off' a lil more from the cell and no matter what I change it to, it resets back to whatever the height of the entire image was / number of cells on the Y axis.
About the author
With a few casual games under his belt as CEO of Last Straw Productions, Jonathon created the increasingly popular Indie MMO Game Developers Conference.
#2
01/17/2007 (11:11 am)
It's just a bug within TGBX itself, and doesn't affect the game. GG is aware of it.
#3
On a related note, I cannot seem to figure out how to get an UN-antialiased sprite to show up without a gray outline in the editor (animator or static). Is there a way to turn off "smoothing" or something so that I can bring in un-antialiased sprites into TGBX?
Thanks
-csa
05/15/2007 (9:11 am)
I've noticed white lines around the bottom of an image when pixels touch the border of the chopped image, and the line appears on the opposite image border. I'm assuming this has something to do with the way alpha is being blending with a solid pixel from the sprite.On a related note, I cannot seem to figure out how to get an UN-antialiased sprite to show up without a gray outline in the editor (animator or static). Is there a way to turn off "smoothing" or something so that I can bring in un-antialiased sprites into TGBX?
Thanks
-csa
#4
It appears that it is from the right or bottom pixel in the animation.
I can see my pixels moving.
more detail:
Click Here
05/15/2007 (11:42 am)
I have the same issue, and it does affect game play.It appears that it is from the right or bottom pixel in the animation.
I can see my pixels moving.
more detail:
Click Here
#5
If you open one of these images up with a program that allows you to turn off the transparency (IrfanView has an option to do this), you will see the utter crappiness going on in the area that is supposedly transparent.
This PNG looks like this:
That was saved using Photoshop's 'Save For Web' feature. As you can see it's got white right on the borders. In TGB once you start scaling that, and it starts trying to use neighboring pixels to figure out what color it should be, you start to see bleeding. (On this image we were seeing bleeding on the bottom of the wheels.)
To fix it, need to fill the "transparent" areas with black (or whatever color will look good). Some programs can do this for you. Or in Photoshop, you can use the SuperPNG plugin to save off your PNGs.
The corrected PNG looks like this:
Loaded in TGB, you don't get the weird white edges.
To correct an existing image with bleeding:
1. Open the PNG in Photoshop
2. Right Click on the layer and go to "Select Layer Transparency"
3. Go to Select > Save Selection...
4. Save that selection in a new channel. (This will the the alpha mask SuperPNG uses to save the image.)
5. Paint or fill in a decent background that won't cause unwanted bleeding.
6. Do a "Save As..." using SuperPNG as the format.
(This could all be made into an action for someone feeling industrious.)
05/15/2007 (2:41 pm)
This white line issue generally happens because of crappy alpha channels. Specifically, the crappy alpha channels Photoshop likes to put in PNGs when you use the save as PNG option, or the Save for Web PNG option. If you open one of these images up with a program that allows you to turn off the transparency (IrfanView has an option to do this), you will see the utter crappiness going on in the area that is supposedly transparent.
This PNG looks like this:
That was saved using Photoshop's 'Save For Web' feature. As you can see it's got white right on the borders. In TGB once you start scaling that, and it starts trying to use neighboring pixels to figure out what color it should be, you start to see bleeding. (On this image we were seeing bleeding on the bottom of the wheels.)
To fix it, need to fill the "transparent" areas with black (or whatever color will look good). Some programs can do this for you. Or in Photoshop, you can use the SuperPNG plugin to save off your PNGs.
The corrected PNG looks like this:
Loaded in TGB, you don't get the weird white edges.
To correct an existing image with bleeding:
1. Open the PNG in Photoshop
2. Right Click on the layer and go to "Select Layer Transparency"
3. Go to Select > Save Selection...
4. Save that selection in a new channel. (This will the the alpha mask SuperPNG uses to save the image.)
5. Paint or fill in a decent background that won't cause unwanted bleeding.
6. Do a "Save As..." using SuperPNG as the format.
(This could all be made into an action for someone feeling industrious.)
#6
Btw, the latest version of SuperPNG (1.1) doesn't appear to do what you described anymore. I had to hunt down version 1.0 which I found as a resource here on TDN actually:
SuperPNG 1.0
05/15/2007 (4:42 pm)
Thanks! I was having this issue also with all of my png's in TGBX. Btw, the latest version of SuperPNG (1.1) doesn't appear to do what you described anymore. I had to hunt down version 1.0 which I found as a resource here on TDN actually:
SuperPNG 1.0
#7
Thanks for your thourough explanation! I have followed and tested this process and I think your process probably definately fixes the line around an image boarder, but it does not appear to fix the halo around un-antialiased artwork. I have created a test case below. Please let me know what I'm doing wrongly.
Firstly, I created a 64x64 un-antialiased circle in photoshop and applied a rainbow radial gradient. Using the save selection technique above, I created an alpha channel where black is see-through, white is solid. There is no antialiasing on this new alpha layer, only black and white pixels. Here is this result:
Next I downloaded and installed the super PNG plugin like suggested, replacing the default PNG plugin and restarting photoshop to have this take effect. Using the "Save For Web..." option, you are taken into image ready where you NOW have the ability to set the matte color. As a test, I set the PNG web settings to no dithering and retain as much color as possible to make this test case be as lossless as possible. Below is a screenshot of me setting a black background matte in the Save for Web dialog:
To ensure I did not save a garbage alpha matte, I downloaded an installed Irfan View as you suggested, making sure to disable the transparency setting to I could see the matte color. In this example, my matte color is black and looks like it was saved properly from photoshop using the above technique. Note that I set my IrfanView background window color to pink in case something slipped through.
I then proceded to repeat the Save for Web, Review in IrfanView process with the following Matte color choices: Black, White, Red, Green, and Blue. You stated to "choose whatever color matte looks best". Well, quite frankly I don't want a matte color *at all*. However, I figured I'd give multiple colors a shot and see what happens. Here's the result of that test:
As you can see from this TGBX screenshot, all color choices produce some sort of halo due to the bilinear filtering with the alpha channel (I'm guessing). In my artistic opinion, if I did not create the source art with a halo in mind, I do not want TGBX to apply one for me. I also do not want to outline all my artwork as artistic style choice. This being said, I've produced a mockup in photoshop of how I'd like TGBX to import and display my artwork. Here's that:
For testing, I'm providing my source PNG's for anyone looking to test this process for themselves:
black matte:
white matte: 
red matte: 
green matte: 
blue matte: 
Is there a way to import un-antialiased source art into TGBX without filtering or halo or whatever the technical term is for the current effect? If my process is incorrect, can you please point out what I'm missing as well. I've checked these images in different web browsers and any applications I can think of which support PNG alpha transparency, and at this point, I'm fairly certain it's a TGBX display issue.
Thanks for any information you can provide.
-csa
05/16/2007 (8:00 am)
Mark,Thanks for your thourough explanation! I have followed and tested this process and I think your process probably definately fixes the line around an image boarder, but it does not appear to fix the halo around un-antialiased artwork. I have created a test case below. Please let me know what I'm doing wrongly.
Firstly, I created a 64x64 un-antialiased circle in photoshop and applied a rainbow radial gradient. Using the save selection technique above, I created an alpha channel where black is see-through, white is solid. There is no antialiasing on this new alpha layer, only black and white pixels. Here is this result:
Next I downloaded and installed the super PNG plugin like suggested, replacing the default PNG plugin and restarting photoshop to have this take effect. Using the "Save For Web..." option, you are taken into image ready where you NOW have the ability to set the matte color. As a test, I set the PNG web settings to no dithering and retain as much color as possible to make this test case be as lossless as possible. Below is a screenshot of me setting a black background matte in the Save for Web dialog:
To ensure I did not save a garbage alpha matte, I downloaded an installed Irfan View as you suggested, making sure to disable the transparency setting to I could see the matte color. In this example, my matte color is black and looks like it was saved properly from photoshop using the above technique. Note that I set my IrfanView background window color to pink in case something slipped through.
I then proceded to repeat the Save for Web, Review in IrfanView process with the following Matte color choices: Black, White, Red, Green, and Blue. You stated to "choose whatever color matte looks best". Well, quite frankly I don't want a matte color *at all*. However, I figured I'd give multiple colors a shot and see what happens. Here's the result of that test:
As you can see from this TGBX screenshot, all color choices produce some sort of halo due to the bilinear filtering with the alpha channel (I'm guessing). In my artistic opinion, if I did not create the source art with a halo in mind, I do not want TGBX to apply one for me. I also do not want to outline all my artwork as artistic style choice. This being said, I've produced a mockup in photoshop of how I'd like TGBX to import and display my artwork. Here's that:
For testing, I'm providing my source PNG's for anyone looking to test this process for themselves:
black matte:
white matte: red matte: green matte: blue matte: Is there a way to import un-antialiased source art into TGBX without filtering or halo or whatever the technical term is for the current effect? If my process is incorrect, can you please point out what I'm missing as well. I've checked these images in different web browsers and any applications I can think of which support PNG alpha transparency, and at this point, I'm fairly certain it's a TGBX display issue.
Thanks for any information you can provide.
-csa
#8
First the halo and the matte color. When the image gets scaled, the filtering uses the neighboring pixels to figure out how to "smoothly" scale it.
A black matte works great for the image I had because, I had a black border around everything, so all the edges were black, and with the matte all neighboring pixels are black. And when it scales up, you see black.
When you have an image with different colors on the edges, it gets harder, because different parts of the image need different colors.
In the case of this color gradient, no matter what color you use as a matte, it's going to be the wrong color for part of the image. What you would want to get rid of the halo is to over paint the area so the neighboring pixels are the right color.
So the alpha cuts the shape out, but the extra data in the transparent area is colored in. The exported image should have no halo at all:
That should take care of the halo issue.
The second issue was the filtering. You want aliased edges that scale up for that retro pixelated feel. From what I understand, you are going to have to turn that off somewhere in the script. That isn't a issue with how the image is prepared, but just what filtering calculations the engine is using on the images. So, I'm going to have to punt to a coder to answer where you would go to change that in TorqueX.
05/16/2007 (12:24 pm)
There are 2 things going on here. One caused by the other, but a slightly separate issue.First the halo and the matte color. When the image gets scaled, the filtering uses the neighboring pixels to figure out how to "smoothly" scale it.
A black matte works great for the image I had because, I had a black border around everything, so all the edges were black, and with the matte all neighboring pixels are black. And when it scales up, you see black.
When you have an image with different colors on the edges, it gets harder, because different parts of the image need different colors.
In the case of this color gradient, no matter what color you use as a matte, it's going to be the wrong color for part of the image. What you would want to get rid of the halo is to over paint the area so the neighboring pixels are the right color.
So the alpha cuts the shape out, but the extra data in the transparent area is colored in. The exported image should have no halo at all:
That should take care of the halo issue.
The second issue was the filtering. You want aliased edges that scale up for that retro pixelated feel. From what I understand, you are going to have to turn that off somewhere in the script. That isn't a issue with how the image is prepared, but just what filtering calculations the engine is using on the images. So, I'm going to have to punt to a coder to answer where you would go to change that in TorqueX.
#9
Thanks for this reply. I'll test this overpainting theory out and see how it goes. Honestly though, if this was a more complex shape such as an animated character, I don't necessarily feel this workflow seems optimal.
If you could let me know what a coder has to say about removing filtering, that would be swell.
Thanks!
-csa
05/17/2007 (9:10 am)
Mark,Thanks for this reply. I'll test this overpainting theory out and see how it goes. Honestly though, if this was a more complex shape such as an animated character, I don't necessarily feel this workflow seems optimal.
If you could let me know what a coder has to say about removing filtering, that would be swell.
Thanks!
-csa
Torque Owner Adam Spragg