2d Sprites with 3d Blender??

I am attempting to make a set of 2-d sprites for a game. I am trying to get a good 3-dish look to the image and am going to use the toon edge. The problem I am having is with the transparency of the sprite. Gamemaker is the program that will be used to make the game. It can use one color on a sprite and assign it to be transparent. My problem is that blender antialiases rendered images with the background color. How do I get a solid background color and a solid black edge without sacrificing the antialiased coloring of the model? If I am not being clear enough I will provide images.


Did you try rendering with OSA off?

i dont know that toon edge would be your best option,(then again i dont have much experience so i dont know…)

let me know how this goes, i was thinking of doing something along the lines of this.(actually, i think this is how they did golden sun.)

Heh, forgot to read the part where you wanted to keep the inside of the sprite antialiased. I’ve done this sort of stuff back when I was still doing game dev as a hobby (just not with blender). Okay, the process is a bit tedious, but works good and with good results. What you want to do is:

1.) Render the image once with the background the same solid color as your toon edges with OSA on (I’ve always just used black for this).

2.) Render it again with OSA off and a different colored background, or better still as an image with alpha.

3.) Load both into an image editor that can copy alpha channels (gimp is good and free if you have nothing already). Copy the alpha channel from the image with OSA off and paste it over the alpha channel in the one with OSA on. The result should be what you are looking for.

Ok, I’m good at following that until the second part of step 2. After that I do not understand.

Could you give me more details?

  1. How do I render an image with alpha?
  2. How do I accomplish step 3 in gimp. I have gimp, but have not had very much time to work with it, and finding tutorials online is not always productive with dial-up slowing you down.

Thanks for any help you can give.


You can use the edge settings and rendering RGBA to get alpha background with black edges.

To enable alpha when rendering press the RGBA button under the render options. As far as step 3 goes, change over to channels in gimp and hopefully both images will have alpha channels displayed, then you can just copy and paste, in fact if even just the aliased picture has an alpha channel you will be in good shape.

Ok, I am not bumping, I was asked to post a solution if I came up with one. I have a solution BUT this will only work with sprites that have the edge setting on. If it is not on, I suppose you could use the same basic technique, but would only work if the overall color of the object was the same.

Here are the simple steps.

  1. Set your world color settings to the following image.


This world color is close enough to the edge without being black to cause troubles.

  1. Render your image and save as a .png or .bmp. Saving as a .jpg will cause a antialias effect to compress the image and this will mess things up.

  2. Open a simple paint program (I used Microsoft paint) and just color the world color with paint fill to your personal need. I have showed the final render with the left of the picture using the world color, and the right filled white. If you save the image and zoom in on it you can see the dark blue pixels, however at normal viewing it is so unnoticable that the sprite is usable, and now has a transparency. All of this without having to hand edit each sprite.


Hope this helps, and encourages others to expand on.

Jason Allen Bayne
ManOnFire Productions

Why not simply render in a white world color background, without transparency, then open the image in your 2D image editor (Gimp, Photoshop, PSP or whatever), use the magic wand to select the background, turn off the anti-aliasing option for selections, invert the selection and extract the image? Minor imperfections in the edges could be colored using the brush tools. I agree with others about not using jpg as the output file format, though. Png. gives a cleaner output for easier selection and better result with the magic wand operation. Then you could save your extracted image as a .gif , .tga or whatever file format your game uses from your 2D image editor.

Here’s the step-by-step:

  • Get an old version of blender (2.35a or older), from before they changed the way the “Key” button worked so that it couldn’t actually be used for chromakeying anymore.
  • Turn on OSA and Key (next to “Sky” and “Premul”)
  • Set the world to a colour you’re not using in the picture and turn off “Blend”
  • Render. Save. Done.

However this doesn’t seem to work with toon edges enabled - you’ll have to either do without or use one of the other suggestions in the thread. JaBayne’s is probably the easiest.

[edit: removed rant from here about how they removed a really useful feature here and replaced it with something less useful, when it would have been just as easy and much less confusing to just add another button for it. wait, now I’m ranting in the edit… oh well, this feature was dear to me…]

Ok… this all seems way too complicated…

This seems logical to me, so try this approach:

Render your scene with a solid color background with OSA off and about 4x-8x the finished size you want.

Open up in photoshop or whatever, delete the background(making it alpha) and then size down 1/4x - 1/8x the image to your desired size.

Photoshop should automatically antialias(by resampling each pixel due to resize you’ll get the same effect) the inside AND the outside with transparency due to the reduction on a border between color and transparency…

Then anywhere you put the image the outside should blend in…

Is there a reason this approach wouldn’t work? all you have to do is magicwand+delete+resize… keep it in mind.

edit: ok its really late and I mis-understood question because I thought he was asking for anti-aliased transparency, but the program he is using wont work with that… anyway I am keeping info up because this render big -> size down approach works for many things imho.