1. The space forums use a separate registration system from the main virtual world. To comment on these forums, you need to create a separate forum account.
    Dismiss Notice
  2. Hey there, we have two Skype groups for space early users - if you're creating content, or need help, feel free to join in either the the beginners or advanced users groups.
    Dismiss Notice

Creating UI

Discussion in 'HOWTOs' started by Mike (CNDG), Apr 21, 2017.

Share This Page

Tags:
  1. Mike (CNDG)

    By:Mike (CNDG)Apr 21, 2017
    New Member

    Joined:
    Apr 2, 2017
    Messages:
    15
    Likes Received:
    16
    Hi folks,

    Thought I would write a brief How-To for creating HUD user interfaces after spending a day discovering an experimenting with the UI features of Space.

    So, in this little guide, we're going to create a simple panel on the bottom right of the screen with two buttons, one with text, another with an image icon, and a label (text) that changes depending on what you click.

    Step 1 - Creating a Canvas and an Image

    A UI canvas is a layer on the screen which allows for UI components to be rendered on it. To do this, we right click on the Hierarchy pane, create an empty object (just to store our UI stuff -- though isn't necessary), and inside that empty object that I've called UI Stuff, add a UI Canvas.

    Nothing will be visible at this stage, but next we're going to add an Image which will act as a UI panel for us to put our controls on, so go ahead and add a UI Image to the Canvas component.

    [​IMG]

    If you swich to Game view, you will now see the image component being rendered in the middle of the screen:

    [​IMG]

    Now it's time to manipulate the position and size of the image in the Inspector pane. As the panel is intended for the bottom right of the screen, I've adjusted the anchor of the component accordingly, and set the size to 300 x 150.

    [​IMG]
     
    Last edited: Sep 11, 2017
    Adam likes this.
  2. Mike (CNDG)

    By:Mike (CNDG)Apr 21, 2017
    New Member

    Joined:
    Apr 2, 2017
    Messages:
    15
    Likes Received:
    16
    (Continued)

    Now, we can change the Position properties of the image panel so it fits nice and snug in the bottom right, above the Space UI.

    [​IMG]

    which looks like this in the preview:

    [​IMG]

    Step 2 - Adding Buttons and a Text Label

    Following the same process as we did to add the image control, now we can add 2 buttons to the panel which will serve as our inputs.

    So go ahead and add the first button:

    [​IMG]

    and then position it on the panel by manipulating its position in the Inspector, then repeat the process so that you eventually have two buttons that looks like this:

    [​IMG]

    and finally for this stage, we also need the text label control so that we can have the UI do something when the buttons are clicked, so go ahead and do that too.

    [​IMG]

    Step 3 - Setting Button Text and Image Buttons

    Now, 2 buttons with 'Button' as the text on them is hardly helpful, so to adjust the text of a button is very easy. You expand the button in the hierarchy editor, and it will have a Text control as it's child.

    [​IMG]

    Selecting this, and then changing the text property in the Inspector allows you to change the text

    But, what if we want an image instead of text? Also very easily done, however you need to turn that image into a sprite.

    So let's say we want to use this image for the button face:

    [​IMG]

    We'd first need to import it as an asset into our project. This will import it as a Texture, which wont work, so to convert it to a Sprite, we first click on the flag.png texture in the Project Pane, and then in the inspector, we tell Unity that it's infact to be treated as a Sprite in the drop-down:

    [​IMG]
     
    Last edited: Sep 11, 2017
    Adam and Lex4art like this.
  3. Mike (CNDG)

    By:Mike (CNDG)Apr 21, 2017
    New Member

    Joined:
    Apr 2, 2017
    Messages:
    15
    Likes Received:
    16
    (Continued)

    And now that we have our Sprite ready, it's time to replace the Text control of the second button into an Image control. To do this, all we do is right click the second button in the Hierarchy editor, and add a UI Image which will make a white square immediately appear as it's placeholder:

    [​IMG]

    And now we've added that we can delete the Text control inside Button 2 as it's no longer needed.

    Next, we need to set the image control's Source Image and make sure Raycast Target is unticked so the image doesn't steal the mouse when it hovers over the button. With the default sprite settings, you'll also need to resize the Image Control to match the size of the image you're using.

    You'll then see something like this:

    [​IMG]

    Step 4 - Scripting the UI Panel

    To make things a bit easier, I've gone ahead and renamed the Image panel 'MyUI'.

    Next, we need to add a Scripting Runtime to MyUI which will be responsible for handling the events of the buttons.

    Another feature that Scripting Runtime has is to enable you to create Object Reference Slots - so go ahead and do this, creating a reference for the 2 buttons and the text label so you're left with something like this:

    [​IMG]

    Then, drop the following code into the Script Contents:

    Code:
    -- Get References --
    local textButton = Space.Host.GetReference("textButton");
    local imageButton = Space.Host.GetReference("imageButton");
    local textLabel = Space.Host.GetReference("textLabel");
    
    -- Event Handlers --
    function onTextButton()
        textLabel.UIText.Text = "Text Button Clicked!";
    end
    
    function onImageButton()
        textLabel.UIText.Text = "Image Button Clicked!";
    end
    
    So, now our UI panel is scripted and ready to receive events, it's time for the last part...
     
    Last edited: Sep 11, 2017
    Adam and Lex4art like this.
  4. Mike (CNDG)

    By:Mike (CNDG)Apr 21, 2017
    New Member

    Joined:
    Apr 2, 2017
    Messages:
    15
    Likes Received:
    16
    (Continued)

    Step 5 - Hooking the Button Events

    Now that everything is done with the UI panel, including it's script for handling events, we need to let that script know when the buttons have been clicked.

    To do this, click on a button, and in the Inspector under the Button (Script), you'll see at the bottom a panel captioned 'On Click ()'.

    This is where we hook up the event to the script.

    First, you add a new event handler, so click on the [+] to be presented with the properties of the event. We want to send this event to the UI panel, so select 'MyUI' on the object selection. Then, as we want to call a script function, click 'No Function', and select ScriptingRuntime -> CallScriptFunction.

    Then in the text box, we tell it what function we want to call, so in the case of the text button we want it to be 'onTextButton', and 'onImageButton' for the second button.

    So go ahead and set these for both buttons so that the component looks like this:

    [​IMG]

    Step 6 - Testing

    So now that we're all done, click Play and try out the buttons. If everything went to plan then as you click each button, the text on the panel will change accordingly!

    [​IMG]


    Hope you find this useful!
     
    Last edited: Sep 11, 2017
  5. James Stallings

    By:James StallingsNov 22, 2017
    Member

    Joined:
    Sep 28, 2016
    Messages:
    58
    Likes Received:
    10
    This is a great writeup Mike, but it really, really belongs on the wiki.
    EDIT:
    REALLY great writeup. Don't mind me if I use it as the basis (with due credit of course!) in a wiki piece a little later ;)
     
    Last edited: Nov 22, 2017