Hi and welcome 😊 So, you want your characters to be renamed
by the player? Get a number of things to buy in the shop or generally need some
kind of input field to get values from? Let’s have a look at the Text
Mesh Pro Input field today. We are not going to need a lot of code, since
many features are already build straight into it 😊 This is what we are going to
create: a simple input field that grabs the player’s input and stores
it somewhere to use at a later time. We will also have a look at how we can
customize the input field to fit our game better, like with custom colors
or a limit of characters we can enter. So, this is my basic scene.
I have a simple background and a reason to have my player enter her name. When she did, her entry will get adknowledged
by a popup, repeating her entry back at her. Let’s start at creating the input field. You’ll
find it under UI→ Input Field (Text Mesh Pro). I’ll resize it so it fits its purpose
- that works like any other UI element. The input field component looks like
a strange mashup of a button component and a Text Mesh Pro component combined,
but it comes with quite a few features especially geared towards it being an input field. When we look into the hierarchy, we can see the
field comes with two text Mesh Pro child elements, as well: Placeholder and text. I highly
recommend keeping the placeholder one, as it makes it clear the player is
supposed to enter text into this field. Depending on your visuals, that might not
always be super apparent to the players. Let’s style those in a way we want our input
field to look, but no need to change anything in here directly. Instead, we can just change the
Font Asset and size in the input field component. Now, let’s start with the most important feature:
grabbing the player’s input. Create a new script. I call mine “InputFieldGrabber”. Let’s give it a
string we can see in the inspector and a public method called “GrabFromInputField”
with a string as it’s parameter. In it, we’ll just hand the given string
value to our value above to see if it worked. Back in the Editor, attach the script to the Input
field. Anywhere else is fine, too, but attaching it here makes checking our progress easier. If you
scroll down the input field component, you’ll see four Unity Events: On Value Changed, On End Edit,
On Select and On Deselect. Each of them get called when the described action is performed and as we
can see, each of those hands out a string value. On Value changed is being called whenever
something is entered, but the important one for us is On End Edit, as this will be
called as soon as our player hits enter. Create a new coupling here and drag and drop
our recently created Grabber-component into this field. You can now navigate to the script
in the drop down and pick the Grabbing-method we wrote just a moment ago. Make sure to pick the one
listed under “dynamic” above, or this won’t work. So, let us see if this works already. I start
the game, enter a name and hit enter. As soon as I did, my input is being displayed in
the correct value of our Grabber script 😊 What happens when the player hits escape? Well, nothing, since we canceled the input. Our
placeholder text will be displayed again. Alright, basics done, let’s have a look at the
options available to us - because honestly, I don’t think there are many names out
there containing numbers or special characters and more than 32 characters, are there. The first thing you might want to set up is the
character limit the player can enter. You’ll find it right below the Point size. Set it to something
reasonable, because it’s always a bummer if I want to enter my name into an input field providing
too few characters to fit my name into. Please. Next up is the Content Type. If you only
allow characters from the alphabet, Name is what you’re looking for. It does contain spaces
and hypens, though. Pin, integer and decimal are all only for numbers. In those cases, you need
to add the specific parser to your code to get the value you're looking for. Alphanumerical
and Password allow for alphanumerical entries. Plus, Pin and Password change the
visible output to stars by default 😊 Related to this is this checkbox down
here called “Rich text”. By default, it’s toggled on, but this means your players will
be able to enter rich text tags into this box. For example, if I write pointy bracket → b →
pointy bracket, the entry disappears but whatever else I write will be written in bold. Toggle
it off to remove this option for the player. On Focus Select All is a quality of live
feature which will make filling out forms and input fields easier, Restore
on Escape key sets the field back to whatever value it had been filled with
before as soon as your player hits Escape. Lastly, some neat customization options are
the caret and selection color - the caret is the blinking thing at the end of your input. You
can customize its with and blinking rate as well 😊 Apropos blinking. To make your input field
a bit more eye-catchy, you can animate your placeholder text. Navigate to the placeholder
Gameobject and open the Animation Window under Window→Animation→Animation. Click the
central button and save your animation to wherever you can find it. I call mine
BlickingPlaceholderInputField. Click on the red recording button. In your TMP component,
right click on Vertex Color → Add Key. This way, a first basic keyframe will be created with your
currently selected color. Copy it with Control+C. On the timeline, navigate to roughly 0.45 seconds
and set your color to something a bit lighter. Jump to 1.5 seconds and hit control+v. This way
your color change will loop correctly. Once done, toggle the record button again. Your text will
now blink, grabbing the attention of your player. Lastly, if you want your input workflow
to be a two-step process. you can create a button and refer to the grabber
Script by using a new Event. Add a new method to the script and call
it something like “HandOverEnteredValue”. How you want to hand it to other parts
of the script is for you to decide 😊 Hope you enjoyed the tutorial! If you did, please
like and subscribe 😃 Did you know the input field was straightforward like this? Anything I missed
or you would like to know on top? Let me know! Have a great week!
