How to make Screen Guis

12,580pages on
this wiki
Add New Page
Comments0 Share
This tutorial is intermediate.


Hello, Knexer here. I'm going to show you how to create some types of Screen Guis. In this article, I'll be giving you directions on how to create a button that you click to kill yourself, and image that's on the screen.

Screen Image

Warning! You may not see your image until you enter your game! Do not get angry because of this!

1. Create a decal of the image you want to appear on the screen.

2. Once that's done, insert a brick into your game. It doesn't matter what size , shape , etc. the brick is, just insert a brick . Paste the decal onto the brick , and copy the texture of the decal. Now delete the brick, you don't need it anymore.


4. Now, at the top of your screen, click "Insert " and then click "Object ..." then find "ScreenGui " on the menu, and insert it into your place.

5. Move the ScreenGui to the StarterGui folder in Explorer .

6. Click the Screen gui, and insert into that an "ImageLabel ," and insert into the ImageLabel a "Frame ."

7. It should look like this:
  • Tree-collapse
    • Tree-collapse
      • Frame

8. Next we want to click the "ImageLabel ."

9. Paste the texture of your Decal in the "Image " property.

Before I move on, I need to tell you that when editing the size and position, you do NOT need to edit the first zero in the X and Y properties.

10. Next, edit the size of your Image to your liking. Y is the height of the image, X is the width. 100x100 is about an inch square.

11. Next, edit the position of the image to your liking. (0,0) is the top left corner.


12. Go into your game and see if it worked, I positioned an example one in the

center of my screen to show you what it should look like when you're done.



1. Insert a "ScreenGui" into your game. Insert a "TextButton" into the ScreenGui, and finally, insert a Script into the TextButton. Move the ScreenGui into the StarterGui folder in explorer.

2. It should look like this:


3. Now, click the TextButton.

4. Under the BorderColor3 property, make the color a type of black.

5. Under the "Size" property, enter X as 0.100000001, 0.

6. Again under the size property, enter Y as 0.0299999993, 0.

7. Now under Text, enter whatever you want. I'll be showing you how to make a reset button.

8. Now under TextColor3, make it a type of black.

9. Now click the Script in the TextButton. Erase everything that's already there, and put this in its place:

function onButtonClicked()

10. This makes it a Reset button. Whenever you click it, it kills you.

11. As a final touch, edit the Position to your liking. If you put in {0, 500}, {0, -20}, it places it next to the menu items like this:




Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.