UMG 5편 : 버튼 이벤트에 기능 텍스트 출력 기능 부여하기

 

곰곰히 생각해봤는데 이대로 끝내기엔 버튼 같지가 않으므로, 

버튼에 텍스트 출력 기능을 하나 넣어 볼게요.

 

1. 버튼에 이벤트 연결하기

지난 시간에 만들어 둔 버튼이 생성된 위젯 블루프린트를 열어줍니다. 

그리고 버튼을 선택 해 주세요.

 

버튼 이벤트를 생성해 보겠습니다.

디자이너 패널과 그래프 탭 모두에서 버튼 이벤트를 생성할 수 있습니다.

다만 반드시 '변수로 등록(Is Variable)'이 되어 있어야 하는데 그 작업 부터 해 주겠습니다.

 

2. Is Variable : 변수화하기

변수화는 별건 아니고 그래프에서 '활용 가능한 대상'으로 만드는 작업이라고 보시면 됩니다.

디테일 패널의 최상단에 위치한 Is Variable 을 체크하여 활성화합시다.

체크가 되어야 변수로 등록되고, 이벤트를 생성할 수 있게 됩니다.

 

저는 구분하기 쉽도록 ImageButton으로 이름도 바꿔 줬습니다. 

 

3. 이벤트 만들기

디테일 패널의 최하단으로 내려가면 보시다시피 이벤트 패널이 있습니다.

+ 버튼을 누르면 해당 이벤트가 생성됩니다.

그래프 패널에서도 마찬가지인데요.

Variables의 목록 중에서 아까 만든 ImageButton을 클릭하면

하단에 이벤트 목록이 죽 뜨는 것을 볼 수 있습니다. 

 

둘 중 어느 방식이라도 관계가 없으니 +를 전부 눌러 이벤트를 모두 생성해 줍시다.

각각의 이벤트는 'OOO 상황일 때'를 가리킵니다.

 

On Click : 버튼을 클릭했을 때.

On Pressed : 버튼을 눌렀을 때.

On Released : 버튼에서 뗐을 때.

On Hovered :  마우스가 올려졌을 때.

On UnHoverd : 호버 상태에서 해제 되었을 때.

 

이 상황(Event)를 꼭 기억해 주세요.

 

4. 문자열 출력 노드(Print String)

문자열 출력 노드(Print String)은 해당 메시지를 출력해주는 노드입니다.

각각의 입출력 구조를 살펴보면

 

첫 번째는 Execute 라고 해서 실행되는 순서를 만듭니다.

해당 이벤트가 시작되고 어떤 순서로 기능이 실행될지를 정하는 것이죠. 

이어 붙인 순서대로 동작합니다.

 

두 번째로 In String이라고 표시된 영역은 출력될 텍스트를 가리킵니다.

현재는 Hello 라고 씌여 있으면 Hello라고 출력됩니다.

 

그 외 영역은 일단 이번 포스팅에서 다루진 않겠습니다.

 

5. 이벤트와 연결하고 텍스트 작성하기.

이제부터 클릭, 눌림, 뗌,호버, 호버 해제 이벤트를 각각 지정해서 5개 상태의 메시지를 출력하겠습니다.

In String 아래의 메시지 란에 아래와 같이 입력해 주세요.

 

클릭(On Click) : '버튼을 클릭하셨습니다.'

눌림(On Pressed) : '버튼을 누르고 있는 상태입니다.'

뗌(On Released) : '버튼에서 손을 떼셨습니다.'

호버(On Hovered) :  '마우스 포인터가 버튼에 올려져 있습니다.'

호버 해제(On UnHoverd) : '마우스 포인터가 버튼에서 물러났습니다.' 

 

해당 이벤트에 맞게 메시지를 작성해 주세요.

 

1-4) 결과 보기

다 되셨으면 실행 버튼을 눌러 주세요. 출력 결과를 살펴봅시다.

 

맨 아래에 있는 메시지가 처음 실행된 것인데요.

그럼 순서상 호버 → 눌림 → 뗌 → 클릭 → 호버 해제 순서로 이벤트가 발생한 걸 확인하실 수 있습니다.

 

여기서 중요한 건  Click 이벤트는 Pressed와 Released 뒤에 나타난다는 것인데요.

이 셋이 서로 다르다는 점을 꼭 기억해주셨으면 좋겠습니다.

 

---

지난 시간에 말씀 드렸던 것처럼 다음 포스팅은 슬롯(Slot)이 되겠습니다.

많은 관심 부탁드립니다!