Sprite Sheet Splitting

Hey Guys,

 So Ive been reading about having your game split up a sprite sheet automatically and use frames for animations. It makes sense and all, but what I dont get is how to get the images to appear correctly. What I mean is, normally without a sprite sheet, Ive been taking a single image into photoshop and using the lasso tool to cut out the background. With a sprite sheet, if the program is just creating an image from a certain piece of the big sprite sheet image, it is going to be cutting out a rectangle shaped image. How am I going to get rid of the background so that the image actually looks correct and not an image drawn on some rectangle? Get what I mean? The background, whatever color it may be, will still be visible where ever there is no image within the rectangle.

In the big sprite sheet, use a transparent background. For this you will need to use it in PNG format.

So If I get a sprite sheet off the web, I’m guessing that the backgrounds aren’t transparent right? Is there a way to make it transparent? If not, how do I even go about making my own sheet with a transparent background?

You can manually edit it to have a transparent background. Have you heard of Paint.NET?

Well I have photoshop CS3, would that work?

An alternative to ra4king’s suggestion is to pick a specific color to represent “translucent background,” a color that isn’t used in any of your actual sprites. In your sprite sheet, have all your sprites on that color background. Then, when your game loads the sprite sheet image, have it do so into a BufferedImage, and convert all pixels with rgb==your translucent background color to a 0-alpha color, such as new Color(0x000000). This can cut down on the size of your PNG’s (useful for applets moreso than desktop games).

@BoBear
Yes I was thinking of that solution but most sprite sheets you find online have a translucent background already. Plus it’s not practical if the background color is also used in the images.

Hence magic pink. Real graphics artists (as opposed to developers who make their own graphics) consider the use of #ff00ff in the image as abhorrent as the use of Comics Sans in the text.

So having a translucent background doesnt necessarily mean that when I look at the sprite sheet I cant see the background right? For instance I have a sheet with a kind of blueish background, is it possible that it is translucent when actually rendered into a program?

No, if you have a background that is not translucent, you have to have a method in your code that will check each pixel for that color and change it to 0-alpha.

Ok, so if I make my own sheet, is there some way to make it translucent in photoshop? Im guessing by just erasing the background that will make it translucent? Checking each pixel seems like unnecessary work, Id rather just make the background translucent to begin with.

The simplest way is to “cut up” the image and paste it on a new image with a translucent background.

Ok, so if I make my own sheet, is there some way to make it translucent in photoshop? Im guessing by just erasing the background that will make it translucent? Checking each pixel seems like unnecessary work, Id rather just make the background translucent to begin with.

Never used Photoshop but can imagine this is correct. If you have Gimp this can be done in 3 easy steps. Firstly add a Transparent Layer (alpha channel), then use the select by Colour tool… (Select the colour you wish to use for transparency), then delete the selected colour and save as .png as mentioned previously. Many tutorials how to do this on google.