5/23/2014 Highlighting Parts of GUI Text - Unity Answers

http://answers.unity3d.com/questions/184678/highlighting-parts-of-gui-text.html 1/5

Questions Tags Users Badges Unanswered Ask A Question

Follow this question

By Email:

Once you sign in you will be able to

subscribe for any updates here

By RSS:

Answers

Answers and Comments

Welcome to Unity AnswersThe best place to ask and answer

questions about development with

Unity. Check out our FAQ for more

information.

Unity Answers tutorialvideo!To help users post good questions

and use the site effectively we have

posted a tutorial video. Please check

it out.

Topics:

gui x5232

text x787

highlight x55

asked: Nov 09 '11 at 12:30 PM

Seen: 3060 times

Last Updated: Nov 16 '11 at 03:12

AM

Language: English

Log in

Home

Unity

Showcase

Asset Store

Learn

Community

Company

Download

Buy

Forums

Answers

Feedback

Issue Tracker

Evangelists

User Groups

Answers

2

asked Nov 09 '11 at 12:30 PM

Bicko

297 ● 9 ● 10 ● 13

2

Highlighting Parts of GUI Text

I've got a scene where the user needs to find a few items, and as they find them the original list of items highlights to

show which ones have been found and which are still missing. However rather than a bullet list it's done in a sentence

format because it's presented as a riddle.

How can I make certain parts of the text highlight, whilst ignoring others? I'm currently using OnGUI, so a solution

working with that would be ideal but if necessary I can use 3D Text.

Update: Here's what I'm currently using to display the text, as well as some of the text that's going in to it:

GUI.Box(Rect(50,riddleBoxTop,693,riddleBoxHeight),riddleText,riddleGuiStyle);

riddleText = "Three bees, ACT changed to CAT, A ball through a maze, a fox with a hat;\n\nThe red flame on its candle, a tree in its space, A tack, two snakes, and four wheels in place."

gui text highlight

3 answers:

You don't need to use styles...

The simplest way to change the GUI color is like this:

function OnGUI ()

{

var oldColor : Color = GUI.color;

GUI.color = Color.green;

5.

/* do some stuff */

GUI.color = oldColor;

}

I recommend breaking your sentence up into an array of strings. It sounds like it's already broken up logically based on

the fact that you want to highlight different portions.

Once you've broken it up into an array, you can draw each piece of text with a separate box (changing the GUI.color as

you go). Like Ray_Wilson has suggested, you can use GUIStyle.CalcSize() to figure out the width and height of each

piece. This will allow you to lay the boxes out next to each other.

more ▼

sort voted first ▼

5/23/2014 Highlighting Parts of GUI Text - Unity Answers

http://answers.unity3d.com/questions/184678/highlighting-parts-of-gui-text.html 2/5

Related Questions

I want to add text, not GUI

How to display Int variable onto the

GUI/HUD

I have a "display text one letter at a

time" script. Can I modify it to display

a complete string of text on

command?

Scrolling Text

Text appear on screen when I stand

over object.

Big text field GUI.

Displaying varying text

Dialouge text.

Allow specific characters on GUI

textField?

how to scale and position guiText in

android

answ ered Nov 11 '11 at 12:27 AM

jahroy

3.6k ● 14 ● 19 ● 48

This really won't be that complicated at all (not as bad as it sounds)...

Ok... I'm bored. Here's some simple, un-tested example code that uses a very simple custom class namedTextItem:

var stringList : TextItem [];

var startRect : Rect = Rect(0, 0, 0, 60);

5. function OnGUI ()

{

var theRect : Rect = startRect;

var theStyle : GUIStyle = GUI.skin.box;

10. /* store this for later */

var oldColor : Color = GUI.color;

for ( var thisItem : TextItem in stringList ) {

15.

/* create a GUIContent and calculate its size */

var theContent : GUIContent = GUIContent(thisItem.text);

var theSize : Vector2 = theStyle.CalcSize(theContent);

20.

GUI.color = thisItem.color;

theRect.width = theSize.x;

25. GUI.Box(theRect, theContent, theStyle);

/* set the x-value of the next box to the end of the last box */

theRect.x += theSize.width;

30. }

/* restore original gui color */

GUI.color = oldColor;

35. }

class TextItem

{

var text : String;

40. var color : Color;

function TextItem ()

{

text = "";

45. color = Color.white;

}

}

more ▼

Nov 11 '11 at 01:43 PMBicko

Brilliant, just what I was looking for. I had to change theSize.width to theSize.x to get it to work initially, and now I've got a

great basis to work from. Cheers jahroy!

Nov 11 '11 at 08:34 PMjahroy

Great. Glad it helped. I fixed the x/width thingy (oops)...

Following this up.. I've got all the boxes in, and they'll change colour as they should, but I need them to centre align.. any

ideas on how I'd do this?

Here's how it's looking at the moment (I've got boxes on the objects for debugging at the moment, I'm changing them to

labels later) http://img534.imageshack.us/img534/6141/riddles.jpg

5/23/2014 Highlighting Parts of GUI Text - Unity Answers

http://answers.unity3d.com/questions/184678/highlighting-parts-of-gui-text.html 3/5

1

answ ered Nov 09 '11 at 04:18 PM

Ray_Wilson

16 ● 1 ● 1 ● 2

0

show 1 more reply

It would really depend on how you are intending to highlight your text and also how you are composing your sentence?

For example you could highlight text by making it a different colour. To do this you would have two different styles (one for

normal text and one for highlighted text) with each being a different colour. This would necessitate composing your

sentence of multiple text objects (e.g. GUI.Label) and the issue would then be how do you join them together to form the

sentence? The following code is in C#

// Instance two GUIStyle objects

GUIStyle TextNormal = new GUIStyle();

GUIStyle TextHighlight = new GUIStyle();

5. // Change the colors in the styles accordingly

TextNormal.normal.textColor = Color.white;

TextHighlight.normal.textColor = Color.yellow;

// Sentence fragments

10. string strNormal = "You have item: ";

string strItem = "Test Item";

// Output sentence (composition?)

GUI.Label(new Rect(10, 10, 100, 20), strNormal, TextNormal);

15. GUI.Label(new Rect(110, 10, 100, 20), strItem, TextHighlight);

I would not recommend using inheritence to inherit GUI style information. The reason being every time you wanted to add

a new style you would need to create a new base class and update or create multiple new sub-classes. As we are only

talking about a different font colour you would be much better using GUIStyle in object composition and passing in the

constructor.

You could overload the '+' operator to get the functionality you mention though this necessitates knowing the pixel width

of a piece of text. Fortunately, GUIStyle() can calculate this for you.

Take the following class as an example and perhaps something to work on (I haven't had time to test this btw, but should

hopefully just work):

public class RiddlePart

{

// A reference to the GUI style of this text

protected GUIStyle m_GUIStyle;

5.

// The riddle fragment of text

Nov 14 '11 at 11:37 AMBicko

Nov 14 '11 at 07:33 PMjahroy

The general rule for centering something is:

something.x = total.x + ( (total.width - somethingthing.width) / 2 );

So, for you it should be something like this:

firstLabel.x = ( Screen.width - totalWidthOfAllLabels ) / 2;

Nov 15 '11 at 10:38 AMBicko

Cheers jahroy, I've actually got no problem doing the maths for positioning it, but the issue I'm getting is accessing the GUI

labels to get their width after they've been generated.

more ▼

Nov 10 '11 at 09:02 AMBicko

I've updated the original, but you've spotted the big problem for me which is keeping it all held together in a sentence. I've

also got another 3 of these 'riddles' for this scene alone that will need to highlight so I can't just make a static solution for

this.

To be more specific about what I want for the highlight, all I want to do is make the text change colour.. if I can do this over

time that'd be nice but it's not completely necessary.

I don't suppose it's possible to do the GUI and compose the text out of riddlePart1+riddlePart2+riddlePart3 (etc.) and have

the GUI inherit styles for each of the parts rather than apply a style to the lot of them?

First time here? Check out the FAQ! x

5/23/2014 Highlighting Parts of GUI Text - Unity Answers

http://answers.unity3d.com/questions/184678/highlighting-parts-of-gui-text.html 4/5

protected string m_RiddleText;

// The text width (calculated from GUIStyle)

10. protected float m_TextWidth;

// The text height (calculated from GUIStyle)

protected float m_TextHeight;

15. // The X position of the text (screen space)

protected float m_XPos;

// The Y position of the text (screen space)

protected float m_YPos;

20.

// ----------------

// ** Properties **

// ----------------

25. public float TextWidth

{

get { return m_TextWidth; }

}

30. public float TextHeight

{

get { return m_TextHeight; }

}

35. public float XPos

{

get { return m_XPos; }

}

40. public float YPos

{

get { return m_YPos; }

}

45. // ----------------

// ** Methods **

// ----------------

public RiddlePart(string RiddleText, GUIStyle Style)

50. {

// Store the style reference

m_GUIStyle = Style;

// Store the riddle text

55. m_RiddleText = RiddleText;

// Calculate text dimensions

CalculateTextDimensions();

60. // Default position

m_XPos = 0.0f;

m_YPos = 0.0f;

}

65. private void CalculateTextDimensions()

{

// We can use GUIStyle to calculate the text dimensions

m_TextWidth = m_GUIStyle.CalcSize(new GUIContent(m_RiddleText)).x;

m_TextHeight = m_GUIStyle.CalcSize(new GUIContent(m_RiddleText)).y;

70. }

5/23/2014 Highlighting Parts of GUI Text - Unity Answers

http://answers.unity3d.com/questions/184678/highlighting-parts-of-gui-text.html 5/5

about | faq | privacy policy | cookies | contactEnterprise

Social Q&A

answ ered Nov 11 '11 at 12:00 AM

Ray_Wilson

16 ● 1 ● 1 ● 2

public void SetPosition(float XPos, float YPos)

{

m_XPos = XPos;

75. m_YPos = YPos;

}

public void ChangeText(string NewRiddleText)

{

80. m_RiddleText = NewRiddleText;

CalculateTextDimensions();

}

85. public void RenderText()

{

// Output the text as a GUI label

GUI.Label(new Rect(m_XPos, m_YPos, m_TextWidth, m_TextHeight), m_RiddleText, m_GUIStyle);

}

90.

// Overload the '+' operator

public static RiddlePart operator +(RiddlePart lhs, RiddlePart rhs)

{

// Update the right hand side riddle part based on the position and width/height of

95. // the left hand side riddle part

RiddlePart Temp = rhs;

Temp.SetPosition((lhs.XPos + lhs.TextWidth + 10.0f), lhs.YPos);

100. return Temp;

}

}

Adding these objects together should position them in a straight line beginning at the position of the first RiddlePart. You

could create another class called 'RiddleParagraph' which is composed of 'RiddleParts' and is responsible for keeping

track of line width and starting new lines and also doing the rendering of all these parts in OnGUI();

Your answer

[hide preview]

Login/Signup to Post Your Answer

more ▼