I’ve been experimenting with the UI tools Unity just released in version 4.6.  I am very happy so far, so for this post, I am going to use it to create the interface for our Text based RPG game.

Our Interface will consist of an input text field, where the user can type commands like “Attack Ogre” or “Hide”, a button which accepts the input, and a scrollable text area where the user can see a history of the commands he has entered as well as events occurring in the game such as “Spider hit Wolf for 10 damage”.

1. Create a new scene.
2. From the menu bar, choose “GameObject-> UI-> Panel”.  Unity will automatically create a Canvas and EventSystem and parent the Panel to the Canvas for us and everything should already be configured as we want.
3. Name the panel object “Root Panel” so it will be easy to refer to later.
4. We won’t be needing an Image component on the Root Panel, I’ll just use the camera’s background color, so feel free to remove it.
5. Make sure the Root Panel is selected and then from the menu bar, choose “Component-> Layout-> Vertical Layout Group” to add that component to the object.  This will be used to separate the input section from the output section in a nice looking and organized way.  Configure the new component by setting each of the values of Padding to 20 (Left, Right, Top and Bottom) as well as 20 on the Spacing.  Finally uncheck the “Height” toggle next to “Child Force Expand”.
6. Create two more Panel’s like you did in step 2, and parent them to the root panel.  I called the first panel (which appears at the top) the “Output Panel” and the second panel the “Input Panel”.  We won’t need the Image components on these either, so remove them.
7. Add the component “Horizontal Layout Group” to the “Output Panel”.  This will be used to layout a Scrollable Text Field and the Scroll Bar.  Disable the toggle for “Width” next to “Child Force Expand” but leave “Height” enabled.
8. Create another panel.  I named this object “Text Area” and parented it to the Output panel.  This time do not remove the Image component.
9. Make sure the Text Area is selected and then from the menu bar, choose “Component-> UI-> Mask” to add that component to the object.  Without this component, the text we will add soon would be able to render beyond the borders of the container.  The mask requires the Image component to work and is why we did not remove it.
10. Add the component “Layout Element” to the Text Area and enable the “Flexible Width” with a value of 1.
11. From the menu bar, choose “GameObject-> UI-> Text”.  Parent this object to the Text Area.
12. On the Rect Transform for the Text object, set the min anchor and pivot fields to 0.  Set a max X anchor of 1 and a max Y anchor of 0.  Then set all of the Pos fields to 0 as well.  Finally set the Right to 0 so that the width is the same width as the parent panel.
13. On the Text component, I added a bunch of junk text, and I set the Alignment to Left and Top, and made the Font size pretty big at 80, but mostly so I could see the effects of the scrolling more quickly.  Later I will reduce the font size and remove the starting text.
14. Add the component “Content Size Fitter” to the Text object.  Set the “Vertical Fit” to “Preferred Size”.  This will automatically resize the Rect Transform’s height based on the amount of text and newlines, etc. so that the Scroll Rect we are about to configure will know how much room it has to move.
15. From the menu bar, choose “GameObject-> UI-> Scrollbar”.  Parent this object to the Output Panel.
16. Set the “Direction” of the Scrollbar to “Bottom To Top”.
17. Add the component “Layout Element” to the Scrollbar and enable the “Min Width” toggle with a value of 20.
18. Add the component “Scroll Rect” to the “Text Area” panel and assign its child Text object as the “Content”, and the sibling object “Scrollbar” as the “Vertical Scrollbar”.
19. If you set everything up correctly so far, and added enough lines of junk text that the Text content is taller than the scroll rects area, you could press play now and see that scrolling the scroll bar works and the text can be scrolled exactly from the top to the bottom without us needing to program a single line of code.  Before you continue, make sure to exit play mode or your changes will be lost.
20. Add the component “Horizontal Layout Group” to the Input Panel.  This will handle the layout of the Input Field and Enter button.  Set a value of 20 for the “Spacing” and uncheck “Width” and “Height” for “Child Force Expand”.
21. From the menu bar, choose “GameObject-> UI-> InputField”.  Parent it to the “Input Panel”.
22. Add the component “Layout Element” to the Input Field and set a value of 160 for “Min Width”, a value of 30 for “Min Height” and “Preferred Height”, and a value of 1 for “Flexible Width”.
23. From the menu bar, choose “GameObject-> UI-> Button”.  Parent the button to the “Input Panel”.
24. I named my button the “Enter Button”.  And specified the button’s label to have the text, “Enter”.
25. Add the component “Layout Element” to the Enter Button and set a value of 160 for “Min Width”, a value of 30 for “Min Height” and “Preferred Height”.

We’re almost complete, but in order to finish giving functionality to the Enter Button we will need to add a script.  I created new script called “GameViewController.cs”.  Which I added to the Canvas object at the root of the hierarchy.  The contents of the script are below:

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class GameViewController : MonoBehaviour
{
	public InputField input;
	public Text output;

	public void OnEnterButtonPressed ()
	{
		output.text = string.Format("{0}\n{1}", output.text, input.text);
		input.text = "";
	}
}

Connect the “InputField”child object on the “Input Panel”  to the “input” property of the script.  Connect the “Text” child object on the “Text Area” panel in the “Output Panel” hierarchy to the “output” property of the script.

Select the “Enter Button” and then click the “+” button at the bottom of its “On Click ()” event handler list.  Drag the Canvas object containing the “GameViewController” script into the Object field, and then choose the “GameViewController-> OnEnterButtonPressed” method.

Everything is now configured.  Press play and type some text into the InputField, then press the Enter button.  The input field will revert to the placeholder text and the text you entered will appear inside the scrollable text area.