Changing the color of a individual letter using a C# script

Hi guys:

This is my problem. I have a menu done using the new UI. It looks like

MENU

Continue
New Game
Options
Quit

I want to edit the MENU text component so everytime I run the game the color of the letters change to a random color. I.E: if the first time I had MENU, the next time I could get MENU, or any other random combination.

I'm using the following script attached to the text component, to individually write letter by letter the content of the text attribute on the text component.

Code (CSharp):

1. using UnityEngine;
2.  
3. using UnityEngine.UI;
4. using System.Collections;
5.  
6. public class ColorearTextoMenu : MonoBehaviour {
7.  
8.     Text instruction;
9.    
10.     // Use this for initialization
11.     void Start () {
12.         int numeroAlAzar = Random.Range(1, 19);
13.  
14.         Debug.Log("Numero sacado al azar: " + numeroAlAzar, gameObject);
15.  
16.         switch (numeroAlAzar)
17.         {
18.             case 1:
19.                 instruction = GetComponent<Text>();
20.                 instruction.color = Color.white;
21.                 instruction.text = "M";
22.                 break;
23.  
24.             case 2:
25.                 instruction = GetComponent<Text>();
26.                 instruction.color = Color.blue;
27.                 instruction.text = "M";
28.                 break;
29.  
30.             case 3:
31.                 instruction = GetComponent<Text>();
32.                 instruction.color = Color.cyan;
33.                 instruction.text = "M";
34.                 break;
35.  
36.             case 4:
37.                 instruction = GetComponent<Text>();
38.                 instruction.color = Color.green;
39.                 instruction.text = "M";
40.                 break;
41.  
42.             case 5:
43.                 instruction = GetComponent<Text>();
44.                 instruction.color = Color.grey;
45.                 instruction.text = "M";
46.                 break;
47.  
48.             case 6:
49.                 instruction = GetComponent<Text>();
50.                 instruction.color = Color.magenta;
51.                 instruction.text = "M";
52.                 break;
53.  
54.             case 7:
55.                 instruction = GetComponent<Text>();
56.                 instruction.color = Color.red;
57.                 instruction.text = "M";
58.                 break;
59.  
60.             case 8:
61.                 instruction = GetComponent<Text>();
62.                 instruction.color = Color.yellow;
63.                 instruction.text = "M";
64.                 break;
65.  
66.             case 9:
67.                 var colorNaranja = new Color32(255, 102, 0, 255);
68.                 instruction = GetComponent<Text>();
69.                 instruction.color = colorNaranja;
70.                 instruction.text = "M";
71.                 break;
72.  
73.             case 10:
74.                 var colorMorado = new Color32(128, 0, 128, 255);
75.                 instruction = GetComponent<Text>();
76.                 instruction.color = colorMorado;
77.                 instruction.text = "M";
78.                 break;
79.  
80.             case 11:
81.                 var colorMarron = new Color32(153, 102, 51, 255);
82.                 instruction = GetComponent<Text>();
83.                 instruction.color = colorMarron;
84.                 instruction.text = "M";
85.                 break;
86.  
87.             case 12:
88.                 var colorRojoOscuro = new Color32(128, 0, 0, 255);
89.                 instruction = GetComponent<Text>();
90.                 instruction.color = colorRojoOscuro;
91.                 instruction.text = "M";
92.                 break;
93.  
94.             case 13:
95.                 var colorVerdeOscuro = new Color32(0, 128, 0, 255);
96.                 instruction = GetComponent<Text>();
97.                 instruction.color = colorVerdeOscuro;
98.                 instruction.text = "M";
99.                 break;
100.  
101.             case 14:
102.                 var colorAmarilloOscuro = new Color32(128, 128, 0, 255);
103.                 instruction = GetComponent<Text>();
104.                 instruction.color = colorAmarilloOscuro;
105.                 instruction.text = "M";
106.                 break;
107.  
108.             case 15:
109.                 var colorAzulOscuro = new Color32(0, 0, 128, 255);
110.                 instruction = GetComponent<Text>();
111.                 instruction.color = colorAzulOscuro;
112.                 instruction.text = "M";
113.                 break;
114.  
115.             case 16:
116.                 var colorCyanOscuro = new Color32(0, 128, 128, 255);
117.                 instruction = GetComponent<Text>();
118.                 instruction.color = colorCyanOscuro;
119.                 instruction.text = "M";
120.                 break;
121.  
122.             case 17:
123.                 var colorPlata = new Color32(192, 192, 192, 255);
124.                 instruction = GetComponent<Text>();
125.                 instruction.color = colorPlata;
126.                 instruction.text = "M";
127.                 break;
128.  
129.             case 18:
130.                 var colorMarronOscuro = new Color32(102, 51, 0, 255);
131.                 instruction = GetComponent<Text>();
132.                 instruction.color = colorMarronOscuro;
133.                 instruction.text = "M";
134.                 break;
135.         }
136.  
137.         int numeroAlAzar2 = Random.Range(1, 19);
138.  
139.         Debug.Log("Numero sacado al azar 2: " + numeroAlAzar2, gameObject);
140.  
141.         switch (numeroAlAzar2)
142.         {
143.             case 1:
144.                 instruction = GetComponent<Text>();
145.                 instruction.color = Color.white;
146.                 instruction.text = instruction.text + "E";
147.                 break;
148.  
149.             case 2:
150.                 instruction = GetComponent<Text>();
151.                 instruction.color = Color.blue;
152.                 instruction.text = instruction.text + "E";
153.                 break;
154.  
155.             case 3:
156.                 instruction = GetComponent<Text>();
157.                 instruction.color = Color.cyan;
158.                 instruction.text = instruction.text + "E";
159.                 break;
160.  
161.             case 4:
162.                 instruction = GetComponent<Text>();
163.                 instruction.color = Color.green;
164.                 instruction.text = instruction.text + "E";
165.                 break;
166.  
167.             case 5:
168.                 instruction = GetComponent<Text>();
169.                 instruction.color = Color.grey;
170.                 instruction.text = instruction.text + "E";
171.                 break;
172.  
173.             case 6:
174.                 instruction = GetComponent<Text>();
175.                 instruction.color = Color.magenta;
176.                 instruction.text = instruction.text + "E";
177.                 break;
178.  
179.             case 7:
180.                 instruction = GetComponent<Text>();
181.                 instruction.color = Color.red;
182.                 instruction.text = instruction.text + "E";
183.                 break;
184.  
185.             case 8:
186.                 instruction = GetComponent<Text>();
187.                 instruction.color = Color.yellow;
188.                 instruction.text = instruction.text + "E";
189.                 break;
190.  
191.             case 9:
192.                 var colorNaranja = new Color32(255, 102, 0, 255);
193.                 instruction = GetComponent<Text>();
194.                 instruction.color = colorNaranja;
195.                 instruction.text = instruction.text + "E";
196.                 break;
197.  
198.             case 10:
199.                 var colorMorado = new Color32(128, 0, 128, 255);
200.                 instruction = GetComponent<Text>();
201.                 instruction.color = colorMorado;
202.                 instruction.text = instruction.text + "E";
203.                 break;
204.  
205.             case 11:
206.                 var colorMarron = new Color32(153, 102, 51, 255);
207.                 instruction = GetComponent<Text>();
208.                 instruction.color = colorMarron;
209.                 instruction.text = instruction.text + "E";
210.                 break;
211.  
212.             case 12:
213.                 var colorRojoOscuro = new Color32(128, 0, 0, 255);
214.                 instruction = GetComponent<Text>();
215.                 instruction.color = colorRojoOscuro;
216.                 instruction.text = instruction.text + "E";
217.                 break;
218.  
219.             case 13:
220.                 var colorVerdeOscuro = new Color32(0, 128, 0, 255);
221.                 instruction = GetComponent<Text>();
222.                 instruction.color = colorVerdeOscuro;
223.                 instruction.text = instruction.text + "E";
224.                 break;
225.  
226.             case 14:
227.                 var colorAmarilloOscuro = new Color32(128, 128, 0, 255);
228.                 instruction = GetComponent<Text>();
229.                 instruction.color = colorAmarilloOscuro;
230.                 instruction.text = instruction.text + "E";
231.                 break;
232.  
233.             case 15:
234.                 var colorAzulOscuro = new Color32(0, 0, 128, 255);
235.                 instruction = GetComponent<Text>();
236.                 instruction.color = colorAzulOscuro;
237.                 instruction.text = instruction.text + "E";
238.                 break;
239.  
240.             case 16:
241.                 var colorCyanOscuro = new Color32(0, 128, 128, 255);
242.                 instruction = GetComponent<Text>();
243.                 instruction.color = colorCyanOscuro;
244.                 instruction.text = instruction.text + "E";
245.                 break;
246.  
247.             case 17:
248.                 var colorPlata = new Color32(192, 192, 192, 255);
249.                 instruction = GetComponent<Text>();
250.                 instruction.color = colorPlata;
251.                 instruction.text = instruction.text + "E";
252.                 break;
253.  
254.             case 18:
255.                 var colorMarronOscuro = new Color32(102, 51, 0, 255);
256.                 instruction = GetComponent<Text>();
257.                 instruction.color = colorMarronOscuro;
258.                 instruction.text = instruction.text + "E";
259.                 break;
260.         }
261.  
262.        
263.         instruction.text = instruction.text + "N";
264.         instruction.text = instruction.text + "U";
265.     }
266.    
267.     // Update is called once per frame
268.     void Update () {
269.    
270.     }
271. }

Unfortunately it doesn't work. It paints the first letter with a random color, but when it write the second letter the whole word MENU is painted using the second random color...

Any help debugging this will be much appreciated.

 

You can use rich text to style text like so:

Code (CSharp):

1. <color=#ff0000ff>red</color>
2. <color=green>green</color>

Next you might want this function from here:

Code (CSharp):

1. string ColorToHex(Color32 color)
2. {
3.     string hex = color.r.ToString("X2") + color.g.ToString("X2") + color.b.ToString("X2");
4.     return hex;
5. }

Create some random Color32's, then use ColorToHex to insert the hex into the rich text tag.

 

Well, the letters are using the same material, aren't they? Give each letter a different material.
But if there is a better way? I don't know, never tried it, did not play with manipulation text much.

 

Nope, sorry. That will insert a random color for the whole word. I.E: if I use

Code (CSharp):

1. <Color=#000000ff>[COLOR=#000000]M[/COLOR]</Color><Color=#000000ff>[COLOR=#000000]E[/COLOR]</Color><Color=#000000ff>[COLOR=#000000]N[/COLOR]</Color><Color=#000000ff>[COLOR=#000000]U[/COLOR]</Color>

and then replace the hex color code for a random one, that will insert a random color code for all the hex tags, so if the random color was red, all the letters are goint to change from white to red, and not ONLY one letter...

That is, passing from MENU to MENU

 

The quick and dirty way is to just make the four letters different images/sprites, and use the colour property of each to tint it. It could be done with far less code too

 

Nope, sorry, he's right.

Something like that should work :

Code (CSharp):

1.         string ColorToHex(Color32 color) {
2.             string hex = color.r.ToString("X2") + color.g.ToString("X2") + color.b.ToString("X2");
3.             return hex;
4.         }
5.  
6.         Color32 RandomColor() {
7.             return new Color32((byte)Random.Range(0, 255), (byte)Random.Range(0, 255), (byte)Random.Range(0, 255), 255);
8.         }
9.  
10.         string RandomMenuColor() {
11.             string M = "<color=#" + ColorToHex(RandomColor()) + ">M</color>";
12.             string E = "<color=#" + ColorToHex(RandomColor()) + ">E</color>";
13.             string N = "<color=#" + ColorToHex(RandomColor()) + ">N</color>";
14.             string U = "<color=#" + ColorToHex(RandomColor()) + ">U</color>";
15.  
16.             return M + E + N + U;
17.         }

If you don't want to use "Range.Random", you can use a List, adding the color you want and then use Random.Range(0, List.Count).

If you don't want to create all letters, you can loop on each letter of your text and create a new string ; so you can apply this method to every text you want. That's way, you'll be able to kill several eyes

PS: By the way, I'm sure this works because I just did a try.

 

You are completely right, it works indeed.

I took me a while to fully understand the logic behind your example but I manage to adapt it to what I need.

The only bad thing I notice is that the random isn't that random... there is a tendency in every run towards certain colors, but that, I think, it's because of the seed and/or a flaw about random numbers.

Anyway, thank you so much for your example.

And thanks to @Stardog, for the original solution.