버튼은 사용자가 작업을 수행할 수 있게 해주는 GuiObjects입니다. 버튼은 시각적 외관을 변경하거나 사용자가 버튼을 클릭할 때 스크립팅 가능한 소리 피드백을 제공하는 등 다양한 방식으로 사용자에게 맥락과 피드백을 제공하도록 사용자화할 수 있습니다.
화면 위나 경험 내에 배치할 수 있는 두 가지 유형의 버튼이 있습니다:
TextButton은 클릭/탭 시 Activated 이벤트를 발생시키는 텍스트가 있는 사각형입니다.
ImageButton은 클릭/탭 시 Activated 이벤트를 발생시키는 이미지가 있는 사각형입니다. 사용자가 마우스를 올리거나 누를 때 이미지를 교체하기 위한 추가 상태가 있습니다.
화면에 버튼 만들기
화면의 버튼은 사용자를 다양한 메뉴나 페이지로 신속하게 안내하는 데 유용합니다.
화면에 버튼을 추가하려면:
Explorer 창에서 StarterGui를 선택하고 ScreenGui를 추가합니다.
StarterGui 위에 마우스를 올리고 ⊕ 버튼을 클릭합니다. 문맥 메뉴가 표시됩니다.
ScreenGui를 삽입합니다.
새 ScreenGui를 선택하고 버튼을 추가합니다.
ScreenGui 위에 마우스를 올리고 ⊕ 버튼을 클릭합니다. 문맥 메뉴가 표시됩니다.
TextButton 또는 ImageButton을 삽입합니다.
부분 얼굴에 버튼 만들기
부분에 버튼을 추가하는 것은 사용자가 부분과 상호작용할 수 있게 해줍니다. 예를 들어, 사용자가 버튼 위에 서서 작업을 완료하도록 할 수 있습니다.
부분의 면에 버튼을 추가하려면:
Explorer 창에서 part를 선택하고 SurfaceGui를 추가합니다.
part 위에 마우스를 올리고 ⊕ 버튼을 클릭합니다. 문맥 메뉴가 표시됩니다.
SurfaceGui를 삽입합니다.
새 SurfaceGui를 선택하고 버튼이나 입력을 추가합니다.
SurfaceGui 위에 마우스를 올리고 ⊕ 버튼을 클릭합니다. 문맥 메뉴가 표시됩니다.
TextButton 또는 ImageButton 중 하나를 삽입합니다.
버튼이 보이지 않으면 SurfaceGui의 Face 속성에서 다른 면을 선택해 보세요.
이미지 버튼의 외관 변경
사용자가 ImageButton과 상호작용할 때 외관을 변경하는 것은 유용한 시각적 피드백을 제공합니다. 예를 들어, 사용자가 ImageButton 위에 마우스를 올리면 외관이 변경되어 사용자가 버튼이 비활성화되지 않았으며 클릭할 수 있음을 알 수 있습니다.
ImageButton에는 외관을 변경하는 세 가지 속성이 있습니다:
Image - 사용자가 ImageButton과 상호작용하지 않을 때 표시되는 이미지입니다.
HoverImage - 사용자가 ImageButton 위에 커서를 올릴 때 표시되는 이미지입니다.
PressedImage - 사용자가 ImageButton을 클릭할 때 표시되는 이미지입니다.
사용자 입력으로 ImageButton의 외관을 변경하려면:
Explorer 창에서 ImageButton 객체를 클릭합니다.
Properties 창에서 Image, HoverImage, 및 PressedImage 속성에 각각 세 가지 다른 자산 ID를 할당합니다.
버튼 스크립트
사용자가 버튼을 눌렀을 때 작업을 스크립트로 연결하려면 버튼을 GuiButton.Activated 이벤트에 연결합니다. 예를 들어, 다음 LocalScript를 버튼에 부모로 설정하면 사용자가 클릭할 때마다 버튼의 색상이 무작위로 변경됩니다.
local button = script.Parent
local RNG = Random.new()
local function onButtonActivated()
-- 버튼 색상 무작위화
button.BackgroundColor3 = Color3.fromHSV(RNG:NextNumber(), 1, 1)
end
button.Activated:Connect(onButtonActivated)