Adding Anti-alias and alpha channel to png image

Started by ENAY, March 27, 2018, 03:00:14

Previous topic - Next topic

ENAY

Ok, let's say I have an image, it has magenta, 255,0,255 as it's transparency.
Right now I have pixel perfect images but I want to remove that magenta (since it's all in the same png image) and add an alpha channel. What I want to do though is have the outline take advantage of anti aliasing as part of the image, with the outside pixels being half transparent.

An idea I have, is with say Photoshop. Select the image, contract the selection by 1 pixel, inverse the selection and then delete it but with feather enabled so it creates an aliased edge.

Is that a good way to do that, or there an easier way?

Basically I want antialiasing based into my images so they don't look so blocky in the main game.

Matty

I don't know if you can add anti-aliasing to an image after the fact.

I know you can make the magenta alpha transparent instead. But if there's no anti-aliasing already I'm not sure it can easily be added in. Not true antialiasing anyway - you might be able to fake it and get a similar result, but you'll corrupt the original image somewhat (make it effectively a bit skinnier in a way).

?
My thoughts anyway.

GaborD

I guess you could write a simple shader for the conversion (would be really easy to add the antialiasing that way) and then save out the result as PNG or such, depending on which engine you use. AGK can save PNG, I save out images with alpha channel all the time.
This would also allow you to batch process a lot of them without having to fiddle around in Photoshop with every image.


ENAY

I'm using Unity and did use Photoshop in say like 2002, Photoshop 5.5 I think it was.
I remember using the tool in it to cut out an image, with feather turned off because when you did, it WOULD alias the outline of the image and if you tried to flatten the layer, it would alias into white.

I'm not sure how I would write a shader in Unity GaborD, but yes certainly something to look into later.

Derron

#4
With my frameworks code you could try to do what you want
https://github.com/GWRon/Dig/blob/master/base.gfx.imagehelper.bmx

-> outlineImage = ConvertToOutLine(...)
This is there to only extract the outline of a given image and replace it with a single color. You could adjust it to just use the original color there.

-> blurredOutlineImage = blurPixmap(outLineImage.Lock(0,True,True), 0.5)
This should make it "blurry" in both directions - so like adding kind of an "anti-alias"

-> DrawImageOnImage(blurredOutlineImage, originalImage, ...., DRAWMODE_MULTIPLY)
Draw the blurred outline on your original image


I have not tested it, maybe the "inner blur" (inside the outline) affects the colors when multiplying - in that case you could adjust the code of
ExtractPixmapFromPixmap:TPixmap(pixmap:TPixmap, shape:TPixmap, offsetX:int=0, offsetY:int=0)

To not _extract_ pixel data, but reset it. So effectively you create a "CutPixmapFromPixmap" function - if really desired, I could code that this evening, it's not that hard.
With that "Cut" function you would cut your original image from the created "blurredOutlineimage" so only the outer blur is still there. Afterwards you draw the "outer blur"-image on the original image (DrawImageOnImage()) and it should behave similar to an outer-glow in Photoshop, with just the original pixel data being used as color instead of a single color glow.



An alternative to above:
- create the blurred variant of your image
- paste the original image on the blurred image with DRAWMODE_NORMAL - so it overwrites the "inner blur".
This works if the image does not have fully transparent pixels which else _might_ show the inner blur (depending on the blur settings). You will have to try - your mileage may vary.

bye
Ron

Kryzon

With GIMP you can do this quickly: open your opaque image, add an alpha channel to the only layer in the stack, use the wand select tool to select all magenta parts and delete them, then use the Antialias filter (https://docs.gimp.org/en/plug-in-antialias.html).


Internally, it upscales your image using the Scale3X algorithm and then downscales it.

ENAY

Derron Kryzon many thanks for your input. :)
In a month or two, I'm planning on digging out an old Blitz+ project and rewriting it in Unity using the 3D effects of that language and so I'm looking at improving sprites I did way back in 2002/2003.
I do have Gimp laying around but yeah, if I can batch output all my sprites that would be handy, as I have about 600 or so :)
I'm eager to get started on this today but man, is the project I am on right now busy as hell. It's been 6 years since I started doing any projects so I thought, might want to get started on doing a project in my spare time, instead of just playing games and procrastinating as little as possible on the Internet.