Forum :: Programming :: Clipping hair based on hat sprites? (character rendering)

Here's a link to my question: http://gamedev.stackexchange.com/questions/80875/masking-between-two-different-2d-sprites-in-xna. Not getting much attention over there so I thought I'd ask here since I don't have as much experience with game programming.

There is more detail posted on that site, but essentially I'm trying to clip the hair when certain hats are worn. As far as I can tell, there is a background black in the hat sprite of true black (r=0, g=0, b=0) and an off-black (r=8, g=0, b=0). The 8, 0, 0 is supposed to be transparent, while the 0,0,0 is supposed to be used to clip any hair that is behind it while still rendering other information in the background.

You all know what the hat and the hair look like in the .egf files, but what I'm getting in my client is this:

and what I would like is this (from the real client):

I could easily make the other black color in the image transparent, but the problem is that some of the hair would then show behind the hat. And this is not how the actual client does it. I've spent like 2-3 days trying to get this minor feature implemented and I just want it to work at this point -.-

Anyway, I'm working in XNA but general tips would be appreciated.

---
class EOSERV {
Programmer | Oldbie
Open source EO Client: https://github.com/ethanmoffat/EndlessClient
};

The color that hides hair also makes any other item than hat hidden too, ie. wings, weapons and even clothes. It's most noticeable with wings, they're "broken" when you have a hat that hides hair. 

maybe run a couple loops on the hat and hair gfx to check x/y if the pixle is transparent or not! Store the furthest points on each side of the hat and hair that are not transparent and compare!

@Stava - interesting. I definitely wouldn't want that in my client!

@insomniac - Yeah, that's the only way I actually know of doing it right now. I think I'll give it a try and see if implementing it that way is actually really that bad or not. Resources I read online said that modifying the pixels of GPU data that way from the CPU is a costly operation. I'll probably generate the texture once and use that for draws instead of generating it every draw frame.

---
class EOSERV {
Programmer | Oldbie
Open source EO Client: https://github.com/ethanmoffat/EndlessClient
};

i would say try pure white!

it worked for the eo client not to clip wings with hats and hide hair!, but made anything else with pure white become trans in the client.

i been makeng a eo based game with scar/simba/delphi, and since this is not eo client but a project, you should be able to mask one trans color to another trans color.

---
Think Outside The Box.

..............Skids in my Undies........
...............Cut And Paste............

ethanmoffat posted: (26th Jul 2014, 07:40 pm)

@Stava - interesting. I definitely wouldn't want that in my client!

@insomniac - Yeah, that's the only way I actually know of doing it right now. I think I'll give it a try and see if implementing it that way is actually really that bad or not. Resources I read online said that modifying the pixels of GPU data that way from the CPU is a costly operation. I'll probably generate the texture once and use that for draws instead of generating it every draw frame.

Yeah, you could prolly do it at start up and compare hats,hairs,wings, ect and store the variable's for each!

I think I would use PNG format with native transparencies, and use some color no one is going to put into an armor like 255,0,255 for the masking layer. Hair is messy to work with really. On one hand you can mask certain parts of the hair, but then again you may want to change the hair to a style that fits the hat. If you have a helmet that covers most hair and you are a girl with pig tails, then you have pig tails hanging from air. Also, there are hats that appear under the hair such as the frog mask and glasses. The best way to handle this is with pub options that instruct the client on how to treat the hat. If a hat needs to transpose the hairstyle then let it do so, but if it needs to bald the character like the cook hat then select that option. You just really need to be prepared to fix the mess Vult left because hats are mostly hard-coded into the EO client.

Apollo posted: (27th Jul 2014, 03:24 am)

I think I would use PNG format with native transparencies, and use some color no one is going to put into an armor like 255,0,255 for the masking layer. Hair is messy to work with really. On one hand you can mask certain parts of the hair, but then again you may want to change the hair to a style that fits the hat. If you have a helmet that covers most hair and you are a girl with pig tails, then you have pig tails hanging from air. Also, there are hats that appear under the hair such as the frog mask and glasses. The best way to handle this is with pub options that instruct the client on how to treat the hat. If a hat needs to transpose the hairstyle then let it do so, but if it needs to bald the character like the cook hat then select that option. You just really need to be prepared to fix the mess Vult left because hats are mostly hard-coded into the EO client.

Dang, that's shitty. Looking at the hoods as well, it appears that their entire background color is 0x080000. Meaning that certain "hats" shouldn't render the hair at all...I was hoping there was a one-size-fits-all solution to handling this that wouldn't involve 'if(name.contains("hood")) ... else if(name.contains("mask"))...' and so on.

Guess I will have to hard code some things...my goal is to emulate the client as closely as possible. I'll probably end up releasing the source and people can get creative from there.

---
class EOSERV {
Programmer | Oldbie
Open source EO Client: https://github.com/ethanmoffat/EndlessClient
};

ethanmoffat posted: (27th Jul 2014, 03:52 am)

Apollo posted: (27th Jul 2014, 03:24 am)

I think I would use PNG format with native transparencies, and use some color no one is going to put into an armor like 255,0,255 for the masking layer. Hair is messy to work with really. On one hand you can mask certain parts of the hair, but then again you may want to change the hair to a style that fits the hat. If you have a helmet that covers most hair and you are a girl with pig tails, then you have pig tails hanging from air. Also, there are hats that appear under the hair such as the frog mask and glasses. The best way to handle this is with pub options that instruct the client on how to treat the hat. If a hat needs to transpose the hairstyle then let it do so, but if it needs to bald the character like the cook hat then select that option. You just really need to be prepared to fix the mess Vult left because hats are mostly hard-coded into the EO client.

Dang, that's shitty. Looking at the hoods as well, it appears that their entire background color is 0x080000. Meaning that certain "hats" shouldn't render the hair at all...I was hoping there was a one-size-fits-all solution to handling this that wouldn't involve 'if(name.contains("hood")) ... else if(name.contains("mask"))...' and so on.

Guess I will have to hard code some things...my goal is to emulate the client as closely as possible. I'll probably end up releasing the source and people can get creative from there.

If transparency is checked and the hair x/y is more or less it will solve the main problem! It's transparency should be the same as the other bmp's 0,0,0 and its not, thats where I think the problem is!In my opinion the operation isnt to costly at all, 1 loop to go across x to bmb width,1 to go from bmp width to x,1 to go from y to bmp height,and 1 to go from bmp height to y!

For the love of bob don't hard code if name is crap. Vult hard coded by gfx id alone. While I would strongly suggest using certain pub flags to handle drawing various hat modes, you seem to be wanting to make something that can be played on the main server. If you are simply writing a clone of the Endless client I would suggest you use your knowledge to produce something a bit more versatile and usable. Reproducing the exact same garbage Vult made is a waste. 

Apollo posted: (27th Jul 2014, 10:21 pm)

For the love of bob don't hard code if name is crap. Vult hard coded by gfx id alone. While I would strongly suggest using certain pub flags to handle drawing various hat modes, you seem to be wanting to make something that can be played on the main server. If you are simply writing a clone of the Endless client I would suggest you use your knowledge to produce something a bit more versatile and usable. Reproducing the exact same garbage Vult made is a waste. 

I just completed my comment and my comp messed up so I'm going to redo it with the same concept just quick... Don't listen to bob and hardcode shit... do what Apollo said lol!

Apollo posted: (27th Jul 2014, 10:21 pm)

For the love of bob don't hard code if name is crap. Vult hard coded by gfx id alone. While I would strongly suggest using certain pub flags to handle drawing various hat modes, you seem to be wanting to make something that can be played on the main server. If you are simply writing a clone of the Endless client I would suggest you use your knowledge to produce something a bit more versatile and usable. Reproducing the exact same garbage Vult made is a waste. 

But hard coding things is the best! ;P WHY WOULD I WANT EXTENSIBILITY!? /sarcasm

If I do end up changing the pub format to specify how a hat should be drawn, what would be a good way to maintain support with current clients/servers? The options I can think of are as follows:

1. Use one of the existing 'Unknown' fields or types in the EIF (possibly with side-effects)
2. Create new sub-type(s) in the EIF, something like ItemSubType::HatNoHair (no side-effects?)
3. Create a completely new field (many side-effects / break ALL the existing set-ups)

I think I'm liking option 2 the best. I would also *probably* include an extra utility that would convert between pub versions (vult->mine) so people could take their existing pubs and do batch processing to update them appropriately.

---
class EOSERV {
Programmer | Oldbie
Open source EO Client: https://github.com/ethanmoffat/EndlessClient
};

I would say a pub re-write is in order. Rena uses a "hide hair" flag for hats on EOSEP which I have added to my own build of EOSERV to reply to the client that the player is bald. At this point you need to really be thinking of what you need to do for flexibility. Checking the hats that use the masking layer is ok, but I would think a flag in pubs with a few modes for hats would work. This means A: write a new pub editor for support or B: hex edit it. You will probably want in addition to hide hair: under hair, half hair, 2/3 hair, etc to cover the most basic hats. While this probably won't come out perfect, for new hat designs made by team pixel artists the value can be used as a design to these parameters. You might want to just for shits add in a line of hard-code to default to main when the server address is game.endless-online.com. The first mistake in making a game is not having a plan for how to call the resources that will be used. Make yourself a pub editor and a map editor. The game will be the easy part.