Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: DevMan5000 on August 04, 2014, 08:54:51 PM

Title: Clickable Words In A Label
Post by: DevMan5000 on August 04, 2014, 08:54:51 PM
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!
Title: Re: Clickable Words In A Label
Post by: ArenMook on August 05, 2014, 01:12:42 PM
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.
Title: Re: Clickable Words In A Label
Post by: DevMan5000 on August 06, 2014, 08:40:19 PM
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.
Title: Re: Clickable Words In A Label
Post by: DevMan5000 on August 06, 2014, 09:17:01 PM
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!
Title: Re: Clickable Words In A Label
Post by: ArenMook on August 07, 2014, 03:29:49 AM
Yeah there seems to be some issue with the line breakage. I'll fix it.