Sign in to follow this  
JonathanCCC

2d graphics question

Recommended Posts

JonathanCCC    163
hi,



i'm a C# and XNA user, i'm made simple "schmups" or bullet hell games for fun for myself, however, all my images are sqaured, like I get the images from free google sites, save them and alter them in paint, I can't draw around the character, since it can only save as squares. Is there a way to say, take a picture of a tank from google, save it, then draw around the bits you want and save it without any "background" so to speak.



for example, these free "sprites" .png save as are not sqared, they have no white background etc. [url="http://www.xnadevelopment.com/sprites/"]http://www.xnadevelopment.com/sprites/[/url]

how can I get images, put them into paint and make them sprite like with no sqaureness or background?



I hope I am making sense, is not tell me and i'll explain more.



my images in the game are all sqaured, including bullets! lol

Share this post


Link to post
Share on other sites
boogyman19946    1487
There are multiple ways to deal with this. The first, which isn't quite as efficient, is called bit masking. Basically you have an alpha mask with the contour of the actual image and the image itself, and you do some bit magic with boolean algebra to remove the background of the image as you draw. Since you have to draw two images for this, this probably isn't the best option. If you still choose to do this one, it's probably better if you look up the explanation.

I'm not sure if these are possible in C#, but here are the other two ways:

You can turn the background to a unique color that isn't used and instruct the drawing calls to skip over pixels of that color. (Actually, I only used this in Game Maker. I've never actually had that done in code).

or

If C# supports alpha channels and gif images, you can actually make the background transparent (the bits store an extra variable for opaqueness).

You might want to look through the functions and/or classes that you use for drawing. I know Java supports gif and that's how I get around, I'm sure C# does too.

Share this post


Link to post
Share on other sites
DarrenHorton    110
[quote name='JonathanCCC' timestamp='1306461006' post='4816268']
hi,



i'm a C# and XNA user, i'm made simple "schmups" or bullet hell games for fun for myself, however, all my images are sqaured, like I get the images from free google sites, save them and alter them in paint, I can't draw around the character, since it can only save as squares. Is there a way to say, take a picture of a tank from google, save it, then draw around the bits you want and save it without any "background" so to speak.



for example, these free "sprites" .png save as are not sqared, they have no white background etc. [url="http://www.xnadevelopment.com/sprites/"]http://www.xnadevelopment.com/sprites/[/url]

how can I get images, put them into paint and make them sprite like with no sqaureness or background?



I hope I am making sense, is not tell me and i'll explain more.



my images in the game are all sqaured, including bullets! lol
[/quote]

If the background is a solid colour such as white then you can select a coloured region and then delete that colour.

This will leave you with all the other colours. If necessary select and paste any areas from the original onto the new image if it has removed some white areas from the part of the image you need.

Selection of a coloured region alone doesn't "appear" supported in Paint.

However it is in the free "The Gimp" image manipulation program.

So download the Gimp and select the white region and delete away.

Save as a png and your done.

How to remove a whitebackground from a picture is a valid search on the internet, as I have searched for it myself.

So if you need better instructions I would recommend you make a search of the internet.

Share this post


Link to post
Share on other sites
VildNinja    789
Use the alpha channel and save as 24 bit png. Don't use gif, since it only allows fully transparent or fully opaque.
And remember to activate the alpha channel in XNA:


[code]spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend);[/code]

But I'm not sure if paint supports png, otherwise you'll have to use Gimp or Photoshop.


Share this post


Link to post
Share on other sites
BeerNutts    4400
The keyword you're looking for is color-key. In Graphics, you set a value in your images to be transparent when it is rendered. This should be done by the graphics Hardware chip.

For example, in my game, I set color RGB(255, 0, 255) to be my color key (bright purple), so all my images have this purple background around them when I edit them.

However, in my game, I set the color key for each image to be RGB(255, 0, 255), and when it is rendered, it only displays the image, and none of the purple background. In SDL, you call [font=monospace][size=2]SDL_SetColorKey(), and pass it the bitmap and the colorkey to make transparent.[/size][/font]
[font=monospace][size=2]
[/size][/font]
[font=monospace][size=2]In SFML, it's this:[/size][/font][font=sans-serif][size=2][size="2"][url="http://sfml-dev.org/documentation/2.0/classsf_1_1Image.php#a777c411024de586400181954deadd24d"]CreateMaskFromColor[/url] (const [url="http://sfml-dev.org/documentation/2.0/classsf_1_1Color.php"]Color[/url] &color, Uint8 alpha=0)[/size]
[/size][/font]
[color=#555555][font=sans-serif][size=2]Create a transparency mask from a specified colorkey. [/size][/font][/color][quote name='JonathanCCC' timestamp='1306461006' post='4816268']
hi,



i'm a C# and XNA user, i'm made simple "schmups" or bullet hell games for fun for myself, however, all my images are sqaured, like I get the images from free google sites, save them and alter them in paint, I can't draw around the character, since it can only save as squares. Is there a way to say, take a picture of a tank from google, save it, then draw around the bits you want and save it without any "background" so to speak.



for example, these free "sprites" .png save as are not sqared, they have no white background etc. [url="http://www.xnadevelopment.com/sprites/"]http://www.xnadevelopment.com/sprites/[/url]

how can I get images, put them into paint and make them sprite like with no sqaureness or background?



I hope I am making sense, is not tell me and i'll explain more.



my images in the game are all sqaured, including bullets! lol
[/quote]

Share this post


Link to post
Share on other sites
VildNinja    789
[quote name='BeerNutts' timestamp='1306505167' post='4816430']
The keyword you're looking for is color-key. In Graphics, you set a value in your images to be transparent when it is rendered. This should be done by the graphics Hardware chip.
[/quote]

Nope color-key wont do it. The link op gave contained png sprites with multiple levels of transparencies. Color-key/gif doesn't support that.. Alpha channel is the way to go :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this