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 you 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. It contains three screens in Workspace: Screen1, Screen2 and Screen3. It also has the adorner module added to ServerScriptService already. You can edit that game by pressing the ... button on the game page.

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

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

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 * 50 is 1450, so the XOffset is 1450