ImageLabel 는 이미지 자산을 사용하여 사각형을 렌더링하고, Frame 와 같이 작동합니다.이미지의 표시는 ImageColor3 및 ImageTransparency 속성을 통해 조작할 수 있습니다.이미지만 표시하고 직사각형을 숨기려면 GuiObject.BackgroundTransparency 를 1 로 설정합니다.
고급 ImageLabel 사용에는 다음이 포함됩니다:
타일화된 이미지는 ScaleType 를 Enum.ScaleType.Tile 로, 그런 다음 렌더링된 타일의 크기로 TileSize 설정하여 생성할 수 있습니다.
9-슬라이스 이미지는 9-슬라이스 이미지의 중앙 영역에 ScaleType를 설정하고, 그런 다음 Enum.ScaleType.Slice에서 중앙 영역으로 SliceCenter로 이동하여 생성할 수 있습니다.
스프라이트 시트는 ImageRectOffset 및 ImageRectSize를 사용하여 구현할 수 있습니다.여러 이미지를 하나로 패키징하고 이 속성을 사용하면 사용자 인터페이스에 많은 작은 아이콘을 사용하는 경우 경험의 이미지 자산이 훨씬 빠르게 로드될 수 있습니다.
요약
속성
UI 요소에 의해 표시되는 이미지 콘텐츠. 읽고 쓰기 ImageContent .
렌더링된 이미지가 색상화되는 방법을 결정합니다.
UI 요소에 표시되는 이미지 콘텐츠. 자산 URI 및 EditableImage를 지원합니다.
표시될 이미지의 하위 영역의 픽셀 오프셋.
표시할 이미지의 하위 영역의 픽셀 크기를 결정합니다.
렌더링된 이미지의 투명도를 결정합니다.
이미지가 Roblox에서 로드가 완료되었는지 여부를 나타냅니다.
레이블에 대한 이미지 재샘플링 모드를 선택합니다.
소스 이미지와 크기가 다른 UI 요소에 표시되는 경우 이미지의 크기를 조정하는 방법을 결정합니다.
9개의 조각으로 나뉜 이미지의 조각 경계를 설정합니다.
지정된 비율로 9개의 가장자리를 확장합니다.
ImageLabel의 타일링 크기를 설정합니다.
이 UI 요소가 입력을 받아들이는지 여부를 결정합니다.
상대적인 크기에 따라 GuiObject 의 원점을 결정하고 절대 크기에 따라 결정합니다.
자식 콘텐츠에 따라 크기 조정이 발생하는지 여부를 결정합니다.
배경색 GuiObject을 결정합니다.
배경과 경계의 투명도를 GuiObject 결정합니다.
GuiObject 경계의 색상을 결정합니다.
GuiObject 경계가 해당 차원에 대해 어떻게 배치되는지 결정합니다.
GuiObject 경계의 픽셀 너비를 결정합니다.
부모 GUI 요소의 범위 외부에서 후손 요소 GuiObjects 가 렌더링되어야 하는지 여부를 결정합니다.
플레이어의 마우스가 GuiObject 활성적으로 누르고 있는지 여부를 결정합니다.
GuiButton 와 상호작용할 수 있는지 또는 GuiState 의 GuiObject 가 변경되는지 여부를 결정합니다.
GuiObject를 사용하여 정렬 순서를 제어하며 UIGridStyleLayout와 함께 사용됩니다.
게임패드 선택기가 아래로 이동되면 선택될 GuiObject 를 설정합니다.
게임패드 선택기가 왼쪽으로 이동되면 선택될 GuiObject 를 설정합니다.
게임패드 선택기가 오른쪽으로 이동되면 선택될 GuiObject 를 설정합니다.
게임패드 선택기가 위쪽으로 이동되면 선택될 GuiObject 를 설정합니다.
GuiObject의 픽셀 및 스칼라 위치를 결정합니다.
GuiObject가 회전된 정도의 수를 결정합니다.
게임패드에서 선택할 수 있는 GuiObject 여부를 결정합니다.
게임패드에 사용되는 기본 선택 장식을 재정의합니다.
게임패드 UI 선택에 의해 선택된 GuiObjects의 순서.
GuiObject의 픽셀 및 스칼라 크기를 결정합니다.
BackgroundTransparency 와 TextTransparency 의 혼합 속성.
GuiObject 및 그 하위 요소가 렌더링될지 여부를 결정합니다.
다른 사람들에 비해 GuiObject가 렌더링되는 순서를 결정합니다.
픽셀로 표시되는 실제 화면 위치의 GuiBase2d 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소 요소
GuiBase2d 요소의 실제 화면 회전을 도 단위로 설명합니다.
픽셀로 표시되는 실제 화면 크기의 GuiBase2d 요소를 설명합니다.
true 로 설정되면 지역화가 이 GuiBase2d 및 그 하위에 적용됩니다.
이 GuiBase2d 및 그 하위에 자동화된 로캘리제이션을 적용하기 위해 사용할 LocalizationTable 참조.
아래쪽 방향으로 게임패드 선택 행동을 사용자 지정합니다.
왼쪽 방향에서 게임패드 선택 동작을 사용자 지정합니다.
오른쪽 방향으로 게임패드 선택 행동을 사용자 지정합니다.
위쪽으로 게임패드 선택 행동을 사용자 지정합니다.
게임패드 선택 이동을 사용자 지정할 수 있습니다.
메서드
메서드가 GuiObject에서 상속되었습니다- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
매끄럽게 GUI를 새로운 UDim2로 이동합니다.
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
GUI를 새 크기와 위치로 부드럽게 이동합니다.
이벤트
이벤트가 GuiObject에서 상속되었습니다사용자가 인간-컴퓨터 인터페이스 장치(마우스 버튼 아래로, 터치 시작, 키보드 버튼 아래로 등)를 통해 상호 작용을 시작할 때 발생합니다.
사용자가 인간-컴퓨터 인터페이스 장치(마우스 버튼 아래로, 터치 시작, 키보드 버튼 아래로 등)를 통해 상호 작용하는 방식을 변경할 때 발생합니다.
사용자가 인간-컴퓨터 인터페이스 장치(마우스 버튼 아래로, 터치 시작, 키보드 버튼 아래로 등)를 통해 상호 작용을 중지할 때 발생합니다.
사용자가 GUI 요소로 마우스를 이동할 때 발생합니다.
사용자가 GUI 요소에서 마우스를 이동할 때 발생합니다.
사용자가 GUI 요소 내에서 마우스를 이동할 때마다 발생합니다.
사용자가 GUI 요소 위에 마우스를 스크롤할 때 마우스 휠을 뒤로 스크롤하면 발생합니다.
사용자가 GUI 요소 위에 마우스를 스크롤할 때 마우스 휠을 앞으로 스크롤하면 발생합니다.
게임패드 선택기로 GuiObject가 포커스되는 경우 발생합니다.
게임패드 선택기가 GuiObject에 대한 초점을 멈추면 발생합니다.
플레이어가 UI 요소를 길게 누르기 시작하면 발생하고, 계속되고, 중지됩니다.
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
플레이어가 UI 요소에 손가락을 이동할 때 발생합니다.
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
UI 요소에서 두 손가락을 사용하여 핀치 또는 당기기 제스처를 수행할 때 발생합니다.
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
UI 요소에서 두 손가락을 사용하여 회전 제스처를 수행할 때 발생합니다.
플레이어가 UI 요소에 스와이프 제스처를 수행할 때 발생합니다.
플레이어가 UI 요소에 탭 제스처를 수행할 때 발생합니다.
- SelectionChanged(amISelected : boolean,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
연결된 게임패드 선택이 이동하거나, 나가거나, 변경되면 발생합니다. GuiBase2d 또는 모든 하위 요소에서 GuiObjects 입니다.
속성
Image
이 속성은 Roblox에 업로드된 데칼이나 이미지의 자산 ID를 보유해야 하는 콘텐츠 유형 속성입니다.Roblox에서 이미지를 로드하는 것과 관련하여 Decal.Texture와 동일하게 기능합니다.렌더링된 이미지는 ImageColor3 및 ImageTransparency을 사용하여 수정할 수 있습니다.
ImageColor3
이 속성은 이미지가 색상화되는 방법을 결정합니다.하얀색으로 설정하면 색상화가 발생하지 않습니다.이 속성은 이미지 자산을 재사용하는 데 매우 유용합니다; 원본 이미지가 투명도로 완전히 흰색이면 이 속성으로 이미지의 전체 색상을 한 번에 설정할 수 있습니다.
ImageContent
이 속성은 자산 URI 또는 EditableImage에 대한 참조를 보유해야 합니다.
자산 URI는 Roblox에 업로드된 데칼이나 이미지를 참조할 수 있습니다. 이미지 로드와 관련하여 Decal.Texture와 동일하게 작동합니다.
렌더링된 이미지는 ImageButton.ImageColor3를 사용하여 색상화됩니다.ImageButton.ScaleType 속성을 조정하여 이미지를 타일링, 크기를 조정하거나 9개로 슬라이스하여 렌더링할 수 있습니다.
ImageRectSize
ImageRectOffset와 함께 이미지의 부분 표시를 허용합니다.이 속성은 표시될 이미지 영역의 픽셀 크기를 결정합니다.두 차원 중 하나가 0로 설정되면 전체 이미지가 표시됩니다.
ImageTransparency
이 속성은 UI 요소의 렌더링된 이미지의 알파를 결정합니다.값 0 은 완전히 불투명하고 값 1 은 완전히 투명합니다(투명하지 않음).
코드 샘플
This code sample oscillates the ImageTransparency of an ImageLabel/ImageButton from 0 to 1 using a sine wave.
local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
-- Oscillate ImageTransparency from 0 to 1 using a sine wave
imageLabel.ImageTransparency = math.sin(workspace.DistributedGameTime * math.pi) * 0.5 + 0.5
end
RunService.RenderStepped:Connect(onRenderStep)IsLoaded
이 속성은 ImageLabel.Image 속성이 Roblox에서 로드를 완료했는지 여부를 나타냅니다. 조정으로 거부된 이미지는 결코 불러오다않습니다.
코드 샘플
This code sample measures how long an ImageLabel or ImageButton takes to load an image. If the image was already loaded, this will be 0.
local imageLabel = script.Parent
local startTime = workspace.DistributedGameTime
-- Wait for the image to load
while not imageLabel.IsLoaded do
task.wait()
end
-- Measure and display how long it took to load
local deltaTime = workspace.DistributedGameTime - startTime
print(("Image loaded in %.3f seconds"):format(deltaTime))ResampleMode
크기가 조정될 때 이미지가 어떻게 보이는지 결정합니다.기본적으로 이미지는 텍스처 메모리에서 크기가 더 작거나 더 큰 화면에 표시될 때 텍스처링을 부드럽게 처리합니다.Enum.ResamplerMode.Pixelated로 설정되면 이미지는 픽셀의 날카로운 가장자리를 유지합니다.
ScaleType
이 속성은 UI 요소의 절대 크기가 원본 이미지의 크기와 다른 경우 ImageLabel.Image가 렌더링되는 방식을 결정합니다.
기본적으로 이 속성은 Enum.ScaleType.Stretch 로, 이미지 크기를 늘리거나 압축하여 UI 요소의 공간에 정확히 맞출 수 있습니다.투명한 픽셀은 Roblox에 업로드할 때 검은색으로 설정되므로 투명한 이미지는 확장된 이미지 주위에 검은색 테두리를 피하기 위해 알파 블렌딩을 적용해야 합니다.
For Enum.ScaleType.Slice , the SliceCenter 속성이 속성 창에 표시됩니다.이는 9개 조각 UI에 대한 것으로, 확장할 때 모서리는 원본 이미지 크기로 유지됩니다.이미지의 가장자리가 이미지의 너비/높이로 확장됩니다.마지막으로, 이미지의 중앙이 확장되어 이미지의 중앙 영역을 채울 것입니다.
마지막으로, Enum.ScaleType.Tile에 대해 TileSize 속성이 속성 창에 공개됩니다.이는 타일화된 이미지에 적용되며, 각 이미지 타일의 크기는 TileSize 속성에 의해 결정됩니다.
SliceCenter
이 속성은 ScaleType 가 Enum.ScaleType.Slice 로 설정되었을 때 9개의 이미지 조각의 경계를 설정합니다.이 속성은 이 조건에서 속성 창에만 표시되므로 주의하십시오.
9-슬라이스 이미지에 대해 자세히 알아보려면 UI 9 슬라이스 디자인을 참조하십시오.
SliceScale
지정된 비율로 9개의 가장자리를 확장합니다.즉, 9개의 조각 주변의 가장자리가 업스케일된 새 버전의 텍스처를 업로드한 것처럼 성장할 것입니다.기본값은 1.0 입니다.
또한 참조하십시오 ScaleType , SliceCenter , 및 SliceScale .
TileSize
이 속성은 기본값으로 ImageLabel 의 타일링 크기를
코드 샘플
This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.
local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size =
UDim2.new(0, 100 + math.cos(theta * 2 * math.pi) * 50, 0, 100 + math.sin(theta * 2 * math.pi) * 50)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end