Making use of BYOND 500 Features for color

[ADamDirtyApe]

So everybody keeps saying stuff about the cool color shifting properties of BYOND that they added, and so far nobody has really done anything with it. This thread is about establishing a process of how to do it, along with providing a testbed for it in the form of slimes. I intend to eventually do this for most of the rest of the game as we go along, and will make another thread to make a list of stuff to convert. If stuff comes up and I cannot do everything, I am writing this list so anybody else can do it as well.

The Byond 500 stuff can apply color overlays using the methods "add", "subtract", "multiply", "overlay". The default is multiply. These work the exact way as in photoshop or any other such program, so can be tested outside the game.

The way I am trying to do involves converting the sprites to greyscale, which then you can directly apply the same exact colors via multiply and overlay. Add and subtract are funky to use and PS cant even handle subtract it seems.
Multiply is best for things with solid colors so is best in general. There is a limit to this though, the colors it adds cannot drop under any RGB color of 51, or the sprite starts to wash out to black.
Overlay is best for things with gradient highlights like metallic objects.

Instructions - I emphasize making copies of stuff so you don't fall back to square one if you save something by accident.
1. Get sprite off github
2. Make copy
3. Rename copy from .dmi to .png, your computer probably will complain but dont worry about it, you will convert back in step 13.
4. Make a copy of this png
5. Open the .png in a photo program that can handle mass color shifts (i use PhotoshopCS4, I don't know if the others can handle this)
6. Perform a mass color shift for greyscale (in PS is image>adjustments>Black&White)
7. Open the png from step 3 or 4 so you have both a color version and a greyscale version in easy access of each other
8. Apply a blending layer to the greyscale version (make sure to use only add, subtract, multiply or overlay as byond cannot do more)
9. Test various colors until you get very close to the original and write them down (enable web colors only to simplify color choice). The PS eyedropper tool helps in picking the right color, try to pick the darkest part of the color of the sprite in question that has no transparency on it.
10. When you are happy with the color list, save the greyscale png WITHOUT any blending layers applied to it
11. Make a copy of this just in case you need it
12. Use Neinhaus'/Erro's guide to converting pngs back to dmi http://www.ss13.eu/phpbb/viewtopic.php?f=49&t=4466, use the stuff from the original you should of left alone.
13. Go through the new .dmi and delete anything you think is a dupe (make a list of which item is for what if you do not end up with multiples).
14. You should have a list of the old colors (and the old color associations for things with multiple sprite versions), this list makes it much easier on the person who actually implements the code, as they do not need to hunt values.
15. Post everything somewhere for somebody else to work on it, unless you are planning to do it yourself, in which case, god help your work addiction.

But my sprite has more than one color!
Well then you have to split up the sprite into multiply color parts. This is because the byond color layer can only apply a SINGLE solid color to a sprite at a time. This means anything you plan on having one part stay the same color, or switch along with the other color, needs to be a different sprite inside the dmi.
This is easiest in the BYOND sprite editor itself, as all you have to do is duplicate (copy paste) the sprite in question, delete what you want to delete and finally rename it in a way that somebody will understand later. Use the select tool and the delete key so you dont go nuts deleting one pixel at a time.

For example, when i converted xenos to greyscale, putting back color looked dumb because it would color in their teeth too. I needed to copy the sprites and delete everything but the teeth in order for somebody later to make a sprite which would always put the teeth on top of the colored layer.

Getting Greyscale right
The Tool I use to convert to grayscale is Photoshop which has many options to convert to grayscale. The most tools are avaialbe via Image>adjustments>Black and White. Inside these are are different presets for different types of grayscale changes. Which one to use is based on the kind of sprites you want to change, in general Maximum White is best, Neutral Density is best for very dark sprites and the rest I have not really needed so far but give potential variation.
The important thing to do with converting to greyscale is to check your work. Open up a duplicate of the file you are working on, and leave its color alone. That way you, on the greyscale version, you can apply a blending layer of color and check it against the original color, since the point of this is to not drastically change any colors.
The end sprite does not need to be an EXACT duplicate of the original, but it should be fairly close.

I will post again with a link to the slime stuff I did, as I am not quite happy with it yet.

[Jalleo]

I should try and do at least some of the uniforms because I am sure quite a few could be merged down using this feature.

[Kyrah Abattoir]

I've been having a stab at this, and so far I'm running into an issue where "object" overlays (opposed to icon_state overlays that we currently use) won't show on the HUD (you only get the base object's sprite).

I'm not sure why it's doing that.

What work(and is used basically everywhere in SS13)

Code: Select all

/obj/item/weapon/myitem/proc/SetColor()
	src.overlays += "myoverlay_state"

What should work but doesn't on the HUD

Code: Select all

/obj/item/weapon/myitem/proc/SetColor()
	var/obj/overlay/myoverlay/O = new /obj/overlay/myoverlay/
	O.icon *= mycolor
	src.overlays += O

This last example work perfectly and should really get used more, i'm thinking about all those guns with indicator lights for instances that could be compressed to TWO sprites each (1 for the gun, 1 for the indicator light)

Code: Select all

/obj/item/weapon/myitem/proc/SetColor()
	var/icon/F = icon('icons/obj/mydmi.dmi',"my_icon_state")
	F *= mycolor
	src.overlays += F
	qdel(F)

[MisterPerson]

Just to confirm, you have this working now, right Kyrah?

[Kyrah Abattoir]

Yes i do, the last block of my previous post appears to work with all the color mixing modes.

[MisterPerson]

Yes i do, the last block of my previous post appears to work with all the color mixing modes.

Your last example uses icons. This thread is about using the color var. Not even remotely the same thing.

[Kyrah Abattoir]

Yes i do, the last block of my previous post appears to work with all the color mixing modes.

Your last example uses icons. This thread is about using the color var. Not even remotely the same thing.

Look at when i multiply a color into the sub sprite then maybe? My example is for the "but my sprite has more than one color!" section of the OP.