Unity’s new GUI

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.

17 thoughts on “Unity’s new GUI

  1. With havin so much content do you ever run into
    any issues of plagorism or copyright infringement?
    My website has a lot of exclusive content I’ve either written myself or outsourced but it seems a lot
    of it is popping it up all over the internet without my agreement.

    Do you know any methods to help reduce content from being ripped
    off? I’d truly appreciate it.

    1. Hey, sorry to hear you are having that kind of experience. Is your content intended to be commercialized? I am guessing so, since you have outsourced some of it.

      I am not doing anything special to stop copyright infringement for my own materials. I haven’t noticed if anyone has plagiorized me or not – I haven’t even looked. Since all of my content is free, including the full source code, it may just be the case that there is little benefit to anyone trying or wanting to steal it anyway. I wish we could always rely on the honor system, but at the very least the honor system seems to be “more” followed for free content in my own experiences.

  2. I am аctualkly plеаsed to reaad this website
    posts hich carries lots of սseful information, thanks
    for providing theѕe kinds of information.

  3. Wonderful blog! Do you have any helpful hints for aspiring
    writers? I’m planning to start my own blog soon but I’m a little lost
    on everything. Would you propose starting with a free platform like WordPress or go for a paid option? There are so many
    choices out there that I’m totally overwhelmed ..
    Any recommendations? Bless you!

    1. I started with a free wordpress blog. It was nice because it was very easy to use and learn on – everything is already setup so you pretty much can simply start writing. If your blog becomes successful (by whatever definition that is to you), you can upgrade within the wordpress domain, or can always move to your own server and pay for wordpress to forward any existing traffic to the new host. I don’t think it matters too much how you start, because there are tons of options at every step of the way. Good luck!

  4. Pretty element of content. I simply stumbled upon your
    website and in accession capital to say that I acquire actually enjoyed account
    your blog posts. Any way I’ll be subscribing to your augment and even I fulfillment you get entry to consistently fast.

  5. We absolutely love your blog and find a lot of your post’s to
    be exactly I’m looking for. Do you offer guest writers to write content to suit
    your needs? I wouldn’t mind composing a post or elaborating
    on a number of the subjects you write about here.
    Again, awesome web log!

    1. I’m open to guest written content, assuming the content is non-offensive and that it is made available with an unrestricted license.

Leave a Reply

Your email address will not be published. Required fields are marked *