Clickable Words In A Label

[DevMan5000]

Hi,

A lot of story book apps have these two features:

1. Words are highlighted as the narrator reads them.
2. After the narrator is done, the reader can click on individual words. The word will be spoken aloud and decorated with a fading highlight.

In regard to number 1, how would I programmatically get each word individually to highlight?

For number 2, how could I make each word individually clickable?

Thanks much!

[ArenMook]

1. Have 2 labels with identical text, one on top of another. Top one should use the highlighted color, and bottom should use the darkened color. Fade in the top label one character at a time using [Aa] syntax the same way TypewriterEffect does it.

2. You'd have to use [url] tags for each word, or just UILabel.GetWordAtPosition.

[DevMan5000]

Ok, I will have to look into the TypewriterEffect. I believe that you included that in one of the tutorials.

In regard to the clickable text, thank you so much! I used the UILabel.GetWordAtPosition method. It has a few quirks (words preceded by '\n' line breaks don't get picked up), but I can't complain because this is a simple solution to something I thought was going to be much more complex.

For those interested, here is a script that I wrote and assigned to the Label. Just remember to attach a collider to the label so the click event comes through.

1.     void OnClick()
2.     {
3.         UILabel label = GetComponent<UILabel>();
4.         if (label != null)
5.         {
6.             Vector2 screenPos = Input.mousePosition;
7.             Camera cam = NGUITools.FindCameraForLayer(gameObject.layer);
8.             Vector3 worldPos = cam.ScreenToWorldPoint(screenPos);
9.             Vector3 localPos = transform.worldToLocalMatrix.MultiplyPoint3x4(worldPos);
10.  
11.             string str = label.GetWordAtPosition(new Vector2(localPos.x, localPos.y));
12.             Debug.Log(str);
13.         }
14.     }
15.  

NOTE: I had to pass a 2D vector into GetWordAtPosition( ). If a 3D vector is passed in, it tries to interpret the vector as a world coordinate and not local to the label. I only found that out on accident, otherwise, I would have been wondering why it wasn't working.

[DevMan5000]

Actually, now that I have experimented more, I am finding that GetWordAtPosition() has a bug in it.

"This is some sample text that is
bonkers, but whatever."

In the example above, if I click on "whatever", then the function returns "whatever". Each word works fine when clicked on, except if the word is the first word on a new line. In that case, the func returns the word prior to the word you click on.

So if I click on "bonkers", then the func will return "is". Also, note, I did not put a new-line character in manually to bump bonkers to the next line, it just happened because of the textbox dimensions.

ArenMook, do you know what's happening here? Is there a fix that I can try?

Thanks!

[ArenMook]

Yeah there seems to be some issue with the line breakage. I'll fix it.