Question Drawing a string onto a UI image of pre-determined size

Hi everyone, quite new to all this so would really appreciate some help!

Using the Vertical Layout Group, I've made a basic background for my text which resizes based on the length of the string. I would like two things to happen:

1) The string to draw on per character at a predetermined speed (this is currently working fine)
2) The background box/speech bubble to appear before the string begins drawing.

My issue is that, using a 9-sliced image as a speech bubble, the image updates per frame, expanding as the string draws. What I actually want is the behaviour as seen in the image below, where the box has already expanded to its maximum size based on the maximum length of the string.

As I said, I'm fairly new to this and am just trying to logic it out in my head. Is there an easy way to achieve this with the basic in-editor UI tools, or is a more custom solution required?

My only solution so far would be to have a second layer of text which is set to the background colour and so invisible, which is immediately drawn in the first frame, thus expanding the box to its full size for drawn string to them 'trace' over. I feel like there is a much more elegant solution - I just don't know what! Any help would be greatly appreciated. Thankyou.

 

your solution with the invisible text is pretty straight forward.
Any other solution would require some custom code and tricks which in the end is probably more hacky and bug prone than the invisible label.
So, I would recommend to go for your first idea.

 

Thanks very much for the reassurance! To overlay the text exactly, would you recommend just using a vertical layout group and offsetting it? Or is there a better way?

 

Not sure what you want to know exactly.
However, I would go for this hierarchy:

Code (CSharp):

1.  
2. ┌ SpeechBubble
3. └┬ InvisibleText
4.  └─ VisibleText
5.