Drawing Vector Graphics for 2D Games

Started by
3 comments, last by popsoftheyear 12 years, 2 months ago
I've been developing games for sometime, while there has never been a solid release me and my partner have been working at the craft for a while. I've always used photoshop, paint, or any of these programs to create sprites. I've seen recently that I would have a much easier time being able to draw the 2D "sprites" myself. However, I do not know how to go about doing this. I have used a freeware program called Inkscape, which utilizes vector graphics, to draw things and export them as rasterized pngs. I notice when I do this, the drawings have what looks like a white border around them that is actually comprised of different shades of white to black (it is a black and white drawing).

I may be going about this all wrong, and if I am I'd like someone to tell me. This is essentially what I'm trying to do: Draw "sprites" with my drawing tablet and turn them into game resources. The way I'm going about it right now creates a white border around the images that will obviously look funky against a game background. I'd like to know how to correct this or a more appropriate program to use. Thank you.

(Attached is a little piece that shows what I'm talking about exactly -- Notice the "white" lines around the drawing)
Advertisement
to me it looks like its trying (and not very well) to AA the white of the actual image, is the blue actually there? and if so is it part of or just above? if its part of it could be a error on the programs part, if its just above the program might be adding AA, try making the blue part further out, so that even if it tries to AA it will be hidden by the blue
This really isn't a great test image, I'll explain it briefly. There definitely is some AA but because of the nature of the program (Inkscape) I can't seem to find an option to disable it. The blue is the drawing itself, and not something I'm actually trying to use in a game it's just a test drawing to display my problem. My in game graphics would look more like sprites and be of noticeably smaller size, so I wouldn't be able to hide any of it off screen. The black is a "background" added behind the drawing, and the root of my problem. If I put it behind any nice looking background, it will produce a similar effect and look shoddy. Do you happen to know of any better vector based programs or how to fix this problem in Inkscape itself? I have been looking around and will continue to.

(For the record: I'm looking for a vector based drawing application because it creates whimsical strokes and our graphics are trying to reach a storybook sort of look)

EDIT: Adobe Illustrator is capable of disabling AA and create the effect I'm looking for. However, I find it generally clunkier and would prefer to use Inkscape or a free alternative for a commercial release.
You should use a program called Paint.Net . Open up your png in it and use the paint bucket to surround your image in a background color. You can adjust the color tolerance which will allow the paint bucket to color over any shade of white without destroying your image. (I think you can do the same with photoshop) I hope this helps.
How are you accomplishing alpha blending in code? For starters, the alpha seems to be applied inversely. It would also be helpful to use a test background with a pattern... not just a solid color, in order to better see where the issue is.

[edit] ah yes, on second look, you're NOT doing any alpha blending. Also, how is the png exported? AA is fine, but it should not blend the blue towards white, instead, it should make use of the alpha channel in the png. Make sure you are exporting to 32 bit not 24 bit.

This topic is closed to new replies.

Advertisement