How to keep Bark above NPC in TDE using TextMesh Pro

[Fenda]

I've tweaked the Standard Bark UI prefab to use TextMesh Pro successfully. The prefab is placed as a child game object of my NPC prefab.

Top Down Engine applies post-processing to the main camera so I want the Bark UI to be rendered by the UICamera instead. This is the settings I used for the Bark UI Canvas component:

Screenshot 2019-07-05 at 11.37.32.png (50.47 KiB) Viewed 904 times

This causes the speech bubble to appear fixed at the bottom of the UICamera:

Screenshot 2019-07-05 at 11.39.26.png (104.44 KiB) Viewed 902 times

I tried to write a script that would force the game object transform to follow the NPC around using this line but didn't have much luck..:

Code: Select all

transform.position = uiCamera.WorldToScreenPoint(characterModel.position);

[Tony Li]

What about using a world space canvas for the bark UI?

If you stick with a screen space canvas and use Camera.WorldToScreenPoint, set the bark panel's anchor to the lower left (0,0) and set PosX and PosY to the screen point.

[Fenda]

I can't use the world space canvas because then the Postprocessing effects on the MainCamera are applied to the Bark UI components too (which makes the text receive bloom etc) so they need to be rendered by the UICamera.

The Bark Main Panel has the following script attached:

Code: Select all

private void Update() {
      Vector3 screenPos = Camera.main.WorldToScreenPoint(characterModel.position);
      Debug.Log(screenPos);
      transform.position = screenPos;
}

The log debugs this position, something like (-60.2, 368.3, 17.5) but then the inspector is totally different with huge numbers.

Screenshot 2019-07-05 at 18.15.06.png (72.32 KiB) Viewed 895 times

[Tony Li]

Since the bark UI is in a screen space canvas, you need to position it using its RectTransform, not its transform position.

However, to make everything simpler, consider setting up a world space bark UI like this:

1. Inspect MainCamera.

• On the Post Process Layer component, remove "UI" from the Layer.
• On the Camera component, remove "UI" from the Culling Mask.
• On the Camera component, click the gear menu in the upper right and select Copy Component.

2. Add a child Camera GameObject to MainCamera. Name it something like WorldSpaceUICamera.

• Make sure its local position is (0,0,0) so it exactly matches its parent, MainCamera.
• Remove the Audio Listener component.
• On the Camera component:
  • Click the gear menu and select Paste Component Values.
  • Set Clear Flags to Depth Only.
  • Set Culling Mask only to "UI".
  • Set Depth to 0.

3. Inspect KoalaUICamera (or whatever your main UI camera is). Set Depth to 1. This makes it render on top of world space UI elements.

4. Inspect your character's bark UI. Set the Layer to UI and click "Yes, change children".

You can also change other world space UI elements to the UI layer, such as the ButtonPrompt prefab. This will make it render without post process effects to make it look crisper.

[Fenda]

What a legend! Thank you, that worked a treat.