Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: FizzPow on October 09, 2013, 03:37:05 PM

Title: Determine where text is on screen?
Post by: FizzPow on October 09, 2013, 03:37:05 PM
In our app, I am displaying a lyrics of a song on the screen using a UILabel, and am highlighting a word or two in each line of lyrics with color codes.  How can I determine where the highlighted words actually end up rendering on screen so I can position a sprite pointing at them?  I am using dynamic fonts and NGUI3 if that matters.

Thanks for any help!
Title: Re: Determine where text is on screen?
Post by: ArenMook on October 10, 2013, 07:38:38 AM
The font has a CalculatePrintedBounds or something like that function. You can use it to determine the position.

I am guessing you will first need to Wrap the text (again a function in the font) into multiple lines, then go to the line where your highlighted word is, and run Calculate on it, passing the text on that line leading up to your highlighted word.
Title: Re: Determine where text is on screen?
Post by: FizzPow on October 10, 2013, 08:07:03 AM
Each lyric is only one line and I am using "Shrink Content" option to keep longer lines fitting and I am center-aligned.  I see UIFont.CalculatePrintedSize that would allow me to process text before the highlighted word perhaps, but that would only work to predict where the highlighted word would be if the text was left-aligned and had no shrinking I think?

Here's an example text I am using for testing:
"Testing highlighting [ffff00]words[ffffff] for lyrics testing shrink and stuff"
Title: Re: Determine where text is on screen?
Post by: Yukichu on October 10, 2013, 09:09:53 AM
This might sound crazy, but... I'd put all the words into an array/list and populate the text of the UILabel repeatedly as needed.  When you're on the next work, change that item in the array to have color. 

Doesn't too crazy, and there'd be way less need for calculation.  Just whenever it goes to the next word, you'd have to set the UILabel text again to reflect to newly highlighted word.
Title: Re: Determine where text is on screen?
Post by: FizzPow on October 10, 2013, 09:34:10 AM
I figured out a solution that allows me to keep my line centered and auto Shrink Content still.  ArenMook or anyone else, let me know if you see potential issues, but it works great in my tests:

  1.         //full label text is Testing highlighting [ffff00]words[ffffff] for lyrics testing shrink and stuff
  2.         string text = "Testing highlighting [ffff00]w";
  3.         Vector2 v2 = labelTest.font.CalculatePrintedSize(text, labelTest.supportEncoding, labelTest.symbolStyle);
  4.  
  5.         //determine shrink width %
  6.         float fXShrink = labelTest.localSize.x / labelTest.printedSize.x;
  7.  
  8.         //position icon above word
  9.         Vector3 v3 = IconContainer.transform.localPosition;
  10.         float fXPos = ( (v2.x * fXShrink) - (labelTest.localSize.x / 2.0f));
  11.         IconContainer.transform.localPosition = new Vector3(fXPos, v3.y, v3.z);
  12.