0
\$\begingroup\$

I'm a beginner at making 2D games. Up until now, I always created my games with a black background, or a fixed color. This is because my sprites always have a black (or a solid color) background, and I have to set the background of the game black so the sprites won't be moving around with a black box surrounding them.

Now I want to be able to set the background of the game to an image or texture.

What do I need to do in order to achieve that? Is it possible to design sprites without a background in the first place? Currently if I need a sprite of a guy standing, I would draw the guy on a black rectangle. Is it possible to set the rectangle to be transparent instead of black?

\$\endgroup\$
  • 1
    \$\begingroup\$ Yes, you can set the sprite to have a transparent background, and that is both the easy and conventional way. You should find a ton of suggestions just Googling for that, e.g. "how to make sprites transparent". I think every modern image editing tool should allow that. The only catch is that you'll need to use an image format that supports transparency - PNGs are a good choice. \$\endgroup\$ – Chris Mills-Price Jan 9 '14 at 22:45
  • \$\begingroup\$ You aren't mentioning what graphics API and/or programming language you are using, so the question what kind of coding exactly you need to do can't be answered. \$\endgroup\$ – Philipp Jan 10 '14 at 10:09
2
\$\begingroup\$

This is very possible. Most graphics APIs support a concept known as alpha blending, a process of combining two images in such a way as to make it look like one of them is transparent.

This is generally accomplished by adding an additional color channel to the standard red, green and blue channels: alpha, which represents how opaque a pixel is. Zero indicates a fully transparent pixel, and the maximum value (usually 1 or 255 depending on how the color channels are represented indicates full opacity).

Thus, to accomplish your goal of a game with a background other than solid black, you need:

  • To author your sprites such that the "background" parts of the sprite is transparent (has an alpha of zero) and the foreground parts aren't (full alpha, or partial alpha to give a "see-through" effect to part of a sprite). Most image editors support this, consult your editor's documentation.

  • To save your sprites such that the alpha is preserved (i.e., in a format that supports it). .png is widely-supported and has alpha-channel support.

  • To load your sprites into RGBA textures. Often this will be handled implicitly by your graphics API, if you are using utility functions of the form "load texture from file." If you do have to manually specify a format, make sure you specify one that has four components ("RGBA" for example).

  • To enable alpha-blending support in your graphics API. This is the part where you will have a lot of variability depending on what you are doing. You can consult your API's documentation on alpha-blending to learn how to enable it, it's usually only a few calls to enable the function and describe the blend factors. For example, in OpenGL you need to make calls to glEnable and glBlendFunc.

  • To make sure your shaders, if you are using them, correctly output alpha values from the fragment shader. Since the alpha is stored in your texture (if you did the previous steps above), this means you just need to make sure you sample the full color from the texture, and aren't doing any masking to just the rgb components or anything.

You may also run into a technique called color key transparency. This is a similar technique, often used when for whatever reason alpha channels aren't available or are undesired. It's less common these days, it was used more often before hardware accelerated rendering was so common and we would blit our sprites by hand. It works, essentially, by selecting a color meant to be transparent (usually something like a hot pink or full blue, something unlikely to be used for "real" pixels) and simply not copying those pixels when blitting an image. These days it is often easier to simply use the alpha-based methods, or at least translate color-keyed sprites into ones with alpha by the time you get to rendering via the graphics card.

\$\endgroup\$
  • \$\begingroup\$ APIs other than D3D or OpenGL (whether or not they actually use D3D or OpenGL underneath) can still provide alpha-blending support (it can be done in software). They also may provide color key transparency support, which is why I mentioned that as well. APIs that aren't 3D may not support "textures," that's true, but one can usually replace texture with "sprite" in those cases. \$\endgroup\$ – Josh Jan 10 '14 at 18:44
  • \$\begingroup\$ Maybe if I read your whole answer before commenting I would have realised that it would be redundant. (Stupid brain, learn to read!) \$\endgroup\$ – aaaaaaaaaaaa Jan 10 '14 at 18:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.