Class.ImageLabel 는 사각형을 렌더링하지만, Frame 처럼, 이미지 자산을 사용하여 표시할 수 있습니다. 이미지 표시는 Class.ImageLabel.ImageColor
고급 ImageLabel 사용에는 다음이 포함됩니다.
타일된 이미지를 생성하려면 ScaleType 를 Enum.ScaleType.Tile 로 설정한 다음 TileSize 로 렌더링된 타일의 크기로 설정합니다.
9-Slice 이미지를 생성하려면 ScaleType 를 Enum.ScaleType.Slice 로 설정한 다음 SliceCenter 에 9-Slice 이미지의 센터 영역을 설정하십시오.
스프라이트 시트는 ImageRectOffset 및 ImageRectSize를 사용하여 구현할 수 있습니다. 여러 개의 이미지를 하나로 묶고 이 속성을 사용하면 경험의 이미지 자산을 훨씬 더 빠르게 로드할 수 있습
요약
속성
UI 요소에 표시되는 이미지 콘텐츠.
렌더링된 이미지에 색상을 지정하는 방법을 결정합니다.
표시할 이미지의 하위 영역의 픽셀 오프셋.
표시할 이미지 하위 영역의 픽셀 크기를 결정합니다.
렌더링 이미지의 투명도를 결정합니다.
이미지가 Roblox에서 로드된 것을 나타냅니다.
레이블에 대한 이미지 재설정 모드를 선택합니다.
원본 이미지와 크기가 다른 UI 요소에 표시되는 이미지의 크기를 결정합니다.
9개 조각된 이미지의 슬라이스 경계를 설정합니다.
9개의 슬라이스 가장자리를 지정된 비율로 조정합니다.
이미지 레이블의 타일 크기를 설정합니다.
이 UI 요소가 입력을 싱크하는지 여부를 결정합니다.
절대 크기에 대해 GuiObject 의 원래 크기를 결정합니다.
자식 콘텐츠에 따라 크기 조정이 발생하는지 여부를 결정합니다.
Class.GuiObject 배경 색상을 결정합니다.
Class.GuiObject 배경과 경계의 투명도를 결정합니다.
Class.GuiObject 경계의 색을 결정합니다.
크기 축소에 따라 GuiObject 범위의 경계가 어떻게 설정되는지 결정합니다.
Class.GuiObject 범위의 픽셀 너비를 결정합니다.
부모 GUI 요소의 범위 내에서 내려지는 경우 GuiObjects 을 렌더링할지 여부를 결정합니다.
플레이어의 마우스가 GuiObject에 활성적으로 누르고 있는지 여부를 결정합니다.
Class.GuiButton 이 인터랙션 가능한지 여부를 결정하고, GuiState 의 GuiObject 가 변경되었는지 여부를 결정합니다.
Class.UIGridStyleLayout 와 함께 사용할 때 UIGridStyleLayout 의 정렬 순서를 제어합니다.
게임 패드 선택기가 내려지면 선택할 GuiObject 를 설정합니다.
왼쪽 게임 패드 선택기에 배치될 때 GuiObject 를 설정합니다.
오른쪽 게임 패드 선택기에 배치될 GuiObject 를 설정합니다.
게임 패드 선택기가 위로 이동할 때 선택할 GuiObject 설정합니다.
Class.GuiObject의 픽셀 및 스칼라 위치를 결정합니다.
Class.GuiObject가 회전하는 데 사용되는 도 수를 결정합니다.
게임 패드에서 GUI 를 선택할 수 있는지 여부를 결정하십시오.
게임 패드에 사용되는 기본 선택 장식을 재정의합니다.
게임 패드 선택에 의해 선택된 <Class.GuiObject|GuiObjects>의 순서입니다.
Class.GuiObject의 픽셀 및 스칼라 크기를 결정합니다.
Class.GuiObject.Size|Size 축을 설정하면 GuiObject의 부모 크기에 대해 기반을 둔다.
Class.GuiObject.BackgroundTransparency|BackgroundTransparency 및 TextTransparency의 혼합 속성.
Class.GuiObject 및 그 후손이 렌더링될지 여부를 결정합니다.
다른 요소와 비슷한 순서로 GuiObject 렌더링을 결정합니다.
UI 요소의 실제 화면 위치를 픽셀로 설명합니다.
UI 요소의 실제 화면 회전을 정도로 설명합니다.
UI 요소의 실제 화면 크기를 픽셀로 설명합니다.
설정을 사용하면 이 GuiBase2d와 그 후손에 대해 현지화가 적용됩니다.
이 GuiBase2d와 그 후손에 자동화 로컬화를 적용하기 위한 LocalizationTable 참조.
아래로 향하는 게임 패드 선택 동작을 사용자 정의합니다.
왼쪽 방향에서 게임 패드 선택 동작을 사용자 정의합니다.
오른쪽 방향으로 게임 패드 선택 동작을 사용자 정의합니다.
게임 패드 선택 동작을 위쪽으로 사용자 정의합니다.
게임 패드 선택 이동을 사용자 정의할 수 있습니다.
메서드
메서드가 GuiObject에서 상속되었습니다- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
새로운 Datatype.UDim2로 GUI를 부드럽게 이동합니다.
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
새로운 Datatype.UDim2로 GUI를 원활하게 조정합니다.
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : bool,callback : function):bool
새 크기와 위치로 GUI를 부드럽게 이동합니다.
이벤트
이벤트가 GuiObject에서 상속되었습니다사용자가 인간-컴퓨터 인터페이스 장치(마우스 버튼 다운, 터치 시작, 키보드 버튼 다운 등)를 통해 상호 작용하기 시작하면 발생합니다.
사용자가 인간-컴퓨터 인터페이스 장치(마우스 버튼 다운, 터치 시작, 키보드 버튼 다운 등)를 통해 상호 작용 방식을 변경할 때 발생합니다.
사용자가 인간-컴퓨터 인터페이스 장치(마우스 버튼 아래, 터치 시작, 키보드 버튼 아래 등)를 통해 상호 작용을 중지할 때 발생합니다.
사용자가 마우스를 GUI 요소에 이동하면 화면에 불이 붙습니다.
사용자가 GUI 요소를 떠나면 화면에 나타납니다.
사용자가 GUI 요소 내에 마우스를 이동할 때마다 발생합니다.
마우스가 GUI 요소 위에 있을 때 사용자가 마우스 휠을 돌리면 화면이 나타납니다.
마우스가 GUI 요소 위에 있을 때 사용자가 마우스 휠을 앞으로 스크롤할 때 발생합니다.
Gamepad 선택기로 집중되는 동안 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 : bool,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
게임 패드 선택이 이동하거나 떠나거나 연결된 GuiBase2d 또는 모든 하위 GuiObjects 내에서 변경되면 화면에 표시됩니다.
속성
Image
Image 속성은 데칼이나 이미지 업로드를 Roblox에 로드한 자산 ID를 포함하는 콘텐츠 유형 속성입니다. 이 속성은 Decal.Texture와 관련하여 이미지를 Roblox에서 로드하는 경
ImageColor3
이 속성은 이미지가 색상화되는 방법을 결정합니다. 백색으로 설정하면 색상화가 발생하지 않습니다. 이 속성은 이미지 자산을 재사용하는 데 매우 유용합니다. 원본 이미지가 투명하게 완전히 백색인 경우 이 속성으로 전체 이미지의 색상을 지정할 수 있습니다.
ImageContent
ImageRectSize
Class.ImageLabel.ImageRectOffset|ImageRectOffset 과 함께 이미지의 일부를 표시하도록 허용합니다. 이 속성은 표시할 이미지 영역의 픽셀 크기를 결정합니다. 모든 차원이 0 이면 전체 이미지가 표시됩니다.
ImageTransparency
ImageTransparency 는 UI 요소의 렌더링 이미지의 알파를 결정합니다. 값의 크기는 0 이며 투명도는 1 입니다.
코드 샘플
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
Class.ImageLabel.Image 속성은 RobloxImageLabel.Image 속성이 로드된 경우에만 나타납니다. 조정 대상의 이미지는 불러오다않습니다.
코드 샘플
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
ScaleType 속성은 소스 이미지의 크기와 사용자 요소의 크기 사이에서 ImageLabel.Image 뷰를 렌더링할 때 어떻게 표시되는지 결정합니다.
기본적으로 이 속성은 Enum.ScaleType.Stretch 로, 이미지 크기를 단순히 확장하여 사용자 요소의 공간에 정확히 맞춥니다. 투명 픽셀은 Roblox에 업로드할 때 블랙으로 설정되므로 투명한 이미지는 확장된 이미지 주위에 알파 블렌딩을 적용하여 검은색
For Enum.ScaleType.Slice , the SliceCenter 속성은 속성 창에 나타납니다. 이것은 9개 스ラ이스 UI의 경우입니다. 크기를 조정할 때 모서리는 원본 이미지 크기를 유지합니다. 이미지의 가장자리
마지막으로, Enum.ScaleType.Tile 속성은 TileSize 창에서 나타납니다. 이는 타일된 이미지의 경우, 각 타일의 크기는 Class.ImageLabel.TileSize|TileSize 속성에 의해 결정됩니다.
SliceCenter
Class.ImageLabel.ScaleType|ScaleType 이 속성은 9개의 슬라이스된 이미지의 슬라이스 경계를 설정합니다 ScaleType 이 설정된 경우 Enum.ScaleType.Slice 에 있는 경우에만 표시됩니다. 이 속성은 이 조건
9-Slice 이미지에 대해 자세히 알아보려면 UI 9 Slice Design 을 참조하십시오.
SliceScale
9개의 슬라이스 가장자리를 지정된 비율로 조정합니다. 즉, 9개의 슬라이스 주위에 있는 가장자리가 새로운 버전의 텍스처를 업스케일한 것과 같이 성장합니다. 기본값은 1.0입니다.
또한 ScaleType, SliceCenter, SliceScale 를 참조하십시오.
TileSize
TileSize 는 이미지 레이블의 타일 크기를 기본으로 설정합니다 ImageLabel . 타일은 이미지의 �
코드 샘플
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