Team Color Shifting - Revision history

Elvish Hunter: Fixed links and image URLs to use HTTPS

2022-06-12T19:16:29Z

Fixed links and image URLs to use HTTPS

Soliton: note MAGENTA_IS_THE_TEAM_COLOR deprecation

2020-07-30T16:05:15Z

note MAGENTA_IS_THE_TEAM_COLOR deprecation

← Older revision		Revision as of 16:05, 30 July 2020
Line 17:		Line 17:


	Also, it won't show up on a unit unless they have this line in their unitname.cfg file:		Also, it won't show up on a unit unless they have this line in their unitname.cfg file (not needed anymore since 1.13.6):
	{MAGENTA_IS_THE_TEAM_COLOR}		{MAGENTA_IS_THE_TEAM_COLOR}

Line 54:		Line 54:
	== WML How To ==		== WML How To ==

	We've defined a WML macro to specify a set of magenta colors, as seen in the previous palette. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in [http://www.wesnoth.org/macro-reference.xhtml#MAGENTA_IS_THE_TEAM_COLOR image-utils.cfg]):		(not needed anymore since 1.13.6) We've defined a WML macro to specify a set of magenta colors, as seen in the previous palette. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in [http://www.wesnoth.org/macro-reference.xhtml#MAGENTA_IS_THE_TEAM_COLOR image-utils.cfg]):
	{MAGENTA_IS_THE_TEAM_COLOR}		{MAGENTA_IS_THE_TEAM_COLOR}

Artisticdude: /* design errata for nerds/game-designers */ Corrected capitalization in the section title

2012-01-10T14:49:38Z

design errata for nerds/game-designers: Corrected capitalization in the section title

← Older revision		Revision as of 14:49, 10 January 2012
Line 62:		Line 62:


	== ~~design errata~~ for ~~nerds~~/~~game~~-~~designers~~ ==		== Design Errata for Nerds/Game-Designers ==
	E.g. "Why we did it the way we did." There are a number of other ways to do this, but this was what we settled on. A different option might have been to use special grayscale image maps to indicate what to change, they would have basically doubled the number of images used by the game. Alternately, we could have done some bizarre wizardry with graphics files, and included something like an alpha-channel to indicate which pixels to change; we decided against this because that would break the huge advantage of using a very standard format like PNG, which is that everyone can easily grab a program to edit it. Design nitpickers will notice one minor disadvantage in how we did it. The colors which get shifted away are inaccessible for direct use; but because they're such a small set of colors, and because they were chosen to be "unusual" colors (rather than common ones like earthtones), it's unlikely that not being able to use these specific RGB values would ever be a problem.		E.g. "Why we did it the way we did." There are a number of other ways to do this, but this was what we settled on. A different option might have been to use special grayscale image maps to indicate what to change, they would have basically doubled the number of images used by the game. Alternately, we could have done some bizarre wizardry with graphics files, and included something like an alpha-channel to indicate which pixels to change; we decided against this because that would break the huge advantage of using a very standard format like PNG, which is that everyone can easily grab a program to edit it. Design nitpickers will notice one minor disadvantage in how we did it. The colors which get shifted away are inaccessible for direct use; but because they're such a small set of colors, and because they were chosen to be "unusual" colors (rather than common ones like earthtones), it's unlikely that not being able to use these specific RGB values would ever be a problem.


	== See Also ==		== See Also ==

Paŭlo: /* Introduction */ removed box background, added palette link

2010-10-08T22:41:53Z

Introduction: removed box background, added palette link

← Older revision		Revision as of 22:41, 8 October 2010
Line 5:		Line 5:
	== Introduction ==		== Introduction ==

	Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature.		Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature. <div style="float:right; width:260px; padding:1ex; margin:1ex; border: thin dotted; font-size:80%;">http://www.wesnoth.org/forum/download/file.php?id=46095&type=.png
			For the first nine teams, this will look like this after teamcoloring. (The last line is the original magenta image.) [http://www.wesnoth.org/forum/viewtopic.php?f=23&t=31836&start=0]
			</div>

			It's not just any magenta; it has to be from the following, very specific set:

	~~<div style="float:right; width:260px; padding:1ex; margin:1ex; border: thin dotted; font-size:80%; background-color: lightgray; ">http://www.wesnoth.org/forum/download/file.php?id=46095&type=.png~~
	~~For the first nine teams, this will look like this after teamcoloring. (The last line is the original magenta image.) [http://www.wesnoth.org/forum/viewtopic.php?f=23&t=31836&start=0]~~
	~~</div>It's not just any magenta; it has to be from the following, very specific set:~~
	http://www.wesnoth.org/wiki-images/tutorial/team-color/colorswatch.png		http://www.wesnoth.org/wiki-images/tutorial/team-color/colorswatch.png

			<div style="font-size:70%">If you're using GIMP, here is a palette with the team color values: [http://www.wesnoth.org/forum/download/file.php?id=44892]<br/>
			Put this file as "wesnoth-tc.gpl" in your ~/.gimp-2.6/palettes/.</div>


	Also, it won't show up on a unit unless they have this line in their unitname.cfg file:		Also, it won't show up on a unit unless they have this line in their unitname.cfg file:
Line 17:		Line 22:

	You'll need to have some costume element on the unit which can be designated as the team-colored piece of their outfit; It's best to design units around having this. The easiest way to designate this, is to define a new layer in a capable program (photoshop, gimp, etc), overlaid on the rest of the image, in which you draw with our special values of magenta.		You'll need to have some costume element on the unit which can be designated as the team-colored piece of their outfit; It's best to design units around having this. The easiest way to designate this, is to define a new layer in a capable program (photoshop, gimp, etc), overlaid on the rest of the image, in which you draw with our special values of magenta.


	== Time-Saving Tips ==		== Time-Saving Tips ==

Paŭlo: resulting palette as a sidebox, slight reformatting, link to macro reference

2010-10-08T22:29:27Z

resulting palette as a sidebox, slight reformatting, link to macro reference

← Older revision		Revision as of 22:29, 8 October 2010
Line 1:		Line 1:
	by Richard Kettering (Jetryl)		originally by Richard Kettering (Jetryl)

	:Note: if you're interested in actually changing the color of a sprite that has already had this technique applied to it (i.e. automatically changing the magenta in a sprite to blue or red), see the [[TeamColoring]] page instead.		:Note: if you're interested in actually changing the color of a sprite that has already had this technique applied to it (i.e. automatically changing the magenta in a sprite to blue or red), see the [[TeamColoring]] page instead.

			== Introduction ==

	Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature.		Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature.

	It's not just any magenta; it has to be from the following, very specific set:		<div style="float:right; width:260px; padding:1ex; margin:1ex; border: thin dotted; font-size:80%; background-color: lightgray; ">http://www.wesnoth.org/forum/download/file.php?id=46095&type=.png
			For the first nine teams, this will look like this after teamcoloring. (The last line is the original magenta image.) [http://www.wesnoth.org/forum/viewtopic.php?f=23&t=31836&start=0]
			</div>It's not just any magenta; it has to be from the following, very specific set:
	http://www.wesnoth.org/wiki-images/tutorial/team-color/colorswatch.png		http://www.wesnoth.org/wiki-images/tutorial/team-color/colorswatch.png

	Also, it won't show up on a unit unless they have this line in their unitname.cfg file:		Also, it won't show up on a unit unless they have this line in their unitname.cfg file:
	{MAGENTA_IS_THE_TEAM_COLOR}		{MAGENTA_IS_THE_TEAM_COLOR}

	~~For the first nine teams, this will look like this after teamcolorizing (The last line is the original magenta image) [http://www.wesnoth.org/forum/viewtopic.php?f=23&t=31836&start=0]:~~

	~~http://www.wesnoth.org/forum/download/file.php?id=46095&type=.png~~



Line 20:		Line 19:


	~~'''~~Time-Saving Tips~~:'''~~		== Time-Saving Tips ==

	If units are drawn with a small color set, as used in traditional sprite art, you can use a properly-set paint-bucket tool to replace all instances of a given color. You'll want to set it to be non-contiguous, non-antialiased and to have a tolerance of 0 (presumably, you also want it to fill based on "all layers" - these settings are based on Photoshop, and the Gimp is likely similar).		If units are drawn with a small color set, as used in traditional sprite art, you can use a properly-set paint-bucket tool to replace all instances of a given color. You'll want to set it to be non-contiguous, non-antialiased and to have a tolerance of 0 (presumably, you also want it to fill based on "all layers" - these settings are based on Photoshop, and the Gimp is likely similar).
Line 31:		Line 30:


	~~'''~~Screenshots~~:'''~~		== Screenshots ==

	This is a screenshot of what a unit would look like if it were drawn directly, without the special pixels:		This is a screenshot of what a unit would look like if it were drawn directly, without the special pixels:
Line 49:		Line 48:


	~~'''~~WML How To~~: '''~~		== WML How To ==

	We've defined a WML macro to specify a set of magenta colors, as seen in the previous palette. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in utils.cfg):		We've defined a WML macro to specify a set of magenta colors, as seen in the previous palette. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in [http://www.wesnoth.org/macro-reference.xhtml#MAGENTA_IS_THE_TEAM_COLOR image-utils.cfg]):
	{MAGENTA_IS_THE_TEAM_COLOR}		{MAGENTA_IS_THE_TEAM_COLOR}

Line 59:		Line 58:


	~~'''~~ design errata for nerds/game-designers~~: '''~~		== design errata for nerds/game-designers ==
	E.g. "Why we did it the way we did." There are a number of other ways to do this, but this was what we settled on. A different option might have been to use special grayscale image maps to indicate what to change, they would have basically doubled the number of images used by the game. Alternately, we could have done some bizarre wizardry with graphics files, and included something like an alpha-channel to indicate which pixels to change; we decided against this because that would break the huge advantage of using a very standard format like PNG, which is that everyone can easily grab a program to edit it. Design nitpickers will notice one minor disadvantage in how we did it. The colors which get shifted away are inaccessible for direct use; but because they're such a small set of colors, and because they were chosen to be "unusual" colors (rather than common ones like earthtones), it's unlikely that not being able to use these specific RGB values would ever be a problem.		E.g. "Why we did it the way we did." There are a number of other ways to do this, but this was what we settled on. A different option might have been to use special grayscale image maps to indicate what to change, they would have basically doubled the number of images used by the game. Alternately, we could have done some bizarre wizardry with graphics files, and included something like an alpha-channel to indicate which pixels to change; we decided against this because that would break the huge advantage of using a very standard format like PNG, which is that everyone can easily grab a program to edit it. Design nitpickers will notice one minor disadvantage in how we did it. The colors which get shifted away are inaccessible for direct use; but because they're such a small set of colors, and because they were chosen to be "unusual" colors (rather than common ones like earthtones), it's unlikely that not being able to use these specific RGB values would ever be a problem.

Paŭlo: team colorswatch

2010-10-07T11:49:57Z

team colorswatch

← Older revision		Revision as of 11:49, 7 October 2010
Line 10:		Line 10:
	Also, it won't show up on a unit unless they have this line in their unitname.cfg file:		Also, it won't show up on a unit unless they have this line in their unitname.cfg file:
	{MAGENTA_IS_THE_TEAM_COLOR}		{MAGENTA_IS_THE_TEAM_COLOR}

			For the first nine teams, this will look like this after teamcolorizing (The last line is the original magenta image) [http://www.wesnoth.org/forum/viewtopic.php?f=23&t=31836&start=0]:

			http://www.wesnoth.org/forum/download/file.php?id=46095&type=.png

Solsword: Link to the new TeamColoring wiki page

2009-09-17T04:27:48Z

Link to the new TeamColoring wiki page

← Older revision		Revision as of 04:27, 17 September 2009
Line 1:		Line 1:
	by Richard Kettering (Jetryl)		by Richard Kettering (Jetryl)

			:Note: if you're interested in actually changing the color of a sprite that has already had this technique applied to it (i.e. automatically changing the magenta in a sprite to blue or red), see the [[TeamColoring]] page instead.

	Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature.		Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature.

Solsword: /* See Also */

2009-09-17T04:24:29Z

Jetryl: More readability

2009-05-06T09:38:44Z

Jetryl: Major Edits

2009-05-06T09:33:06Z

Major Edits

← Older revision		Revision as of 09:33, 6 May 2009
Line 1:		Line 1:
	by Richard Kettering (Jetryl)		by Richard Kettering (Jetryl)

	==~~=How to make units which conform to the system that lets us shift team colors.=~~==		==Making Team-Colored Sprites:==

	Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. ~~There are other ways that this could have been done~~, ~~but this one was chosen~~ for ~~several reasons. For~~ one ~~thing~~, ~~if we had used special grayscale image maps to indicate what to change, they would have basically doubled the number of images used by the game~~. ~~The notable disadvantages of our system are~~ that ~~the colors which get shifted away are inaccessible for use, which is~~ a ~~minor issue~~, and ~~that we only have a binary choice of a pixel getting shifted, which is a somewhat more major limitation, albeit one which is worth working around~~.		Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature.

	~~These colors are defined in~~ the ~~unit .cfg file. They are defined as follows~~, ~~for an example in which we shift the colors black and white~~:		It's not just any magenta; it has to be from the following, very specific set:
	~~flag_rgb=0,0,0,255,255,255~~		http://www.wesnoth.org/wiki-images/tutorial/team-color/colorswatch.png
	~~Note that these shift ONLY the precise RGB values given~~ - ~~do not confuse~~ color ~~with hue, because every specific shade - every specific instance with a different luminosity and saturation value - must be specified separately~~.

	~~The game will shift the color set to one of the team colors; in doing so~~ it will completely overrun the saturation of the original color (E- not sure about that). It will change the hue to that of the team, and shift the luminosity as well. The coloration you give is set in terms of relative luminosity - the entire patch may be bright or dark depending on ~~which team the~~ unit ~~is on~~.		Also, it won't show up on a unit unless they have this line in their unitname.cfg file:
			{MAGENTA_IS_THE_TEAM_COLOR}
	Also note that the first color specified is special, because it is treated as the median value, and will be assigned the precise luminosity value of the team color. Anything brighter than it will be brighter than the team color, anything darker will be darker.


	~~==WorkFlow:==~~		You'll need to have some costume element on the unit which can be designated as the team-colored piece of their outfit; It's best to design units around having this. The easiest way to designate this, is to define a new layer in a capable program (photoshop, gimp, etc), overlaid on the rest of the image, in which you draw with our special values of magenta.
	~~There are two general ways~~ to ~~do things. No matter what, you need a patch of color~~ on the ~~target~~ unit which ~~is separate from other colors, and is contiguous. It is best if this is only on specific sections, and does not have any stray pixels lying around in other areas of the image.~~

	~~This~~ can~~, on very rare occasions,~~ be ~~done to existing graphics with no changes in~~ the ~~target image~~; ~~however it is almost always~~ best to ~~redesign the unit~~ around ~~use of the team color system. In~~ this~~, you often go so far as to change the costuming, and to include props showing the team color which would not have been included before~~.

	~~Possibly the~~ easiest way to do this~~, to a reworked image~~, is to define a new layer in a capable program (photoshop, gimp, etc), overlaid on the rest of the image, in which you draw with ~~a color that will stick out like a sore thumb. Magenta has often been used for this because it largely has no use as a normal color for general unit graphics.~~

	~~http://www.wesnoth.org/wiki-images/tutorial/team-color/colorswatch.png~~

	~~We've actually defined a WML macro to specify a set~~ of magenta ~~colors, as seen in the previous palette~~. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in utils.cfg):

	~~{MAGENTA_IS_THE_TEAM_COLOR}~~


Line 31:		Line 18:
	If units are drawn with a small color set, as used in traditional sprite art, you can use a properly-set paint-bucket tool to replace all instances of a given color. You'll want to set it to be non-contiguous, non-antialiased and to have a tolerance of 0 (presumably, you also want it to fill based on "all layers" - these settings are based on Photoshop, and the Gimp is likely similar).		If units are drawn with a small color set, as used in traditional sprite art, you can use a properly-set paint-bucket tool to replace all instances of a given color. You'll want to set it to be non-contiguous, non-antialiased and to have a tolerance of 0 (presumably, you also want it to fill based on "all layers" - these settings are based on Photoshop, and the Gimp is likely similar).

	If ~~someone used~~ a ~~"non-traditional" spriting technique~~ (~~such as jetryl or wayfarer, using~~ a ~~paintbrush instead~~ of ~~a pencil tool~~), you're not out of luck at all. Simply take the same paint-bucket tool with the same settings, and crank the tolerance up to about 20-30. The paint-bucket will then affect all of those similar, subtle gradations in shade which were achieved with the paintbrush tool, replacing them all with a single color. Use this with progressively lighter shades, and you'll fill in 90% of the target area, after which it is trivial to fill the holes left behind with a pencil tool.		If you're working on a sprite which isn't strictly pixel art (e.g. which doesn't have a tiny set of unique RGB values), you're not out of luck at all. Simply take the same paint-bucket tool with the same settings, and crank the tolerance up to about 20-30. The paint-bucket will then affect all of those similar, subtle gradations in shade which were achieved with the paintbrush tool, replacing them all with a single color. Use this with progressively lighter shades, and you'll fill in 90% of the target area, after which it is trivial to fill the holes left behind with a pencil tool.

	Also, if you'd like a sane representation of what the final colors will look like, you can shift this separate team-color layer in your graphics application by using a '''temporary''' hue/saturation filter on that layer (I use +40 to the hue on the magenta colors to give a red hue similar but '''not''' identical to the one which the game uses).		Also, if you'd like a sane representation of what the final colors will look like, you can shift this separate team-color layer in your graphics application by using a '''temporary''' hue/saturation filter on that layer (I use +40 to the hue on the magenta colors to give a red hue similar but '''not''' identical to the one which the game uses).

	~~Finally, to keep things intuitive, if you are using the magenta swatch, which you should, it~~ is often easiest to simply sample the colors from a unit to which ~~this~~ has ~~already been applied~~.		It is often easiest to simply sample the colors from a unit to which already has team colors on it.


	==Screenshots==		==Screenshots==
	This is a screenshot of what a unit ~~looks~~ like ~~with his team color layer turned off - this is~~ the ~~graphic before the edit, essentially~~:		This is a screenshot of what a unit would look like if it were drawn directly, without the special pixels:

	http://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_off.png		http://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_off.png

	This is a screenshot of the team ~~color~~ layer ~~itself. Note that it is only what is changed~~:		This is a screenshot of the team-colored pixels in a separate photoshop layer:

	http://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_alone.png		http://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_alone.png
Line 50:		Line 37:

	http://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_on.png		http://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_on.png





			== WML How To: ==
			We've defined a WML macro to specify a set of magenta colors, as seen in the previous palette. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in utils.cfg):
			{MAGENTA_IS_THE_TEAM_COLOR}

			Note that these shift ONLY the precise RGB values given - do not confuse color with hue, because every specific shade - every specific instance with a different luminosity and saturation value - must be specified separately.

			The game will shift the color set to one of the team colors; in doing so it will completely overrun the saturation of the original color. It will change the hue to that of the team, and shift the luminosity as well. The coloration you give is set in terms of relative luminosity - the entire patch may be bright or dark depending on which team the unit is on. Also note that the first color specified is special, because it is treated as the median value, and will be assigned the precise luminosity value of the team color. Anything brighter than it will be brighter than the team color, anything darker will be darker.


			==== design errata for nerds/game-designers: ====
			E.g. "Why we did it the way we did." There are a number of other ways to do this, but this was what we settled on. A different option might have been to use special grayscale image maps to indicate what to change, they would have basically doubled the number of images used by the game. Alternately, we could have done some bizarre wizardry with graphics files, and included something like an alpha-channel to indicate which pixels to change; we decided against this because that would break the huge advantage of using a very standard format like PNG, which is that everyone can easily grab a program to edit it. Design nitpickers will notice one minor disadvantage in how we did it. The colors which get shifted away are inaccessible for direct use; but because they're such a small set of colors, and because they were chosen to be "unusual" colors (rather than common ones like earthtones), it's unlikely that not being able to use these specific RGB values would ever be a problem.

← Older revision		Revision as of 04:24, 17 September 2009
Line 60:		Line 60:
	* [[Create]]		* [[Create]]
	* [[Art Tutorials]]		* [[Art Tutorials]]
			* [[TeamColoring]]

	[[Category: Art Tutorials]]		[[Category: Art Tutorials]]

← Older revision		Revision as of 19:16, 12 June 2022
Line 5:		Line 5:
	== Introduction ==		== Introduction ==

	Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature. <div style="float:right; width:260px; padding:1ex; margin:1ex; border: thin dotted; font-size:80%;">~~http~~://www.wesnoth.org/forum/download/file.php?id=46095&type=.png		Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature. <div style="float:right; width:260px; padding:1ex; margin:1ex; border: thin dotted; font-size:80%;">https://www.wesnoth.org/forum/download/file.php?id=46095&type=.png
	For the first nine teams, this will look like this after teamcoloring. (The last line is the original magenta image.) [~~http~~://www.wesnoth.org/forum/viewtopic.php?f=23&t=31836&start=0]		For the first nine teams, this will look like this after teamcoloring. (The last line is the original magenta image.) [https://www.wesnoth.org/forum/viewtopic.php?f=23&t=31836&start=0]
	</div>		</div>

	It's not just any magenta; it has to be from the following, very specific set:		It's not just any magenta; it has to be from the following, very specific set:

	~~http~~://www.wesnoth.org/wiki-images/tutorial/team-color/colorswatch.png		https://www.wesnoth.org/wiki-images/tutorial/team-color/colorswatch.png

	<div style="font-size:70%">If you're using GIMP, here is a palette with the team color values: [~~http~~://www.wesnoth.org/forum/download/file.php?id=44892]<br/>		<div style="font-size:70%">If you're using GIMP, here is a palette with the team color values: [https://www.wesnoth.org/forum/download/file.php?id=44892]<br/>
	Put this file as "wesnoth-tc.gpl" in your ~/.gimp-2.6/palettes/.</div>		Put this file as "wesnoth-tc.gpl" in your ~/.gimp-2.6/palettes/.</div>

Line 38:		Line 38:
	This is a screenshot of what a unit would look like if it were drawn directly, without the special pixels:		This is a screenshot of what a unit would look like if it were drawn directly, without the special pixels:

	~~http~~://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_off.png		https://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_off.png

	This is a screenshot of the team-colored pixels in a separate photoshop layer:		This is a screenshot of the team-colored pixels in a separate photoshop layer:

	~~http~~://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_alone.png		https://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_alone.png

	And this is what the combined image looks like, which will get mixed-down into a single PNG file:		And this is what the combined image looks like, which will get mixed-down into a single PNG file:

	~~http~~://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_on.png		https://www.wesnoth.org/wiki-images/tutorial/team-color/tcpatch_on.png


Line 54:		Line 54:
	== WML How To ==		== WML How To ==

	(not needed anymore since 1.13.6) We've defined a WML macro to specify a set of magenta colors, as seen in the previous palette. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in [~~http~~://www.wesnoth.org/macro-reference.xhtml#MAGENTA_IS_THE_TEAM_COLOR image-utils.cfg]):		(not needed anymore since 1.13.6) We've defined a WML macro to specify a set of magenta colors, as seen in the previous palette. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in [https://www.wesnoth.org/macro-reference.xhtml#MAGENTA_IS_THE_TEAM_COLOR image-utils.cfg]):
	{MAGENTA_IS_THE_TEAM_COLOR}		{MAGENTA_IS_THE_TEAM_COLOR}

← Older revision		Revision as of 09:38, 6 May 2009
Line 1:		Line 1:
	by Richard Kettering (Jetryl)		by Richard Kettering (Jetryl)

	~~==Making Team-Colored Sprites:==~~

	Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature.		Wesnoth's sprites are only drawn in one color, but in an actual game, all of our unit's clothing will change color to the color of whatever team they're on. We call this "team color" shifting. Any team color shifting system needs a way of indicating which areas of the graphic are to be changed in color. Ours solves this by selecting a certain, specific range of colors, and shifting the pixels whenever they are that source color in the unit image. In our system, this can be done with any set of colors that you choose, on a per-unit basis. However, we've got a shortcut for one set of colors, magenta. We picked a color that because it would stick out like a sore thumb; it's not an 'earthtone', and isn't commonly seen in nature.
Line 15:		Line 14:


	==Time-Saving Tips:==		'''Time-Saving Tips:'''

	If units are drawn with a small color set, as used in traditional sprite art, you can use a properly-set paint-bucket tool to replace all instances of a given color. You'll want to set it to be non-contiguous, non-antialiased and to have a tolerance of 0 (presumably, you also want it to fill based on "all layers" - these settings are based on Photoshop, and the Gimp is likely similar).		If units are drawn with a small color set, as used in traditional sprite art, you can use a properly-set paint-bucket tool to replace all instances of a given color. You'll want to set it to be non-contiguous, non-antialiased and to have a tolerance of 0 (presumably, you also want it to fill based on "all layers" - these settings are based on Photoshop, and the Gimp is likely similar).

Line 25:		Line 25:


	==Screenshots==		'''Screenshots:'''

	This is a screenshot of what a unit would look like if it were drawn directly, without the special pixels:		This is a screenshot of what a unit would look like if it were drawn directly, without the special pixels:

Line 42:		Line 43:


	== WML How To: ==		'''WML How To: '''

	We've defined a WML macro to specify a set of magenta colors, as seen in the previous palette. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in utils.cfg):		We've defined a WML macro to specify a set of magenta colors, as seen in the previous palette. To use this, you simply sample the color with your graphics program's eyedropper tool, and then draw with it. The macro is used just like the flag_rgb business - you simply insert the following in your unit .cfg file (for reference, the macro itself is defined in utils.cfg):
	{MAGENTA_IS_THE_TEAM_COLOR}		{MAGENTA_IS_THE_TEAM_COLOR}
Line 51:		Line 53:


	~~====~~ design errata for nerds/game-designers: ~~====~~		''' design errata for nerds/game-designers: '''
	E.g. "Why we did it the way we did." There are a number of other ways to do this, but this was what we settled on. A different option might have been to use special grayscale image maps to indicate what to change, they would have basically doubled the number of images used by the game. Alternately, we could have done some bizarre wizardry with graphics files, and included something like an alpha-channel to indicate which pixels to change; we decided against this because that would break the huge advantage of using a very standard format like PNG, which is that everyone can easily grab a program to edit it. Design nitpickers will notice one minor disadvantage in how we did it. The colors which get shifted away are inaccessible for direct use; but because they're such a small set of colors, and because they were chosen to be "unusual" colors (rather than common ones like earthtones), it's unlikely that not being able to use these specific RGB values would ever be a problem.		E.g. "Why we did it the way we did." There are a number of other ways to do this, but this was what we settled on. A different option might have been to use special grayscale image maps to indicate what to change, they would have basically doubled the number of images used by the game. Alternately, we could have done some bizarre wizardry with graphics files, and included something like an alpha-channel to indicate which pixels to change; we decided against this because that would break the huge advantage of using a very standard format like PNG, which is that everyone can easily grab a program to edit it. Design nitpickers will notice one minor disadvantage in how we did it. The colors which get shifted away are inaccessible for direct use; but because they're such a small set of colors, and because they were chosen to be "unusual" colors (rather than common ones like earthtones), it's unlikely that not being able to use these specific RGB values would ever be a problem.