Skip to main content

Preparing your screens

Imagine that all of your screens are placed on a 2D grid, like a Photoshop canvas. The adorner needs to know the position of each screen on this canvas, otherwise it doesn't know which part of the full image it should show. It can't calculate that itself because the screens can bend in any way in the 3D world. You need to tell the adorner where each screen is on that 2D canvas.

You can do that by adding an XOffset attribute to each screen. The XOffset attribute tells the adorner how many pixels from the left side of the canvas your screen is (the distance is counted from the left edge of the canvas to the left edge of your screen). By default, 1 stud in Roblox is 50 pixels.

You can add a YOffset attribute as well to tell the adorner the distance from the top of the canvas to the top of your screen, but most screens are not curved up or down, so we added a way to calculate it automatically. More on that later.

tip

Attributes are added by selecting an object in the Explorer and scrolling to the very bottom of the Properties window. You can learn more here

In the case of the adorner, you should add attributes to the GUI, not the part. The attributes should be of type number.

Example

For examples, we will be using the screens from this game: https://www.roblox.com/games/19002148628. You can edit this game in Studio by pressing the ... button above the play button and pressing Edit in Studio. It contains three screens in Workspace: Screen1, Screen2 and Screen3. It also has the adorner module added to ServerScriptService already.

Add the first screen

Let's add XOffsets to each screen one by one, starting from the left side. The first screen is... the first screen, it's at the very left side of our imaginary 2D canvas, so it doesn't have to be moved at all. Its XOffset attribute should be set to 0. To set the attribute, select the GUI of that screen, scroll down in the Properties window and press the + button next to Attributes. Set the name to XOffset and the type to number and press save. The attribute will be added to the Attributes section.

Add the remaining screens

info

Roblox uses studs as its unit of distance and size. You can easily measure the distance between two points by creating a part that stretches from point A to point B and checking its Size property (in the View -> Properties window).

All parts on Roblox are 3D, so the size property contains 3 numbers. Use common sense to figure out which one to use for the calculations below. If a part is very long then the biggest number probably represents its length.

The second screen is 13.5 studs away from the left edge of our canvas. Remember that the adorner uses pixels instead of studs and 1 stud = 50 pixels. That means that its XOffset is 13.5 × 50 or 675

note

In the images below we will be using yellow and black 1x1x1 stud blocks to show you the distance between screens. You can measure that distance by just using a single part, as explained in the info section above.

Following the same logic, the last screen is 29 studs away from the left edge (you should always count from the left edge of the canvas, not the previous screen). 29 studs × 50 pixels per stud is 1450 pixels, so the XOffset is 1450