Scripting Book/Chapter 13

From Legacy Roblox Wiki
Revision as of 01:56, 28 March 2012 by >JulienDethurens
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

Introduction

In this chapter we are going to learn how to make a GUI, using a script.

You will need

  • Studio
    • Explorer Pane
    • Properties Pane

An understanding of how GUIs work. This chapter won't teach you how they work, only how to make them using a script.

Steps

Step 1: The Script

First, we need to insert a script. Go to insert -> object -> script.

Step 2: The ScreenGui

Our next step is to create the ScreenGui in StarterGui. So, we need to use the Instance Table (Instance.new)

sg = Instance.new("ScreenGui", game.StarterGui);

Step 3: Frames

We have a choice of things to add. If we want it to be a fully functional GUI, we're going to have to use a frame. If it's just going to be a couple of buttons, who needs a frame? Unless you want to make it look fancy.

I want to make my GUI look fancy. To do this we're going to pull a frame out of the Instance table.

fr = Instance.new("Frame", sg);

I'm going to position the frame in the centre of the screen and give it a size.

fr.Size     = UDim2.new(0, 200, 0, 60);
fr.Position = UDim2.new(0.5, -200, 0.5, -60);

You may have noticed that I used "UDim2" and you may not know what that means. Well, you should have learned about Vector3. It's kind of like that, only it can't be called Vector3 because GUIs are 2D and do not have a Z axis. But if it's called UDim2, why does it have four arguments? The answer to that is as followed. The first argument is Scale X, this can be used as a compatibility practice because each person's screen is of a different size (Resolution) 0 would take up 0 pixels, 1 would use up the whole screen. So 0.5 would use half the user's screen. The next is offset X, the value of this determines how many pixels to use (value 1 would be one pixel, 2 would be 2 pixels and so on). The same goes with Scale Y and Offset Y, only on the Y axis.

Step 4: Properties

I will complete this another time