PcoWSkbVqDnWTu_dm2ix
Creating a Score Bar
Part 2 - Images and Text
Creating a Score Bar
Part 2 - Images and Text

Adding an Image

Images inside a GUI are typically ImageLabel objects, basic 2D images which can be resized as needed.

  1. Insert an ImageLabel into the ScoreBarFrame object and select it.
  1. To place this tutorial’s crown image into the label, locate its Image property and paste in rbxassetid://5673786644.

    Image = rbxassetid://5673786644

  1. Expand the image object’s Size tree and set the following property values:

    Size → X = 1.25, 0, Size → Y = 1, 0

  1. As you can see, these scaling values stretch the image beyond the full width of the frame. To make sure that only the height is considered, change the image’s SizeConstraint to RelativeYY.

    SizeConstraint = RelativeYY

  1. Elements in a UIListLayout are ordered by their LayoutOrder. Change this property to 1 since the image should be the first element inside the frame. You won’t see any change since the image is the only element, but it’s a good idea to set the layout order now.

    LayoutOrder = 1

  2. Finally, change the image’s background from white to fully transparent by setting BackgroundTransparency to 1.

    BackgroundTransparency = 1

Inserting Text

GUI text is often rendered through a TextLabel object which lets you choose a font, color, alignment, and more.

  1. Insert a TextLabel into the ScoreBarFrame object and select it.
  1. Change its LayoutOrder property to 2. Because the associated UIListLayout is set to horizontal, this will place the label to the right of the image.

    LayoutOrder = 2

  1. Resize the label by setting the following property values:

    Size → X = 1, 0, Size → Y = 1, 0, SizeConstraint = RelativeYY

  1. Style the text by setting its font, color, and scaling.

    Font = GothamBold, Text = 0, TextColor3 = 255, 200, 100, TextSize = 30

  1. Change TextXAlignment to Left so that the score text stays left-aligned near the crown image regardless of whether the player’s score is 0, 1000, or 1000000.

    TextXAlignment = Left

  2. Finally, make the label’s background fully transparent by setting BackgroundTransparency to 1.

    BackgroundTransparency = 1


This covers the basics of GUI objects — you now have a basic score bar that adapts to both large and small screens.


Previous Page Getting Started