Unity技术问询：如何在数字3文本下方添加绿色Sprite或Image

Hey there! I've tackled this exact scenario in Unity before, so let's walk through the best ways to get that green indicator under the number "3"—while keeping the surrounding text fully editable. Here are two reliable approaches:

方法1：TextMeshPro富文本（最灵活快捷） #

If you're using TextMeshPro (the modern, recommended text system for Unity), rich text makes this super straightforward without extra scripts:

• First, replace any old Text components with a TextMeshPro - Text component (right-click UI → TextMeshPro → Text).
• Import your green sprite (like an underline or small square) into Unity, set its Texture Type to Sprite (2D and UI) in the Inspector.
• Add the sprite to a TextMeshPro Sprite Asset: Open Window → TextMeshPro → Sprite Asset Creator, drag your green sprite into the editor, save the new Sprite Asset, then assign it to the Sprite Asset field on your TMP Text component.
• Use TMP's rich text tags to insert the sprite positioned directly under the "3". For example, your text could look like:

  Your prefix text <voffset>-15%<sprite name="GreenIndicator" size="1.2"></voffset>3 Your suffix text
  

  • voffset adjusts vertical position (negative values move the sprite down)
  • size scales the sprite to match your text size
  • name matches the sprite's name in your Sprite Asset
• Enable the Rich Text toggle on the TMP Text component (it's on by default, but double-check). Now you can edit the prefix/suffix text freely, and the green indicator stays locked under the "3".

方法2：UI层级+脚本定位（适合复杂交互） #

If you need more control (like making the indicator clickable, or dynamic positioning when text changes), use a nested UI setup with a small script:

• Create an empty UI GameObject as a container (name it something like TextWithIndicator), set its RectTransform to fit your layout needs.
• Add a TextMeshPro - Text component to the container, input your initial text (e.g., "Start at 3, end here").
• Create a green Image (or Sprite) as a child of the container—size it to match your "3" text, and set it inactive initially.
• Attach this script to the container to auto-position the indicator:

  using TMPro;
  using UnityEngine;
  
  public class GreenIndicatorHandler : MonoBehaviour
  {
      [SerializeField] private TMP_Text targetText;
      [SerializeField] private GameObject greenIndicator;
      [SerializeField] private float yOffset = -10f; // Adjust this to move the indicator up/down
  
      void Start()
      {
          UpdateIndicatorPosition();
      }
  
      // Call this method whenever you modify the text!
      public void UpdateIndicatorPosition()
      {
          int threeIndex = targetText.text.IndexOf('3');
          if (threeIndex == -1)
          {
              greenIndicator.SetActive(false);
              return;
          }
  
          TMP_TextInfo textInfo = targetText.textInfo;
          TMP_CharacterInfo charInfo = textInfo.characterInfo[threeIndex];
  
          // Convert the character's world position to local space of the container
          Vector3 charBottomLeft = charInfo.bottomLeft;
          Vector3 localCharPos = targetText.transform.InverseTransformPoint(charBottomLeft);
  
          // Position the indicator centered under the "3"
          greenIndicator.transform.localPosition = new Vector3(
              localCharPos.x + charInfo.faceRect.width / 2,
              localCharPos.y + yOffset,
              0
          );
          greenIndicator.SetActive(true);
      }
  }
  

• Assign the TMP Text component and green indicator to the script's fields in the Inspector.
• Whenever you update the text (via code or the Inspector), call UpdateIndicatorPosition() to reposition the indicator under the new "3".

Quick Tips #

• For method 1, tweak the voffset value until the sprite sits perfectly under the "3" (percentage values work best for responsive text).
• If you're stuck on the Sprite Asset setup, make sure your sprite's pivot is set to the top-center for easier positioning.
• Avoid using the old Unity Text component—it has limited rich text support and won't work as smoothly for this use case.

内容的提问来源于stack exchange，提问作者Alexcandra Khotko