버튼 만들기

목차

 

이전 튜토리얼에서 스코어 바 GUI 만들기를 하였다. 이번 포스팅에서는 스크린에 실제 작동하는 버튼을 만들겠다. 버튼은 메뉴에서도 쓰일 수 있고, 스킬 버튼이라든지 GUI에서 다용도로 쓰인다.

참고로 이 튜토리얼에 사용하는 맵은 Gold Rush라는 로블록스에서 제공하는 리소스이다. 링크를 타고 들어가서 편집을 통해 로블록스 스튜디오로 불러 들여서 사용하자.

버튼 타입

버튼 오브젝트는 두가지 타입의 버튼 객체가 있다. 텍스트 기반 버튼과 이미지 기반의 버튼.

• TextButton : 텍스트 버튼은 텍스트 라벨와 비슷하다. 다만, 텍스트 버튼은 클릭이 가능해서 버튼의 역할을 한다는 점이 다르다
• ImageButton : 이미지 버튼도 이미지 라벨과 비슷하고 많은 속성을 공유한다.

버튼 만들기

이 포스팅에서는 이미지버튼의 사용방법에 대해 보여준다. 이미지 버튼을 클릭하거나 마우스가 버튼위에 있을때, (이를 호버링상태 - hovering - 라고 함) 이미지 버튼의 이미지가 변하는 모습을 살펴보겠다.

우선 이미지라벨이나 텍스트라벨과 마찬가지로 ScreenGui 객체를 먼저 추가하고 그 곳에 버튼을 추가한다.

ImageButton을 추가하면 비어있는 이미지버튼이 편집창 맨 왼쪽상단에 위치하는 것을 볼 수 있다.

 

추가한 이미지버튼은 MapButton으로 이름을 바꾸자.

이미지버튼 사이즈 변경

이전 이미지라벨에 대한 포스팅에서 이미지 라벨에 대한 사이즈를 변경할 때와 마찬가지로 이미지 버튼의 사이즈 역시 스케일과 오프셋을 사용한다. Size 속성의 화살표를 클릭하고,

X, Y에 대한 스케일과 오프셋을 정해준다. 여기서는 스케일 0.15배와 오프셋 0을 선택한다.

SizeConstraint는 RelativeYY로 변경한다. 스크린의 세로사이즈에 대해 이미지버튼의 사이즈 스케일을 연동시킨다.

스케일 제한

SizeConstraint 속성을 RelativeYY로 정하면 버튼이 속한 스크린의 세로 길이에 대해서 이미지 버튼의 사이즈가 스케일에 맞춰서 정해지게 된다. 이 경우, 큰 스크린, PC 모니터와 같은 큰 사이즈의 스크린일 경우 예상보다 매우 큰 버튼으로 보일 수 있다. 이럴때 UISizeConstraint로 제한을 걸어 두자.

이미지 버튼에 UISizeConstraint 를 추가하고

UISizeConstraint의 속성에서 MaxSize를 찾아서 (90, 90)으로 변경하자. 커질 수 있는 최대 픽셀을 90픽셀로 제한을 걸어 놓는 것이다.

위치 정하기

이미지 버튼의 위치 역시 이미지 라벨과 비슷하게 설정 가능하다. 먼저 AnchorPoint를 설정하고 Position을 설정하자.

AnchorPoint를 (0.5, 1)로 변경하자. 이러면 이미지버튼의 가로-가운데, 세로-맨아래 가 위치를 정하는 기준이 된다.

 

Position 속성의 트리를 열어서 X, Y 두 속성을 바꾼다. X는 (1, -150), Y는 (1, -20) 로 변경한다. 그러면 모바일 화면으로 봤을때, 점프 버튼 옆부분에 놓이게 된다.

이미지버튼의 이미지

이미지 버튼은 세가지의 이미지가 필요하다. 평상시의 이미지, 마우스가 버튼위에 올라 갔을때의 이미지, 클릭했을 때의 이미지. 이렇게 하나의 이미지 버튼에 3가지의 이미지가 필요하게 된다. 물론 하나를 그대로 써도 상관은 없지만, 눌러도 반응이 없는 버튼이 되기 때문에 테스용 이외에는 추천하지 않는다.

• Image속성 : 평상시의 이미지
• HoverImage 속성 : 호버링 상태의 이미지
• PressedImage 속성 : 버튼을 눌렀을때의 이미지

 Image 속성을 rbxassetid://6025368017 으로 변경한다.

 

HoverImage 속성을 rbxassetid://6025452347 으로 변경한다.

 

PressedImage 속성을 rbxassetid://6025454897 으로 변경한다.

스타일링 바꾸기

스타일링은 이미지라벨과 마찬가지로 여러가지 이미지버튼의 겉모습을 바꿀 수 있다.

BackgroundTransparency 속성을 1 로 변경하여 배경을 투명하게 바꾼다.

Rotation 속성을 -5 로 변경하여 약간 기울기를 변경한다.

버튼 작동하게 스크립트 추가하기

마지막으로 버튼을 클릭했을때, 동작하게 만들 스크립트를 추가한다. MapButton에 LocalScript를 추가한다.

LocalScript 안에 내용은 지우고 아래의 코드로 변경하자.

local button = script.Parent
 
local function onButtonActivated()
    print("Button activated!")
end
 
button.Activated:Connect(onButtonActivated)

이 간단한 스크립트로 이미지 버튼은 Button activated! 라는 문장을 아웃풋 윈도우에 출력한다.

script.Parent로 이미지 버튼 객체에 접근하고, 이미지 버튼의 Activated 이벤트에 onButtonActivated() 함수를 연결하여 클릭 이벤트에 print() 함수가 호출되도록 하였다.

 

버튼에는 여러 이벤트가 있으니 버튼 Document를 확인하고 알맞는 이벤트를 찾아서 사용할 수 있다. 여기서는 Activated 이벤트를 사용한다. 버튼 클릭에 대한 디폴트 이벤트로 PC에서의 클릭, 모바일/타블릿에서의 터치에 대해 같은 이벤트를 발생한다.

 

여기서 처음으로 LocalScript를 사용하였다. 로컬 스크립트는 클라이언트측에서만 동작하는 스크립이다. 보통 GUI 요소들, 카메라, 애니메이션 관리 등에 사용된다. 

 

다음 글

2021.04.28 - [로블록스 개발 중급] - 근접하면 나오는 GUI - Proximity Prompts