1
\$\begingroup\$

For my Unity puzzle game, I am looking to draw elliptical "shadows" under certain letters in a Text Mesh Pro text field.

These shadows will have varying widths depending on the width of the letters, and the number of letters covered by the shadow. The following picture shows three possible examples of one-letter, two-letter and three-letter shadows.

enter image description here

I have calculated the width of each letter, and between that and the kerning... I know what the semi-major axis of the ellipse should be. (The height/semi-minor axis will always be the same.)

I understand that it's possible to draw an ellipse using a Line Renderer. Is there a similarly simple way to draw a filled ellipse? There would ideally be 4 inputs:

  • Width (semi-major axis)
  • Height (semi-minor axis)
  • Color of the fill
  • Color of the border

(If the color of the fill and the color of the border has to be the same, that is totally acceptable.)

Any suggestions on how to draw such a filled ellipse in Unity? Thank you!

\$\endgroup\$
2
  • 2
    \$\begingroup\$ Why not use an image and just stretch it? \$\endgroup\$
    – Zibelas
    Commented Jun 10, 2022 at 8:01
  • \$\begingroup\$ @Zibelas - once again, you are a genius. I already have this working! Please add it as an Answer, so I can accept it below. Thank you!! \$\endgroup\$
    – kanamekun
    Commented Jun 10, 2022 at 9:00

1 Answer 1

1
\$\begingroup\$

The easiesy way to get just a pseudo shadow working is to use an image and stretch it. You can use 9 Splice or 2 images (for border and inside). As long as your basis image is not too small, it will look decent enough.

\$\endgroup\$
3
  • \$\begingroup\$ Great thanks, got this working! One question though: the border of the image doesn't look so sharp... any suggestions other than making the image larger? (It's 11k now.) \$\endgroup\$
    – kanamekun
    Commented Jun 10, 2022 at 9:32
  • \$\begingroup\$ Shadows usually are also not extremly sharp, it depends on what kind of effect you are looking for. If your source image is too big, it might look worse when you downscale compared to a closer fit image. It can be as well how you import you image and what settings you have used for it. \$\endgroup\$
    – Zibelas
    Commented Jun 10, 2022 at 9:39
  • \$\begingroup\$ The edges look a bit jagged and rough... not as smooth as the edges of the ellipses I posted above? I will try different sizes... \$\endgroup\$
    – kanamekun
    Commented Jun 10, 2022 at 9:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .