UDim2: Difference between revisions

From Legacy Roblox Wiki
Jump to navigationJump to search
>Legend26
m Text replacement - "</SyntaxHighlight>" to "</syntaxhighlight>"
 
(18 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{Map|Scripting|Data Types}}
{{CatUp|Data Types}}
{{CatUp|Data Types}}


A '''UDim2''' is a Data Type that uses 2 coordinates to place objects in the [[GUI system]].  
A {{type|UDim2}} is a Data Type that uses 2 coordinates to place objects in the [[GUI system]].  
===Makeup===
===Makeup===


<pre>UDim2.new(xScale, xOffset, yScale, yOffset)</pre>
<pre>UDim2.new(xScale, xOffset, yScale, yOffset)</pre>


A UDim2 is simply two [[UDim|UDims]] mashed together, for an X and Y.
A {{type|UDim2}} is simply two [[UDim|UDims]] mashed together, for two X values and two Y values. The first X and Y values are used for scale, and the second X and Y values are used for Offset.




===Use===
===Use===


UDim2 values are used only in [[GUI system]] objects. This allows you to place objects on the player's screen exactly where you want them to go. Also, because the UDim2 scales according to it's parent's size, you can set up a GUI that will scale to a different screen size.
{{type|UDim2}} values are used only in [[GUI system]] objects. This allows you to place objects on the player's screen exactly where you want them to go. Also, because the {{type|UDim2}} scales according to it's parent's size, you can set up a GUI that will scale to a different screen size by using a [[ScreenGui]] or a [[Frame]].


Here are a few code examples of objects placed using UDim2 locations. Remember that "zero" is the top left corner.
Here are a few code examples of objects placed using {{type|UDim2}} locations. Remember that "zero" is the top left corner of a GUI object.


<pre>
<syntaxhighlight lang="lua">
–A 50×50 frame 5 pixels from the top, 10 pixels from the left mainFrame.Position = UDim2.new(0.0, 10, 0.0, 5)
–-A 50×50 frame 5 pixels from the top, 10 pixels from the left mainFrame.Position = UDim2.new(0.0, 10, 0.0, 5)
mainFrame.Size = UDim2.new(0.0, 50, 0.0, 50)
mainFrame.Size = UDim2.new(0.0, 50, 0.0, 50)


–A frame that is half the size of the main screen, in the center
–-A frame that is half the size of the main screen, in the center
mainFrame.Position = UDim2.new(0.25, 0, 0.25, 0)
mainFrame.Position = UDim2.new(0.25, 0, 0.25, 0)
mainFrame.Size = UDim2.new(0.5, 0, 0.5, 0)
mainFrame.Size = UDim2.new(0.5, 0, 0.5, 0)


–A 50×50 frame in the top right corner
-–A 50×50 frame in the top right corner
mainFrame.Position = UDim2.new(1.0, -50, 0.0, 0)
mainFrame.Position = UDim2.new(1.0, -50, 0.0, 0)
mainFrame.Size = UDim2.new(0, 50, 0, 50)
mainFrame.Size = UDim2.new(0, 50, 0, 50)


–A frame that is 1/4 the size of the screen,
-–A frame that is 1/4 the size of the screen, in the bottom right corner
–in the bottom right corner
–(For position I took the corner’s position (1.0) – the
– size (0.25) to get the position (0.75))
mainFrame.Position = UDim2.new(0.75, 0, 0.75, 0)
mainFrame.Position = UDim2.new(0.75, 0, 0.75, 0)
mainFrame.Size = UDim2.new(0.25, 0, 0.25, 0)  
mainFrame.Size = UDim2.new(0.25, 0, 0.25, 0)  
</pre>


==[[Constructors]]==
--Combinations of Scale and Offset are acceptable too: A GUI that takes up half the screen and 10 more UDim2s
mainFrame.Size = UDim2.new(0.5, 10, 0.5, 10)
</syntaxhighlight>


{|border="1" cellspacing="5"  style=" -webkit-border-radius: 4px; -moz-border-radius: 4px; height: 100%; background-color: #FFFFFF; border-top: dashed 2px #ff0000; border-left: dashed 2px #ff0000; border-bottom: dashed 2px #aa0000; border-right: dashed 2px #aa0000; margin: 6px; margin-right: 10px; margin-left: 10px; clear: none; padding: 2px;"
==Constructors==
 
{| class="wikitable"
! Constructor !! Description
! Constructor !! Description
|-
|-
| UDim2.new('''XScale''', '''XOffset''', '''YScale''', '''YOffset''') || Creates a new UDim2
| UDim2.new('''XScale''', '''XOffset''', '''YScale''', '''YOffset''') || Creates a new {{type|UDim2}}
|}
|}


Line 46: Line 48:
All of these properties are read only. You can't set them by doing UDim.x = 5 and must instead create a new UDim with the properties you want.
All of these properties are read only. You can't set them by doing UDim.x = 5 and must instead create a new UDim with the properties you want.


{|border="1" cellspacing="5"  style=" -webkit-border-radius: 4px; -moz-border-radius: 4px; height: 100%; background-color: #FFFFFF; border-top: dashed 2px #ff0000; border-left: dashed 2px #ff0000; border-bottom: dashed 2px #aa0000; border-right: dashed 2px #aa0000; margin: 6px; margin-right: 10px; margin-left: 10px; clear: none; padding: 2px;"
{| class="wikitable"
! Property !! Type !! Description
! Property !! Type !! Description
|-
|-
| ''UDim2''.'''X''' || [[UDim]] || The x dimension scale and offset
| ''UDim2''.'''X''' || {{type|UDim}} || The x dimension scale and offset
|-
|-
| ''UDim2''.'''Y''' || [[UDim]] || The y dimension scale and offset
| ''UDim2''.'''Y''' || {{type|UDim}} || The y dimension scale and offset
|}
|}


== Operators ==
== Operators ==
{|border="1" cellspacing="5"  style=" -webkit-border-radius: 4px; -moz-border-radius: 4px; height: 100%; background-color: #FFFFFF; border-top: dashed 2px #ff0000; border-left: dashed 2px #ff0000; border-bottom: dashed 2px #aa0000; border-right: dashed 2px #aa0000; margin: 6px; margin-right: 10px; margin-left: 10px; clear: none; padding: 2px;"
{| class="wikitable"
! Operation !! Description
! Operation !! Description
|-
|-
| ''UDim2'' + ''UDim2'' || returns UDim2 with each component added individually  
| {{type|UDim2}} + {{type|UDim2}} || returns UDim2 with each component added individually  
|}
|}


== See Also ==
== See also ==
[[Category:Data Types]]
*[[UDim]]
 
[[Category:Data types]]

Latest revision as of 04:47, 27 April 2023

A UDim2 is a Data Type that uses 2 coordinates to place objects in the GUI system.

Makeup

UDim2.new(xScale, xOffset, yScale, yOffset)

A UDim2 is simply two UDims mashed together, for two X values and two Y values. The first X and Y values are used for scale, and the second X and Y values are used for Offset.


Use

UDim2 values are used only in GUI system objects. This allows you to place objects on the player's screen exactly where you want them to go. Also, because the UDim2 scales according to it's parent's size, you can set up a GUI that will scale to a different screen size by using a ScreenGui or a Frame.

Here are a few code examples of objects placed using UDim2 locations. Remember that "zero" is the top left corner of a GUI object.

-A 50×50 frame 5 pixels from the top, 10 pixels from the left mainFrame.Position = UDim2.new(0.0, 10, 0.0, 5)
mainFrame.Size = UDim2.new(0.0, 50, 0.0, 50)

-A frame that is half the size of the main screen, in the center
mainFrame.Position = UDim2.new(0.25, 0, 0.25, 0)
mainFrame.Size = UDim2.new(0.5, 0, 0.5, 0)

-A 50×50 frame in the top right corner
mainFrame.Position = UDim2.new(1.0, -50, 0.0, 0)
mainFrame.Size = UDim2.new(0, 50, 0, 50)

-A frame that is 1/4 the size of the screen, in the bottom right corner
mainFrame.Position = UDim2.new(0.75, 0, 0.75, 0)
mainFrame.Size = UDim2.new(0.25, 0, 0.25, 0) 

--Combinations of Scale and Offset are acceptable too: A GUI that takes up half the screen and 10 more UDim2s
mainFrame.Size = UDim2.new(0.5, 10, 0.5, 10)

Constructors

Constructor Description
UDim2.new(XScale, XOffset, YScale, YOffset) Creates a new UDim2

Properties

All of these properties are read only. You can't set them by doing UDim.x = 5 and must instead create a new UDim with the properties you want.

Property Type Description
UDim2.X UDim The x dimension scale and offset
UDim2.Y UDim The y dimension scale and offset

Operators

Operation Description
UDim2 + UDim2 returns UDim2 with each component added individually

See also