Bit Blot Forum
Aquaria => Modding => Topic started by: Moogie on May 26, 2010, 07:01:17 pm
-
Hi all. :)
I'm a new denizen to the world of Aquaria, and so far, am enjoying my time with it immensely. I just found Li today, but decided I did not like the way he looks, so I figured I could do some editing to him.
I've read a few threads here that give tips and advice about the white halo that appears due to the PNG being flattened onto white pixels. Try as I might, though, I just can't seem to get it working right for me!
I'm using Photoshop CS3. The PNG files I'm working on are 8bits/channel (I have tried other bit-settings but they appear scrambled in-game).
I tried using an Alpha channel and the Solidify plugin, but whenever I save the PNG file it loses its alpha channel. The only way I see around this is to use 16bits/channel, but as I mentioned, that just appears corrupt. :(
What I thought would be a simple edit has turned into something that required me to register here to ask for help. :) I wish my urge to register had come from a more pleasant circumstance, but oh well. I hope someone will be able to guide me to a solution. Perhaps a short step-by-step specifically for Photoshop? (I found something for GIMP, but I couldn't translate it to PS.)
Thanks. :)
-
Here you go. (http://www.robinwood.com/Catalog/Technical/SL-Tuts/SLPages/WhiteHalo1.html)
-
Hi, thanks for your reply. :) Unfortunately I have already tried following that tutorial. It's for Targa files, not PNG.
I tried it anyway, but my alpha channel always disappears when I save the file, and I still get the halo.
-
Oh, right, well... then my advice to you, place a black "halo" around the things yourself.
AKA
You paint a pretty wide 1% visible thick line around the original graphic, that takes away the white halo.
-
I don't quite understand why this issue is happening (I mean, that's the whole point of an alpha channel, right?) but surely it could be avoided just by starting with a black background when your create your graphics, instead of white?
-
It's happening because of the antialiasing ingame. You have full transparency right next to the normal opaque pixels, which, when being antialiased it mixes the solid pixel with the (nonexistent) standard white transparent pixels.
So when you would put a black 1% opaque halo around it yourself the solid pixels mix with the black and the white pixels at the edge aren't visible because it's mixing with a 1% visible pixel.
-
Thank you, Alphasoldier! :) That's exactly what I needed.
@Guy: You're probably thinking of a similar issue that happens when people try to 'cut-out' a graphic from a white background, that leaves little stray pixels around. :) This is different, as you start with no background at all, just a transparent area.
Result with the 1% border:
(http://img268.imageshack.us/img268/3304/headti.png) (http://img715.imageshack.us/img715/438/headhappy.png) (http://img180.imageshack.us/img180/6989/headangry.png) (http://img534.imageshack.us/img534/4882/headhurt.png) (http://img715.imageshack.us/img715/3647/headsurprise.png) (http://img412.imageshack.us/img412/1624/headlaugh.png)
(http://img80.imageshack.us/img80/8630/liedit.png)
-
OMG love the hair; much better than the Mohawk or whatever you call it. Do you let other people use your sprites? We would love to have Li as a separate main character along with Naija but it is hard to script. I would just like him to have cute hair for now...
We are also using PNG files and either GIMP or My Paint; I have Photoshop but I don't really know what I'm doing in it and use it for some things I can't figure out in GIMP. Sometimes the extra pixels and bad erasing show up better in PS than GIMP. We've been having constant white halo problems and I am having Yogoda fix mine but I need to learn what to do in all cases so I can do it myself. Sometimes the solution goes in one ear and out the other...
-
@Guy: You're probably thinking of a similar issue that happens when people try to 'cut-out' a graphic from a white background, that leaves little stray pixels around. :) This is different, as you start with no background at all, just a transparent area.
No background? I'm not sure what you mean, every image has some colour in the background when you hide the alpha channel. Usually this would default to white but if you, say, add a new layer of 100% transparent pure black behind all your other layers, then when you save as png the invisible background will be black. Or am I still missing something here...
-
That's one nice haircut man, love the sprite.
Guy, any completely transparent pixel always defaults to white in PNG (I believe there's an option to not have this, but I'm not sure).
Secondly, PNG does not have a separate alpha channel, it only has transparency.
-
Okay, I'm more confused now. I understand your first comment, and while it entirely depends on the software creating the PNG, it does seem to hold true for the program I'm using too (Acorn).
I totally don't understand your second comment though. A PNG with transparency uses 32 bits per pixel (RGBA) and therefore has an alpha channel inasmuch as it has red/green/blue channels. I have another program (GraphicConverter) which seems to not handle alpha channels in the 'typical' way. Eg, I can paint black into a fully transparent area and it will remain transparent but will correctly record the pixels as black when saving. I can verify this because the same program can also 'remove' the alpha channel, revealing the true colour of all pixels in the image. Just as an example, here's a Li head sitting on a forest background but retaining the original mask, so you can't see the forest without removing the alpha channel (unless you're using IE6, which I understand won't recognise the alpha channel in the first place ;)):
-
I think the problem is that while PNG has an alpha channel, Photoshop doesn't treat it like it does, instead preferring to think of transparency as places where there are no color. And where there is no color... Photoshop doesn't let you give it a color. xD
-
I don't know about Photoshop, but in Gimp there is an option that allows to save the color of transparent pixels when saving the picture.
Picture with alpha layer :
(http://dl.dropbox.com/u/4422249/pictures/head.png)
Alpha layer removed after saving color for transparent pixels
(http://dl.dropbox.com/u/4422249/pictures/head2.png)
Alpha layer removed without saving color for transparent pixels (pixels totally transparent are defaulted to white)
(http://dl.dropbox.com/u/4422249/pictures/head3.png)
So the key to remove the halo is to fill the transparent areas with black and save the transparent pixels color (I don't know how to do this in Photoshop)
-
Erm, I already gave him the solution, Yogodo and I find your explanation confusing. @_@
And guy... what I meant to say is, is that Photoshop does not make a different alpha channel in the channel list right next to red, green and blue, but it uses the transparency that's in the picture, if said transparency if completely transparent it defaults to white.
-
Sorry if it was confusing, just wanted to tell how it works in Gimp :-[
-
Right. (And that border around his head in the last pic shows that the original mask was not 100% transparent there)
Is that how you've been doing it for yours, Yogoda?
Alphasoldier, it would seem that this method is both quicker (simply fill black and then save with that option set) and better (maintains 100% transparency rather than 99%, though admittedly this is a negligible difference). This is what I was trying to say in my first post except I didn't realise programs generally default to white on 100% transparent pixels – Yogoda now points out that it's an easy setting to change.
I would guess that the reason programs default to white is purely for the sake of compression. A detailed background that is entirely invisible simply makes the image larger for no real reason.
-
Your method is quicker assuming the program allows you to set the color of transparent pixels. Otherwise, it's impossible without having to bring the image into another program, which is a bit of a hassle.
-
It does indeed sound like the process is much simpler in GIMP compared to Photoshop. Perhaps CS4 handles this better.
@Sindhi: Feel absolutely free to use them in any way you like. I didn't spend much time on them, so if you want to make any edits or tidy him up a bit, that's also welcome. :)
-
It's not the fact that GIMP handles it better, it's the fact that the default on GIMP is that it has an alpha channel instead of integrated transparency.
I bet that, somewhere deep hidden in Photoshop (perhaps less deep in CS4), it has the option to create and save the alpha channel instead of transparency in the picture.
None the less, as said by someone before, white pixels take less space than complicated colors on places where you won't even see them so it's logical it defaults on that.
-
Hm, I searched around and confirmed that Photoshop does not have a setting like GIMP does (which seems odd, given that Photoshop is by far the biggest and most bloated image editing program in existence). If you're having to remove halos a lot, it may well be worth your time to download GIMP or some other program that can do this. I'm sure drawing black lines around your images gets tedious after a while ;)
Alphasoldier, I'm still a little fuzzy about what you mean when you talk about alpha channel vs transparency but it sounds like you're referring to the way the program presents the image to you and allows you to work with it, rather than something to do with the PNG format itself or how the program actually saves it. The setting in GIMP that Yogoda mentioned is simply a checkbox that you get when saving the image (Save color values from transparent pixels (http://robynhuffaker.com/sculptblender/wp-content/uploads/2010/03/gimpguide-a3.jpg)) – I would be surprised if it actually treats PNGs any differently to Photoshop in the manner that you're talking about.
-
What Alphasoldier means is that there is no alpha channel in Photoshop: instead the alpha channel is represented by simple "lack of color data" in the actual picture. Therefore, where the image appears to be transparent in the channel is where the alpha channel--and the white color-- is defined to be. If I'm understanding him correctly.
And as his post below states, I was not. ._.
-
As the tutorial given comes from SecondLife, which also has such Halo problem it's because it always converts the image there, either resizing it or changing the format it also treats the completely transparent pixels as white ones, eventually, when resizing it to it's default sizes (always to the power of 2), it mixes pixels again.
And all I said Guy is that instead of using a transparency layer, they simply just put transparency into the editing. And that any pixel that's transparent is defaulted to white so it costs less memory, that saving color values from transparent pixels is something Photoshop should have too, thought sadly does not.
Anything else you might've said has really not come through to me as you're confusing ME now, I thought I was quite clear earlier on.
-
Great, so we confused each other :D. I think I understand what you mean now, although what I was saying was that I think you'll find GIMP and most other image editing programs treat transparency just the same as Photoshop does (my program Acorn doesn't have any features for working with channels at all). The only difference in GIMP is the presence of that checkbox ;)
-
Thanks, Moogie, we would love to use your Li in our mod!
I find going back and forth among Gimp, Photoshop 7, and My Paint seems to get the job done; the only problem I have is remembering to save My Paint files as png transparent the first time I save there; if I forget that part I have to cut the object out of the background again and sometimes have the white halo problem. There is more than one way to cut the background, thankfully, and I am learning which way works best for which graphic. I'm still mostly using the mouse and My Paint, but need to get more confident with the stylus and wacom pad. When Yogoda goes home I will have the desktop again, which is more comfy for using the pad. I still don't understand why sometimes I have a white halo problem and sometimes I don't. You guys have probably already explained it but I am not understanding. It's ok, I am used to having a steep learning curve...
-
It's ok, I've read it all a few times and don't really get it either!
I kind of understand, but I think a problem may be that default eraser on photoshop doesn't leave a halo, while the edge of a brush often does. Or the other way round. But still not sure.
If Derek lurks here perhaps he could let us know what he uses (:
I'm using Photoshop, which probably isn't the best sketching software anyway. I may just download something else, since it doesn't look like there's an easy solution.
-
As Alphasoldier briefly explained earlier, when an image gets scaled/stretched/rotated/distorted or otherwise manipulated to anything other than its natural form, a type of anti-aliasing (http://en.wikipedia.org/wiki/Spatial_anti-aliasing) is needed to keep smooth edges and maintain the clarity/detail of the image. When Aquaria does this, it can result in pixels around the outline of the image being blended with pure white pixels in the fully transparent portion of the image. The solution is simply to make the pixels in the transparent portion black instead of white, but Photoshop doesn't make this easy for you.
This isn't to do with the tools you use to edit the image, it's just that Photoshop doesn't save the colour of fully transparent pixels and instead records them as white. It does this in the interest of saving file size (it considers PNG to be a "web format") - solid colours compress easily in the PNG format while high detail that is invisible (see the Li head in my earlier post) is mostly pointless and doesn't compress well. A smarter thing for it to do would be to set the colour of the fully transparent pixels to the currently selected background colour, but I guess Photoshop isn't concerned about this ;)
In the end though, I'm pretty sure the whole problem shouldn't actually be happening and is probably a fault of the image-manipulation code used by Aquaria (SDL?). I wonder if it would be possible to fix it when Aquaria goes open-source...
-
White halos are photoshop's fault.
-
Another solution could be (I think) use Paint.Net to resize/scale and turn off anti aliasing. Then you could select the inner pixels and blur them a tiny bit if you wanted to.
-
White halos are photoshop's fault.
That makes me wonder... did the devs use photoshop? XD
-
White halos are photoshop's fault.
Hm yeah that's what I gathered. And unfixable on there too huh, no plugins or anything, based off my googling.
I guess I'll download something else in a bit
-
It's fixable, you just have to make a 1% visible black halo around the graphic as said before by me here.
-
As in draw it? or do a stroke?
Because drawing it doesn't work. Not always anyway... it's f'ed up. I have lots of halo's next to black lines
-
There is a better method than using stroke...
http://www.robinwood.com/Catalog/Technical/SL-Tuts/SLPages/WhiteHalo.html
^ There's also a version that lets you use a PS plugin to do most of the work for you.
-
And here's a blurst video about it http://vimeo.com/8444889
-
^ thanks for that, but I'm having the same issues as the OP.
That is, when you save it as a .png, the Alpha mask just gets flattened or something, and you get no transparency at all (following the linked tutorials).
OP said it was because the tut was for .Targa?
In any case, tutorial is fine, make alpha channel, use plugin, but then when you save.. nothing. Might be something obvious I missed?
But 1% visible stroke works for me now (:
Thanks alphasoldier, I was doing it wrong. Edit: It still gives a slight Halo at certain zoom levels in-game, on certain colour backgrounds, but oh well.
At least now I've learned lots about Alpha channels. Assuming it works like a Layer Mask. If not, I have learned nothing (;
-
You need to save it as a 32-bit PNG. (8 bits for red, 8 bits for green, 8 bits for blue, 8 bits for alpha)
-
Thanks for your help, but PS doesn't seem to do 32 bit png. What program do you use?
When I go to save for web or save as they both don't allow transparency.
Assuming I've done it right - Here's a pic of what I've done
http://i12.photobucket.com/albums/a238/aerozol/examplealpha.jpg (http://i12.photobucket.com/albums/a238/aerozol/examplealpha.jpg)
-
Yeah, you don't get the option to save as a 16/24/32 bit PNG, you do however with Targa.
What you did however aerozol is completely right, I just don't know how you would get a save option for PNG.
When you DO put the mode to 32 bits (image > mode > 32 bits/channel) you suddenly don't have the option to save as PNG anymore. Only as .TIFF and some other photoshop extensions.
-
In My Paint (free) you can save as png transparency and it saves you the trouble of cutting the background. And no white haloes.