Wednesday, August 12, 2015

Those damn carets!! Unity's Input Field Caret Position issues and how to fix it.

Ahhh the joys of struggling with something for a few hours, and then all of a sudden finding a very simple solution for it.

From version 4.6, Unity added a new set of UI elements you can use to easily make user interfaces for your games. Now, I've only really been using Unity since version 5, so I don't know most of the struggles a lot of you guys out there know.

In Delta Quadrant we used nGUI, because when development for that started there wasn't UI yet...

Anyway, with Catch a Falling Star, the task for the menu system has fallen on my shoulders, and I'm glad it did. I've learned a huge amount by building the menu and settings screens for the game. And, as with learning anything new, it included some hairs going grey or being pulled out out of frustration.

Today, for example, those damn carets drove me crazy! One of the UI elements I am using in the game is the Input Field. This is basically a text box allowing the player to type in something. Like any decent text box, it should have a caret as well - you know, that blinking thing showing you where you're going to be typing the next letter. As I'm writing this, it's here as well, and it's a handy thing for sure - I would be sad to not have it in my life.

Except, for some reason, the Unity UI Input Field's caret is NOT AT THE RIGHT POSITION!! And it drove me semi-insane today! I mean, just look at this:


I tried everything just to move that damn caret up - I did figure it out in the end, thank goodness, but hell, why does it do that Unity people??

It turns out that it has to do with the position of the pivot of the Text component. Here's the default values:



It turns out the pivot determines where the caret will be placed. Changing the Y value to 1.5 instead of 0.5 actually puts the pivot outside the text box, but that doesn't really matter in this case. It does, however, fix this extremely annoying bug :)


Now, isn't that a beautiful site to behold? I hope this little trick can save you some of the headaches I experienced. You might have to tweak your values slightly, but this helped me a great deal!

3 comments:

  1. Well thanks for that. Strangely enough, for me the magic number was Y=-1! I can't understand why this wasn't implemented to be correct right out of the box. After all, it's the first thing you notice when you run it. I had considered directly manipulating the "InputField Input Caret" object programmatically at run time, but this way is much better.

    ReplyDelete
    Replies
    1. Ahhh glad it helped! Yes I wish they'd just fix it so we don't have to resort to stuff like this hehe...

      Delete
  2. Got the same problem. I slove this for me, change front to defult.

    ReplyDelete