Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

2D All the way! / Adding transparency to a sprite accurately

Author
Message
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 28th Mar 2011 00:20
I hope this is the right place for this, but i had a sprite sheet that uses a brown background, all very well if you want to use that as the transparency so you can just set color key to that brown. But i didnt want that, that brown might be something i would use. And so i went about making the sprite sheets 'transparency' the standard 255,0,255 bright pink.
The problem i have is that a pink outline still shows up around the character on every frame because what photoshop does (trying to be clever) is sort of dampen the color, even when you cut around each frame using the magic wand tool, it still manages to overlap so it appears pink but is actually one or two colours from it, making it show up as set color key will only do the one colour.

Does anyone have any tips as to how to change the background colour to a solid pink without getting the outline or having to draw with the pencil tool around every single frame. How do folk go around this. Your help is much appreciated.
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 28th Mar 2011 01:00 Edited at: 28th Mar 2011 01:11
well, since you have photoshop, the issue that you're describing is simple "user error" as there's no reason that i can think of that will cause it otherwise. my hunch is one of these is happening:

> you're saving it as a .jpg file which is causing the magenta (rgb 255,0,255) to bleed over when compressed/saved. so, from within photoshop, save in lossless format. .bmp is fine but .png is better. while you're there, consider removing the magenta all-together and utilize the format's built-in transparency. dbpro handles .png files fine (without dealing w/ set image colorkey() at all)

> you're loading the file (within dbpro, i assume) without the ,1 texture flag. you should be doing something like:

load image "myImage.png",1,1

otherwise/without it, when dbpro loads it, it will do it's own kinda "compression" thing and blur the image/cause colors to bleed.


Quote: "what photoshop does... is sort of dampen the color"

er... not really, unless you tell it to, somehow. if you're using the paint bucket or magic wand tools correctly, this isn't the case.

if either of the the above applies/solves your issue, good deal. otherwise, post one of the (original) images and let's have a closer look at the problem.

Virtual Nomad @ California, USA . DBPro V7.5
AMD Phenom™ X4 9750 Quad-Core @ 2.4 GHz . 8 GB PC2-6400 RAM
ATI Radeon HD 3650 @ 512 MB . Vista Home Premium 64 Bit
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 28th Mar 2011 01:23
Quote: "well, since you have photoshop, the issue that you're describing is simple "user error""


Yeah i know, i wasnt blaming the program, i know its my fault. I cant even use photoshop properly (thank christ work paid for it, shame they wont pay me for training on it), hence why i was asking for hints on how to avoid it.

When i said "what photoshop does... is sort of dampen the color", basically what i meant was 'causing the magenta (rgb 255,0,255) to bleed over when compressed/saved.' I think i worded this incorrectly.

What i will do is try to save the image as you have suggested as a png or bmp but i honestly think its my use of the wand tool coupled with paint bucket. I was just wondering if you had any hints or setting on those tools i could use to avoid this.

Now as for saving it as a png, i can usually get the results i desire using those but unfortunatley there is something wrong with the collision in eXtends that doesnt work with pngs which i why i was trying to go for bmp's but i get the pink outline issue with bmps as well, which tells me its definately the way photoshop bleeds a little of the colour over the wanded outline, using the settings that i use. I have tried a lot of different settings but not knowing enough about what they do it hasnt helped me achieve the results i wished for.

I can get what i want if i set the pencil colour to 255,0,255 and paint around each sprite frame, but when there are hundreds of frames the idea of this is daunting. What are the quick tips for cutting the background out around the sprite and popping the appropriate colour in.

Thanks for your help so far.
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 28th Mar 2011 02:25 Edited at: 28th Mar 2011 02:30
ok, now we're getting somewhere. i didn't know about the extends issue.

Paint Bucket Settings
Mode > Normal
Opacity > 100%
Tolerance > 0
Anti-Alias > No
Contiguous > No

(i use CS2, so... you may have something else/more than i know about)

with the above settings:
1) Choose the new color (ie, Foreground Color: Magenta)
2) Click any pixel of the color you want to change within the image
3) Save

note on Contiguous checkbox: this means do you want to alter/select every pixel of the same color throughout the entire image or should the tool only select/alter the pixels of the same color that are not surrounded by pixels of a different color. since, in this instance, you want to change all pixels of one color to magenta, un-check the box. but, there are times when, during your work, you may want only those pixels that are directly connected to the pixel you choose (think "flood fill" behavior).

Quote: "What are the quick tips for cutting the background out around the sprite "

the days of manually replacing colors, pixel by pixel, should be left in the past where they belong. get used to the magic wand and paint bucket tools and save yourself massive amounts of time in the long run. i used to do what you're contemplating here and i'll never do it again! alas, if you must, the zoom tool is your friend.

btw, if I had hundreds of images to process like this, i'd dig into image memblocks and write a batch processing app

hope this helps!

Virtual Nomad @ California, USA . DBPro V7.5
AMD Phenom™ X4 9750 Quad-Core @ 2.4 GHz . 8 GB PC2-6400 RAM
ATI Radeon HD 3650 @ 512 MB . Vista Home Premium 64 Bit
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 28th Mar 2011 10:18
Thanks for the tips, i am going to try this out on the image i had in mind later on and let you know how i get on.
I am a little unsteady on my feet at the moment with DB pro (and photoshop for that matter ) so i dont really know what is meant by writing a batch processing app using memblocks, i have heard of them but havent covered them as yet.
However your photoshop tips i think will set me on the right path, fantastic stuff. If i get any problems ill pop back here.

Thank you!
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 30th Mar 2011 01:53
Ok i tried those setting but get some inaccurate results. Its still not really doing what i want it to do. I was wondering if there was anyway this can be done wit this particular image without using the pencil tool and hand drawing the extra border that comes with it when you either use the magic wand tool on various settings or the paint bucket tool.

Image is attached.

Attachments

Login to view attachments
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 30th Mar 2011 03:56 Edited at: 30th Mar 2011 04:00
well, the lines are fixed in a couple of minutes with the paint bucket set on contiguous (3-4 shades of tan there) with 1 or 2 stray pixels to be taken care of by the pencil. the background is another story... you can flood fill the brown that's obviously background but you'll still need to go in with the pencil and fix 2-3 levels of pixels around the edges. if you set tolerance on the paint bucket to ~35%, it's about as close as you can get but it'd still require manual touch-up

it's a shame what people do to innocent pixels (unless this was never meant to be (re-)used and/or the aftermath of someone's ill-advised handiwork). alas, "fixing" that image is beyond me and/or the time i'd be willing to spend on it.

Virtual Nomad @ California, USA . DBPro V7.5
AMD Phenom™ X4 9750 Quad-Core @ 2.4 GHz . 8 GB PC2-6400 RAM
ATI Radeon HD 3650 @ 512 MB . Vista Home Premium 64 Bit
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 30th Mar 2011 09:50
Ah well at least i know that doing it manually is the only way to do it. Maybe the images were never meant to be reused as you said. Although they do come royalty free from Reiners (sp?) tileset website. At least it will serve a purpose until i am competent enough to create my own. Thanks for your help in this thread.
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 30th Mar 2011 23:43 Edited at: 31st Mar 2011 00:42
well, now that you mention reiner, i found what that the image you provided differs greatly from the original reiner set of ogre sprites which are perfectly fine, clean grapics. did you build the sprite sheet yourself from the orginals (or was that image someone elses work)? regardless, that's a whole other ball of wax and easily remedied by building it correctly.

assuming you'll ask (and for anyone else watching this thread), you'll notice the same walking frames are originally sized at 96x96. the sprite sheet you provided had frames @ 64x64 and maybe this is where the image got messed up (using an ill-advised method of resizing). so, my question would have to be "do you need 64x64 frames or are the original 96x96 frames fine?".

if you need to resize the frames to 64x64, each direction of the walking animation is made up of 8 frames, so create a new 512x512 (8x64) image and do the following for each frame (assuming photoshop):

1) under Image, choose Mode > Indexed
2) resize via Image > Resize (bi-cubic checked. you could play with sharpen, etc but i don't think it's necessary) to 64x64
3) select all via Ctrl-A
4) copy & paste (Ctrl-C & Ctrl-V) into appropriate location within the new 512x512 spritesheet image (i'd set the grid there to 64 px spacing to assist in placement via View > Snap To Grid).
5) repeat for the remaining frames
6) apply magenta, rgb(255,0,255), via Paint Bucket to brown background with same settings above (Tolerance = 0, etc). trusting reiner's sprites, you could turn Contiguous off before filling to turn all brown background to magenta in 1 fell swoop via paint bucket
7) save & smile

Virtual Nomad @ California, USA . DBPro V7.5
AMD Phenom™ X4 9750 Quad-Core @ 2.4 GHz . 8 GB PC2-6400 RAM
ATI Radeon HD 3650 @ 512 MB . Vista Home Premium 64 Bit
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 31st Mar 2011 21:28
I did not know this method for resizing. This is where i am going wrong, thanks very much for showing me. I wouldnt have guessed otherwise
I was doing it the very quick but daft way round and literally just using transform, which i supposed is degradnig the quality.

Thanks again. I will need this help as i am going to be using (at least for now to get a demo off) a lot of reiners sprites but i would like them 64 x 64.

Login to post a reply

Server time is: 2024-03-29 07:31:35
Your offset time is: 2024-03-29 07:31:35