Game Development Community

Unexplained lines show up in game and engine?

by Vickie Eagle · in Torque Game Builder · 11/17/2011 (4:35 pm) · 15 replies

Hello everyone my name is Vickie (hi:) and I've just bought this engine and the adventure kit a few days ago. So here I am plugging along making my 2d game when I start getting these lines in my game (for real!) so at first I thought Photoshop was adding a feather to the edge but after checking closely it had no feathering or tolerances set so in photo shop the graphics looked great. but after loading them in the engine I noticed a grey line on all my pieces. Here just see for yourself what I'm talking about:
www.eaglesoftworks.com/TGB/WG_01.jpgAnd..
www.eaglesoftworks.com/TGB/WG2.jpg
Do any of you have this problem with this engine or is there a technique that you use that I should be using? Is this caused because I'm using isometric graphics? Is captain Kirk a real person? I don't know, just need some advice :))

Thanks in advance~

Always,
Vickie ;)

#1
11/17/2011 (7:13 pm)
Hi Vickie, I think those lines are showing up because TGB by default adds a 'smoothing' filter mode to all the image maps, so just remove it like this:

1) open your datablock file, search for the image map definition:

new t2dImageMapDatablock( someImageMap ) {
   imageName = "~/data/images/someImage.png";
   imageMode = "FULL";
   frameCount = "-1";
   filterMode = "SMOOTH";
   ....

replace the filter mode property with "NONE" as follows

new t2dImageMapDatablock( someImageMap ) {
   imageName = "~/data/images/someImage.png";
   imageMode = "FULL";
   frameCount = "-1";
   filterMode = "NONE";
   ....


Do this on all your imageMaps and the mysterious lines will be gone.

Is captain Kirk a real person? -- definitely yes.

Hope it helps

Hugo


#2
11/18/2011 (12:22 am)
Also, there is an option to apply Defringe to your images, it helps in most cases.

The reason why these lines appear is that realtime graphical calcualtions are less accurate than those used by ps, so the color of pixels that are completely transparent in graphical editor can sometimes bleed into neighboring visible pixels in the game. Photoshop tends to fill transparent area of the image with white color, and I haven't find any way to change that. Maybe there is an editor that is more suitable for that job.
#3
11/18/2011 (2:14 am)
Yes, definitely looks like smooth problem , alternative you can uncheck Smooth in the editor of that image.I always keep it sharp.Specailly when you have alpha channel on an image.
#4
11/18/2011 (9:53 am)
Are those tile maps or individual sprites?

Edit - Ah, should have refreshed before I replied. The previous answers are pretty much spot on. Smoothing is usually the culprit of lines.
#5
11/18/2011 (1:47 pm)
Thanks Hugo for the info that helps a ton, and thank the rest of you for your help as well! All of you are right!, smoothing was the reason for the line, so once I removed it the line was gone! Ok, this is great! but now I have another issue once I took off smoothing the tiles jiggle when I walk by them, LOL! Not sure why that is, have any of you guys seen that before?

Thanks for the replies, you guys are really nice~

Always~
Vickie ;)
#6
11/18/2011 (2:23 pm)
Maybe there is a way to change the color of the line so its like black so you don't notice it so bad? What do you think?
#7
11/18/2011 (4:42 pm)
In our last game, we had this same issue. By simply painting adding a 1% 1 pixel "glow" of black to the objects, it disappeared for us.
#8
11/18/2011 (5:46 pm)
Thank you William! That did the trick.

Great Advice!

Always~
Vickie ;)
#9
11/20/2011 (5:13 am)
If you're using Photoshop to create your graphics you should use the SuperPNG plugin available here:

docs.garagegames.com/tge/official/content/documentation/Artists/Shapes/SuperPNG....

This lets you control the color in the transparent areas. It allows you to save and open PNG files like TGAs, where the transparency is saved in the alpha channel. William's 1 pixel glow trick is basically forcing photoshop to add black to the surrounding transparent pixels, however with the SuperPNG plugin you have full control of all transparent pixels.
#10
11/21/2011 (2:56 pm)
SWEET! Thanks Conor!

Always~
#11
11/21/2011 (6:12 pm)
Well I tried the"SuperPNG" but still had the same problem. William's way worked the best by just adding a 1px glow to the graphic. I did find another way that works a lot smoother and I wanted to share it with you guys. I downloaded this program called "ReaConverter" which seems to work perfect with this engine. Simply save your files as .Gif's with the background transparent and use reaConverter to turn them into .Png files. This works better than anything else I have tried so far.

Always~
#12
11/21/2011 (6:42 pm)
Very nice tip. I'm sure other artists will appreciate it.
#13
11/21/2011 (8:05 pm)
you're a good person Mike, I enjoy reading your posts and blogs~

Always~
#14
11/24/2011 (5:56 am)
Vickie - when using SuperPNG, you have to fill the background of your image with the appropriate color (black in your case) and then paint the transparency as an alpha channel. While this might seem like more work for a simple case like yours where you just want a dark outline it's much more important when your image has different colors along the transparent border - then you can't simply apply a single color glow, because all of these border pixels need to filter into semi-transparent pixels of their own color.

Take a look at this image:

cokane.com/temp/radar_blips.png
Here's how it's created in Photoshop... the top part is the color channel, and the bottom part is the alpha channel (zoomed in to make it clearer):

cokane.com/temp/superpngexample.png
Notice that I fill the background around each icon with the appropriate color so that all the semi-transparent pixels filter correctly. It's really important when making transparent images that the border pixels don't anti-alias onto white, or black, or even onto transparency (ie no background layer so you see Photoshop's grid pattern - Photoshop replaces this with white when you save without the SuperPNG plugin), rather all transparent border pixels must anti-alias onto their own color. That way you can put the image on any color background and there will be no fringe, like this...

cokane.com/temp/superpngexample2.png
If you don't have the SuperPNG plugin installed, and you open that image in Photoshop it actually deletes the color information from the transparent areas which makes PNG a lossy format. This is serious bug in Photoshop and I'm not sure why Adobe haven't addressed it yet.

(This is probably the 20th time I've posted about SuperPNG, but nobody seems to really get what's going on in transparency so hopefully this essay will be the definitive answer and I won't have to do it any more).
#15
11/24/2011 (2:58 pm)
Conor you truly know your way around Photoshop! Thanks for this information I have learned a lot from what you posted and it was rude of me not to say this sooner, sorry about that. I get caught up in my work and lose track of time. I love the fact that people here take the time to help noobs like myself and I don't want you to think for a moment that I don't appreciate you and the fact you have posted this 20 times. You are Awesome for doing so and I want you to know that!

Always~
Vickie ;)