Search Unity

Question Using Content Size Fitter on a GameObject with Text Mesh Pro

Discussion in 'UGUI & TextMesh Pro' started by literacy, Jul 22, 2022.

  1. literacy

    literacy

    Joined:
    Nov 14, 2021
    Posts:
    56
    I have 5 separate GameObjects, each with a Text Mesh Pro component with a single character in the Text Input.

    I am using the Content Size Fitter (Horizontal Fit: Preferred Width) to set the Width of each of these GameObjects. Then I pull that Preferred Width from the Rect Transform using the following Visual Scripting:

    Get Preferred Width.png

    I've noticed that usually this works, but in some cases the Preferred Width is off. This usually happens on more narrow letters, such as a lowercase i, j, t or v. Here's an example:

    aeiou.png


    Is the Content Size Fitter determining the horizontal width based on reality? Or is it possibly using information from the font (which could potentially be wrong).

    Just trying to figure out what I'm doing wrong here... thanks!
     
  2. literacy

    literacy

    Joined:
    Nov 14, 2021
    Posts:
    56
    I thought maybe the issue was font related, so I changed the font to Liberation and got a similar result.

    Liberation.png

    I must be missing something about how this all works. I will create a single GameObject with a Text Mesh Pro that says "a e i o u". Then I will overlay it with the above, and manually adjust the width of each letter until it matches. I'll repeat that for all 52 glyphs or so that I intend to use.

    Then I'll store those glyph widths in a Dictionary, and use that to space out the letters.

    If anyone can think of a more elegant solution, please let me know!
     
  3. literacy

    literacy

    Joined:
    Nov 14, 2021
    Posts:
    56
    Update: my plan failed horribly. If anyone stumbles across this in the future, don't do as I did!
     
  4. d3eds

    d3eds

    Joined:
    Jul 17, 2022
    Posts:
    53
    are you trying to get them evenly spaced? And why do you want each letter as its own text component/object?
     
  5. literacy

    literacy

    Joined:
    Nov 14, 2021
    Posts:
    56
    1. are you trying to get them evenly spaced?

    I want the spacing of the letters to match what it would look like if it was a single text field. Just with normal spacing and kerning.

    2. And why do you want each letter as its own text component/object?

    I'm making a matching game, where you match graphemes to letters... it's to teach kids how to read. This way makes it simple to do the matching, and also to give very specific audio feedback when they get it wrong.
     
  6. literacy

    literacy

    Joined:
    Nov 14, 2021
    Posts:
    56
    After a lot of false starts, I think the Content Size Fitter is giving the correct results... but the issue is that due to each letter using its own GameObject, I am not using the built-in kerning values.

    Just need to find a way to pull those kerning values, and then use those values to offset the positioning of the subsequent letter!
     
  7. literacy

    literacy

    Joined:
    Nov 14, 2021
    Posts:
    56
    Hmm, I don't think this is kerning related.

    Based on the problem with the lowercase i here, if it was kerning related you'd expect there to be an "ei" kerning pair:

    aeiou.png

    But FontForge says that the lowercase e in this font only has 3 kerning pairs: et, ev and ey.

    I must have a fundamental misunderstanding somewhere, back to the drawing board...
     
  8. literacy

    literacy

    Joined:
    Nov 14, 2021
    Posts:
    56
    Ah sure enough, I had left the pivot point of each letter to the default... instead of adjusting it to (0,0). Fixed it and all the issues resolved right away!
     
  9. d3eds

    d3eds

    Joined:
    Jul 17, 2022
    Posts:
    53
    Also try centred rather than left or right justified, too. So that you can be sure the letters are in the middle of the area available to them.

    Are you using hit boxes (Physics2D Box2D Components) to detect which letter is "touched" when the player responds?

    If not, suggest doing it this way, as the UI and input systems of Unity aren't worth the faff of trying to use them as is.

    This way you can also draw sprites as backgrounds for each letter, and activate them as needed for further visual reinforcements.

    Also, one last thing, use the Animation Legacy Component to drive animations of scale, position and rotation of each letter, as these are highly optimised for this sort of thing. And, despite the "legacy" in the name, aren't going away in our lifetimes.

    And... Good job! Anything that helps with literacy is going to be a huge boon after the last few years of nonsense.
     
  10. literacy

    literacy

    Joined:
    Nov 14, 2021
    Posts:
    56
    1. Also try centred rather than left or right justified, too. So that you can be sure the letters are in the middle of the area available to them.

    Oh interesting point! Although as I look at the output from the code in Scene mode, every letter does appear to be perfectly centered even though it's left justified. Still, can't hurt to try it!

    2. Are you using hit boxes (Physics2D Box2D Components) to detect which letter is "touched" when the player responds? If not, suggest doing it this way, as the UI and input systems of Unity aren't worth the faff of trying to use them as is. This way you can also draw sprites as backgrounds for each letter, and activate them as needed for further visual reinforcements.

    That was the plan, but I couldn't figure out a technical issue and had to abandon the collision detection. If you have any ideas, would love to hear them here!

    https://forum.unity.com/threads/doi...uching-a-child-of-another-gameobject.1308801/

    3. Also, one last thing, use the Animation Legacy Component to drive animations of scale, position and rotation of each letter, as these are highly optimised for this sort of thing. And, despite the "legacy" in the name, aren't going away in our lifetimes.

    Great tip! I'm just using programmer art for now but once I add animation, I will keep this in mind!

    4. And... Good job! Anything that helps with literacy is going to be a huge boon after the last few years of nonsense.

    Thank you for the encouragement! I live in a developing country where a lot of education is in English, but reading comprehension rates are extremely low. I will release the core of the app for free, and hope that it makes a difference here and elsewhere!