T
toast
Guest
Before you read: If you don't have at least a basic understanding of color codes, please look up a tutorial!
There are two ways to make color gradients: first those that are predefined and do not change throughout the map, and second those that must be changed on the fly during play.
I will explain only the second method, as the first one is well known and there are even programs that will do it for you. They can't, however, make:
Part One: Making Series of Gradients
This section describes how to set text to show only one color at a time as it progresses through a gradient (see screenshot at the end of this part). To create a regular left-to-right, single-string gradient in-game, go to part two.
The way this works is by creating a color code based on any given percentage of gradience between two end colors. One example of a use for this is life display in a TD: green when it's at full but slowly shifting downwards towards red as the lives decrease. It's a cool effect.
First, you will need a Jass function I found at Jass Vault:
For you GUI'ers like me, copy and paste the function into the "Custom Script Code" box that appears when you select the image and name of your map in the Trigger Editor. That will allow you to use it with a Custom Script action from anywhere in your map.
The function takes RGB and alpha values (which are generally left at 255) and returns an 8-character string of the corresponding color code, without the "|C".
1. Decide the values of the start and end colors. For this tutorial I will be using green (1BFF0F) and red (FF0303). Convert these two values into their RGB parts. For green and red, I have 27, 255, 15 and 255, 3, 3.
2. Subtract the corresponding RGB values of the end color from the start color (i.e. green minus red). In this case, I get -228, 252, and 12.
3. From now on, these will be actions you perform in a trigger. The first action is to decide on what will be determining the percentage between the 2 end colors. In the TD example as before, I'll use the lives:
Make sure this ratio will always be between 0 and 1.
4. The next step is to define the method of determining the values based on percentage. Begin with the differences of the two colors. In this case, -288, 252, and 12. Since this is the distance over which the gradient will be varying, multiply each by the percentage. That gives us -228*tempReal, 252*tempReal, and 12*tempReal. But wait! You can't have negative RGB values. Since a negative indicates that the number is changing from low to high instead of high to low, we can simply take the absolute value and multiply by 1-percentage. In the case of the red component, we now have 228*(1-tempReal).
5. Add the lowest value for each of red, green, and blue to each of their corresponding expressions. Since no value can fall lower than that lowest and the multiplication yeilds a number between 0 and the difference, we have to add it. Now we have (228*(1-tempReal))+27, (252*tempReal)+3, and (12*tempReal)+3.
6. That's it! Convert the numbers to integers and send them into CreateColorString with an alpha value of 255:
It will return a string without "|C" at the beginning, so don't forget to store it in a variable somewhere! If you have the RGB values stored in a variable, you can simply replace each number in there with the mathematical expression that got that number in the first place. This is very much like the system described in part two.
(For GUI'ers, the "R2I" indicates a a real to integer conversion, and "udg" indicates you're using global variables, the ones you define in the little variable window in the Trigger Editor. If you really don't understand Jass, copy and paste this script and replace each expression that I showed in the tutorial with your own. Don't forget "udg" on your variable names!)
This can be expanded to as many colors as you like. In the TD-like screenshot below, I faded green into yellow while the ratio was 50% or more, and then yellow to red while it was below, creating a very nice traffic light-colored series.
Part Two: Making Regular Gradients
Some people apparently mistook my original tutorial for creating regular left-to-right, single-string gradients in-game. As per the requests, here it is.
To make this work effectively, you will need some kind of system that gives you a set of 6 integers, 2 each of red, green, and blue. Such a system can be a predefined loop or player input, that is entirely up to you. Once you have the 6 values, follow these steps. These are essentially the steps that any program that creates regular gradients goes through, translated for use in-game. You'll also need an input string and an empty output string.
1. Calculate the average difference between successive steps of each red, green and blue, like so:
difference = (endColor-startColor)/(length of input-1)
Subtracting one color from another finds the total varying distance of the gradient. Since the number of changes is length-1 (0% has no effect), we divide by that. In WE terms:
It's best to leave everything in reals and roundoff to the required integers last thing. Repeat for green and blue.
2. Since you'll be changing each character in a string, you will need to create a loop that will run through each character in the string:
3. All the remaining calculations are performed in the loop, as they are different for each character in the string, but the formulas are the same. To find a component, multiply the difference variable of it by the loop integer minus one - again, because 0% isn't counted. The code looks like:
Repeat for green and blue.
4. Now to add the character to the end of the string. This is broken down into two parts:
4a. Get the character in question using the Jass function SubStringBJ (since this will eventually be in one long Custom Script for you GUI'ers, it's easier to do this now as opposed to using the GUI substring function). Use the loop's index as the start and endpoints.
For step 5, this entire expression will be simplified to "SubStringBJ()" to keep things neat.
4b. Create the color code for the character using CreateColorString as before:
This will also be simplified for neatness in step 5 as "CreateColorString()"
5. With the character and it's color code complete, all that remains is to tack it onto the end of the output string. Don't forget to add in "|C" and "|R":
6. That's it! The loop runs through until the string is over, and a variable (in this case named outputString) will be the gradient-ized version of the input string!
And the end result:
If you so wish, you can stack as many of these equations together and get a very complex gradient across other gradients. I don't plan on writing up on that, but if you would like to see these two methods in demonstration, take a look at the attached map.
Thanks for reading!
There are two ways to make color gradients: first those that are predefined and do not change throughout the map, and second those that must be changed on the fly during play.
I will explain only the second method, as the first one is well known and there are even programs that will do it for you. They can't, however, make:
Part One: Making Series of Gradients
This section describes how to set text to show only one color at a time as it progresses through a gradient (see screenshot at the end of this part). To create a regular left-to-right, single-string gradient in-game, go to part two.
The way this works is by creating a color code based on any given percentage of gradience between two end colors. One example of a use for this is life display in a TD: green when it's at full but slowly shifting downwards towards red as the lives decrease. It's a cool effect.
First, you will need a Jass function I found at Jass Vault:
Code:
function CreateColorString takes integer red, integer green, integer blue, integer alpha returns string
local string charMap = "0123456789abcdef"
local string cs
local integer c
set c = alpha / 0x10
set cs = SubString(charMap, c, c + 1)
set c = ModuloInteger(alpha, 0x10)
set cs = cs + SubString(charMap, c, c + 1)
set c = red / 0x10
set cs = cs + SubString(charMap, c, c + 1)
set c = ModuloInteger(red, 0x10)
set cs = cs + SubString(charMap, c, c + 1)
set c = green / 0x10
set cs = cs + SubString(charMap, c, c + 1)
set c = ModuloInteger(green, 0x10)
set cs = cs + SubString(charMap, c, c + 1)
set c = blue / 0x10
set cs = cs + SubString(charMap, c, c + 1)
set c = ModuloInteger(blue, 0x10)
return cs + SubString(charMap, c, c + 1)
endfunctionThe function takes RGB and alpha values (which are generally left at 255) and returns an 8-character string of the corresponding color code, without the "|C".
1. Decide the values of the start and end colors. For this tutorial I will be using green (1BFF0F) and red (FF0303). Convert these two values into their RGB parts. For green and red, I have 27, 255, 15 and 255, 3, 3.
2. Subtract the corresponding RGB values of the end color from the start color (i.e. green minus red). In this case, I get -228, 252, and 12.
3. From now on, these will be actions you perform in a trigger. The first action is to decide on what will be determining the percentage between the 2 end colors. In the TD example as before, I'll use the lives:
Code:
Set tempReal = ((Real(currentLives)) / (Real(originalLives)))Make sure this ratio will always be between 0 and 1.
4. The next step is to define the method of determining the values based on percentage. Begin with the differences of the two colors. In this case, -288, 252, and 12. Since this is the distance over which the gradient will be varying, multiply each by the percentage. That gives us -228*tempReal, 252*tempReal, and 12*tempReal. But wait! You can't have negative RGB values. Since a negative indicates that the number is changing from low to high instead of high to low, we can simply take the absolute value and multiply by 1-percentage. In the case of the red component, we now have 228*(1-tempReal).
5. Add the lowest value for each of red, green, and blue to each of their corresponding expressions. Since no value can fall lower than that lowest and the multiplication yeilds a number between 0 and the difference, we have to add it. Now we have (228*(1-tempReal))+27, (252*tempReal)+3, and (12*tempReal)+3.
6. That's it! Convert the numbers to integers and send them into CreateColorString with an alpha value of 255:
Code:
Custom script: set udg_tempString="|c"+CreateColorString(R2I((1.0-udg_tempReal)*228.0)+27, R2I(udg_tempReal*252)+3, R2I(udg_tempReal*12)+3, 255)It will return a string without "|C" at the beginning, so don't forget to store it in a variable somewhere! If you have the RGB values stored in a variable, you can simply replace each number in there with the mathematical expression that got that number in the first place. This is very much like the system described in part two.
(For GUI'ers, the "R2I" indicates a a real to integer conversion, and "udg" indicates you're using global variables, the ones you define in the little variable window in the Trigger Editor. If you really don't understand Jass, copy and paste this script and replace each expression that I showed in the tutorial with your own. Don't forget "udg" on your variable names!)
This can be expanded to as many colors as you like. In the TD-like screenshot below, I faded green into yellow while the ratio was 50% or more, and then yellow to red while it was below, creating a very nice traffic light-colored series.
Part Two: Making Regular Gradients
Some people apparently mistook my original tutorial for creating regular left-to-right, single-string gradients in-game. As per the requests, here it is.
To make this work effectively, you will need some kind of system that gives you a set of 6 integers, 2 each of red, green, and blue. Such a system can be a predefined loop or player input, that is entirely up to you. Once you have the 6 values, follow these steps. These are essentially the steps that any program that creates regular gradients goes through, translated for use in-game. You'll also need an input string and an empty output string.
1. Calculate the average difference between successive steps of each red, green and blue, like so:
difference = (endColor-startColor)/(length of input-1)
Subtracting one color from another finds the total varying distance of the gradient. Since the number of changes is length-1 (0% has no effect), we divide by that. In WE terms:
Code:
Set redDifference = (((Real(redEnd)) - (Real(redStart))) / ((Real((Length of inputString))) - 1.00))2. Since you'll be changing each character in a string, you will need to create a loop that will run through each character in the string:
Code:
For each (Integer A) from 1 to (Length of inputString), do (Actions)3. All the remaining calculations are performed in the loop, as they are different for each character in the string, but the formulas are the same. To find a component, multiply the difference variable of it by the loop integer minus one - again, because 0% isn't counted. The code looks like:
Code:
Set redComponent = (redStart + (Integer((redDifference x (Real(((Integer A) - 1)))))))4. Now to add the character to the end of the string. This is broken down into two parts:
4a. Get the character in question using the Jass function SubStringBJ (since this will eventually be in one long Custom Script for you GUI'ers, it's easier to do this now as opposed to using the GUI substring function). Use the loop's index as the start and endpoints.
Code:
SubStringBJ(udg_inputString, bj_forLoopAIndex, bj_forLoopAIndex)4b. Create the color code for the character using CreateColorString as before:
Code:
CreateColorString(redComponent, greenComponent, blueComponent, 255)5. With the character and it's color code complete, all that remains is to tack it onto the end of the output string. Don't forget to add in "|C" and "|R":
Code:
Custom Script: set udg_outputString = udg_outputString + "|C" + CreateColorString() + SubStringBJ() + "|R"6. That's it! The loop runs through until the string is over, and a variable (in this case named outputString) will be the gradient-ized version of the input string!
And the end result:
If you so wish, you can stack as many of these equations together and get a very complex gradient across other gradients. I don't plan on writing up on that, but if you would like to see these two methods in demonstration, take a look at the attached map.
Thanks for reading!
