Resolved How can I center my size Changing Chat Bubble in 3D Space?

I would like to display the Chat Bubble centered above the player.
I've been trying for three weeks to get this to work, but I can't get it right. Maybe one of you can help me?




Here is the code for Chat Bubble:

Code (CSharp):

1. using UnityEngine;
2. using TMPro;
3.  
4. public class ChatBubble3D : MonoBehaviour {
5.  
6.     public static Transform Create(Transform parent, Vector3 localPosition, string text) {
7.         Transform chatBubbleTransform = Instantiate(GameAssets.i.chatBubblePrefab, parent);
8.         chatBubbleTransform.localPosition = localPosition;
9.  
10.         chatBubbleTransform.GetComponent<ChatBubble3D>().Setup(text);
11.  
12.         chatBubbleTransform.LookAt(chatBubbleTransform.position + Camera.main.transform.rotation * Vector3.forward, Camera.main.transform.rotation * Vector3.up);
13.  
14.         return chatBubbleTransform;
15.     }
16.  
17.     private SpriteRenderer backgroundSpriteRenderer;
18.     private TextMeshPro textMeshPro;
19.  
20.     private void Awake() {
21.         backgroundSpriteRenderer = transform.Find("Background").GetComponent<SpriteRenderer>();
22.         textMeshPro = transform.Find("Text").GetComponent<TextMeshPro>();
23.     }
24.  
25.     private void Update() {
26.         this.transform.LookAt(transform.position + Camera.main.transform.rotation * Vector3.forward, Camera.main.transform.rotation * Vector3.up);
27.     }
28.  
29.     private void Setup(string text) {
30.         textMeshPro.SetText(text);
31.         textMeshPro.ForceMeshUpdate();
32.         Vector2 textSize = textMeshPro.GetRenderedValues(false);
33.  
34.         Vector2 padding = new Vector2(7f, 3f);
35.         backgroundSpriteRenderer.size = textSize + padding;
36.  
37.         Vector3 offset = new Vector3(-3f, 0f);
38.         backgroundSpriteRenderer.transform.localPosition = new Vector3(backgroundSpriteRenderer.size.x / 2f, 0f) + offset;
39.  
40.         TextWriter.AddWriter_Static(textMeshPro, text, .03f, true, true, () => { });
41.     }
42.  
43. }

Here is the code to generate a chat bubble:

Code (CSharp):

1. Vector3 dialogueBoxPosition = new Vector3(0f, 2f, 0f);
2. chatBubble3DTransform = ChatBubble3D.Create(transform.transform, dialogueBoxPosition, "Testing...");

Thanks

 

Well, what's wrong with it?

 

Oh my goodness, you are not gonna want to hear this but you do NOT wanna write all that horrible code!!

You don't have to because Unity already did it and it works awesomely. Setting it up can be a little tricky so I keep this handy because it is such a common game thing to need bubbles: tooltips, talking, etc.

There are two example scenes in the package with slightly different demos and purposes. One is even world-space!

Full package attached to this project, all source and scenes and assets necessary.

 

Oops, somehow the picture was not added.

In the picture, you can see that the box always starts from the middle, instead of starting about halfway to the right to being shown in the middle above the player.

 

You're right, I don't want to hear it, because I like to learn something and not just use any prefabs that already exist.
I program to learn from it, not to use any premade things.

 

It kind of looks like you want to play around with the Anchor Point/Pivot Point on the UI object, and set your TextMeshPro object to auto-center to the middle, but it's hard to tell without knowing how your prefab is actually set up.

 

I made some Images of the Prefab set up:

https://i.ibb.co/R2KrXHZ/Screenshot-2023-03-16-190305.png
https://i.ibb.co/vxYjgqn/Screenshot-2023-03-16-190330.png
https://i.ibb.co/12LsH5g/Screenshot-2023-03-16-190415.png
https://i.ibb.co/ky2Bn2N/Screenshot-2023-03-16-190437.png

 

Hmm, don't think I really know enough about TMP on non-Canvas objects, usually I would have created a Canvas which is rendered in World Space to have floating UI like that.

Does center-aligning the text change the behavior of it at all?

 

Thanks for the Tip with the Text center-aligning. Now its perfectly centered.