NEW Colour Changing Triggers and Colour Codes Tutorial

[Corkysmurf]

Corkysmurf's CCTCCTutorial!​

I believe that I have found a far newer and better way to change colours using triggers and way of describing colours altogether, without any knowledge of jass script.​

LEARNING THE BASICS: A colour code is made up of a few different parts. Let's take a look at the normal "Yellow" code that blizzard uses for hot keys in-game~

Build |cffffcc00T|rree​

1. The parts in Black are simply, well, nothing to do with colour codes.
2. The part in Blue is just a starting and transparency statement, that NEED to be there, but dont need much attention.
3. The part in Magenta is the colour code itself. This will determine the colour of the text between the Blue, and the Green parts. A good website for finding colour codes is: http://html-color-codes.com/
4. The part in Orange is the text that will be coloured. In this context (as a hotkey), it has but one letter. Otherwise, you can have as MANY as you want in there.
5. The part in Green is the ending statement, which once again, NEEDS to be there, but doesnt need much attention.

The only things you'll need to CHANGE are the Orange and the Magenta parts.

A probable question. How do you make easy gradient colours?
Answer: Simple. The digits that make up a colour code are split up into another three groups. There are 6 digits in each one.
1+2: Red
3+4: Green
5+6: Blue
The digits USED in them are shades. 0 is black. F is white. It is a range of digits of 0-9 and A-F. So obviously the ones in the middle are mixes between the two. Therefore, FF0000 would be a red. AA0000 would be a slightly DARKER red.

So... a gradient from Red to Blue in 25 steps would be: Start at a reasonable Red. Then end at a reasonable Blue.
1: AA0000
2: AA0011
3: AA0022
4: AA0033
5: AA0044
6: AA0055
7: AA0066
8: AA0077
9: AA0088
10: AA0099
11: AA00AA
12: 9900AA
13: 8800AA
14: 7700AA
15: 6600AA
16: 5500AA
17: 4400AA
18: 3300AA
19: 2200AA
20: 1100AA
21: 0000AA
SO, we have a problem. It changed from red to blue TOO fast. So, we have four options~

A. We can change the beginning red to something different:
1: EE0000
2: EE0011
3: EE0022
4: EE0033
5: EE0044
6: EE0055
7: EE0066
8: EE0077
9: EE0088
10: EE0099
11: EE00AA
12: DD00AA
13: CC00AA
14: BB00AA
15: AA00AA
16: 9900AA
17: 8800AA
18: 7700AA
19: 6600AA
20: 5500AA
21: 4400AA
22: 3300AA
23: 2200AA
24: 1100AA
25: 0000AA

This way works, but you can end up with a REALLY pale colour.

B. We can change the ENDING blue to something different:
1: AA0000
2: AA0011
3: AA0022
4: AA0033
5: AA0044
6: AA0055
7: AA0066
8: AA0077
9: AA0088
10: AA0099
11: AA00AA
12: AA00BB
13: AA00CC
14: AA00DD
15: AA00EE
16: 9900EE
17: 8800EE
18: 7700EE
19: 6600EE
20: 5500EE
21: 4400EE
22: 3300EE
23: 2200EE
24: 1100EE
25: 0000EE

This way works as well, but once again, you can end up with a REALLY pale colour.

C. We can change both the ending blue AND the beginning red to something different:
1: CC0000
2: CC0011
3: CC0022
4: CC0033
5: CC0044
6: CC0055
7: CC0066
8: CC0077
9: CC0088
10: CC0099
11: CC00AA
12: CC00BB
13: CC00CC
14: BB00CC
15: AA00CC
16: 9900CC
17: 8800CC
18: 7700CC
19: 6600CC
20: 5500CC
21: 4400CC
22: 3300CC
23: 2200CC
24: 1100CC
25: 0000CC

That way works great! It might alter your colours to a BIT paler, but it makes the colours well balenced.

D. We can add SMALLER changes to the colours every once and a while (instead off changing from 2200AA to 1100AA to 0000AA in THREE, you could have 2200AA to 1600AA to 1100AA to 0000AA in FOUR, and it doesnt look much different between the two):
1: AA0000
2: AA0011
3: AA0022
4: AA0026
5: AA0033
6: AA0044
7: AA0055
8: AA0066
9: AA0071
10: AA0077
11: AA0088
12: AA0099
13: AA00AA
14: 9900AA
15: 8800AA
16: 7700AA
17: 7100AA
17: 6600AA
18: 5500AA
19: 4400AA
20: 3300AA
21: 2600AA
22: 2200AA
23: 1100AA
24: 0600AA
25: 0000AA

Makes VERY SLIGHT changes, and works like a charm.

________________________________________________________________

NOW: You want to make a TD where the colours change for each wave or life lost, OR in a hero arena for when you get a kill, or whatever you can think of! OK. We can do it in 2 EASY steps! I will demonstrate using a life losing sequence (50 lives), but you can modify it for YOUR needs.

Step 1: Make your trigger for when
you lose a life. I made mine like this:

Life Lost
    Events
        Unit - A unit enters Move LoseLife <gen>
    Conditions
        (Owner of (Entering unit)) Equal to Creeps [COLOR="Blue"](in my case Player 12 (Brown))[/COLOR]
    Actions
        Unit - Explode (Entering unit)
        Player - Add -1 to Lives[1] [COLOR="Blue"](meaning player 1's lives (integer with array of # of players))[/COLOR]
        Multiboard - Set the text for (Last created multiboard) item in column 2, row 2 to (String((Player 1 (Red) Current lumber))) [COLOR="Blue"](this is for keeping track of my lives in a multiboard)[/COLOR]
        [COLOR="Red"]Game - Display to (All players) the text: (|cffff0000WARNING!|r  + ((Name of Player 1 (Red)) + ( only has  + ([COLOR="Cyan"]Colours[/COLOR][Lives[1]] + ((String(Lives[1])) + |r lives left!)))))[/COLOR]

The first few things (the non-red stuff) were just to make me lose lives and show it and what not. The RED bit, was the message that says I lost a life. See, my name is, well corkysmurf... and so when it shows that message to me it says: WARNING! Corkysmurf only has |cff00AA1149|r lives left! (explain colour code in part 2) SO... its basically telling me that i lost my life, right? But, it also has a gradient of Green to Red (my colour code is 00AA11, as in 00 Red, AA Green, and 11 Blue)

Step 2: You saw how in the last one it said the word Colours[Lives[1]]? Well, colours is an integer variable with an array of 50, corrisponding with my lives. So, in that trigger, if i had 15 lives left, it would have the Colour[15]... get it? So, i have to make a trigger showing my Colour[Lives[1]]:

Colours
    Events
        Map initialization
    Conditions
    Actions
        Set Colours[50] = |cff00AA00
        Set Colours[49] = |cff00AA11
        Set Colours[48] = |cff00AA22
        Set Colours[47] = |cff00AA33
        Set Colours[46] = |cff00AA44
        Set Colours[45] = |cff00AA55
        Set Colours[44] = |cff00AA66
        Set Colours[43] = |cff00AA77
        Set Colours[42] = |cff00AA88
        Set Colours[41] = |cff00AA99
        Set Colours[41] = |cff00AAAA
        Set Colours[40] = |cff11AAAA
        Set Colours[39] = |cff22AAAA
        Set Colours[38] = |cff33AAAA
        Set Colours[37] = |cff44AAAA
        Set Colours[36] = |cff55AAAA
        Set Colours[35] = |cff66AAAA
        Set Colours[34] = |cff77AAAA
        Set Colours[33] = |cff88AAAA
        Set Colours[32] = |cff99AAAA
        Set Colours[31] = |cffAAAAAA
        Set Colours[30] = |cffAAAA99
        Set Colours[29] = |cffAAAA88
        Set Colours[28] = |cffAAAA77
        Set Colours[27] = |cffAAAA66
        Set Colours[26] = |cffAAAA55
        Set Colours[25] = |cffAAAA44
        Set Colours[24] = |cffAAAA33
        Set Colours[23] = |cffAAAA22
        Set Colours[22] = |cffAAAA11
        Set Colours[21] = |cffAAAA00
        Set Colours[20] = |cffAA9900
        Set Colours[19] = |cffAA8800
        Set Colours[18] = |cffAA8200
        Set Colours[17] = |cffAA7700
        Set Colours[16] = |cffAA6600
        Set Colours[15] = |cffAA6000
        Set Colours[14] = |cffAA5500
        Set Colours[13] = |cffAA4400
        Set Colours[12] = |cffAA3300
        Set Colours[11] = |cffAA2200
        Set Colours[10] = |cffAA1100
        Set Colours[9] = |cffAA0500
        Set Colours[8] = |cffAA0000
        Set Colours[7] = |cff990000
        Set Colours[6] = |cff940000
        Set Colours[5] = |cff880000
        Set Colours[4] = |cff770000
        Set Colours[3] = |cff660000
        Set Colours[2] = |cff550000
        Set Colours[1] = |cff440000

So, in this I changed the colour from 00AA00 (green), to 00AAAA (teal), to AAAAAA (light grey), to AAAA00 (yellow), to 440000 (DARK red), using my technique from the section "A probable question." and the 4th Problem Solver (D, where you add random ones in between the swaps, like Colours[6] and [9].) This gradually changed as i lost lives. So, in other words, in my "Life Lost" trigger, it would say to the computer (using the example of 15 lives lost): |cffff0000WARNING!|r PLAYER'S NAME has only |cffAA600015|r lives left!

If you would like to see images of my turnout, just reply and ill hopefully put them up, but im not entirely sure how...
HOPE THAT HELPED!

-Corkysmurf ​

 

[Hero]

Looks good +rep..but now my eyes hurt..from the beginning with intense light colors..lol

 

[Corkysmurf]

Looks good +rep..but now my eyes hurt..from the beginning with intense light colors..lol

I had to make it DISTINCT between the different parts, but i do agree with you

 

[Corkysmurf]

Bump... I SPENT A GOOD HOUR ON THIS

 

[pheonixashes]

Excellent, but could you post a bit of sample colours (Not stuff like the normal colors, like red, but perhaps a light blue, etc) for us, too see how they look like? +rep.

 

[Tinki3]

There's quite alot of color code tutorials out there, don't think we needed another.

However, I liked it, thought it was pretty good.

+rep

 

[Ryuu]

Awesome tutorial. +rep

 

[PurgeandFire]

Great tutorial, it helps a lot...
+rep

______________________________

HEAD BANGER!!! :banghead: :banghead:

 

[Chocobo]

not readable colors

Almost 6-7 tutorials for Colour Codes in thehelper.net


On some lines :

|cffXXYYZZ

ff = Transparency (base 16)
XX = Red (base 16)
YY = Green (base 16)
ZZ = Blue (base 16)

Base 16 : 0123456789ABCDEF

ff = 255
Meaning, all text have a 100% transparency (255/250*100). It's simply the "revert" (100 = 0, 50 = 50, 30 = 70).


|c : It means that a carriage for color is started (|cffXXYYZZ). You must put the values for ff XX YY ZZ, so it colorizes the text you want, that is just after ZZ.

Example : |cffffffffQuest : Kill Heroes
It will colorize the text in ff - ff - ff - ff, meaning 100% of red, green, and blue, and 0% of transparency.

It should like this : Quest : Kill Heroes

You can also change fffffff to something better, like :

|cfffff799For Gold!
This will do something like : For Gold! (almost that color)
ff - ff - f7 - 99 = 255 - 255 - 247 - 153 (all in base 16)


To turn off the color carriage, like you want to do :

Quest : Kill Heroes For Gold!

Just simply put |r to stop the lastest carriage of |c.

What I wrote, would be then : |cffffffffQuest : Kill Heroes|r |cfffff799For Gold!|r

(the last bolded |r may be useless since there's nothing after)

 

[cr4xzZz]

cool tutorial +rep

 

[Corkysmurf]

-could you put another colour code, like light blue?

Light blue? Ok... |cff99ffff_|r. That's low Red, and high blue and green, making it a redless yet bright blue. Well, the colour code tutorial in the User Submitted one isnt entirely clear on how to make YOUR OWN colours, like if you want to make a gradient, its pretty hard to search on a website for certain colours.

 

[Sim]

What I liked with this tutorial (compared to others) is that it explained some things that weren't in other tutorials.

Great

 

[Corkysmurf]

What I liked with this tutorial (compared to others) is that it explained some things that weren't in other tutorials.

Great

... LOL, that was the ENTIRE purpose of that hour

 

[Badozz]

What da ??
Why dont you just use this:
http://wc3onlinetools.wc.funpic.de/color_helper/
Just enter the color you want and what you want to write and it creates you your code. Dont calculate anything

 

[Tonks]

I just don't understand how this tutorial is "far newer and better."
It looks like it uses the same methods as all the other tutorials.

 

[Corkysmurf]

I just don't understand how this tutorial is "far newer and better."
It looks like it uses the same methods as all the other tutorials.

Because, dear friend, it tells you how to make your OWN colour codes and therefore how you make transitions.

Stupid website Badozz Found... BUT WAIT... IT DOESNT TELL YOUR NOR HELP YOU CHANGE COLOURS FOR NUMBERS or in triggers

 

[Tonks]

Because, dear friend, it tells you how to make your OWN colour codes and therefore how you make transitions.

Stupid website Badozz Found... BUT WAIT... IT DOESNT TELL YOUR NOR HELP YOU CHANGE COLOURS FOR NUMBERS or in triggers

Where's the difference from most of the other color tutorials on this site ?

I think it was Andrewgosu who wrote a color code tutorial that explains every single thing that this one does just as well, if not better than this one does.