UE4 UI 클릭, 클릭 후 행동 변경

추가한 이미지들을 변수화 시켜서 화면에서 클릭이 가능하도록 만들어 볼 것이다.

이벤트그래프

1. 시작은 당연히 IdelMode여야 할 것이며, Menu 버튼을 누르면 켜준다.

2. 마우스를 다루는것은 Player Controller안에 있으며, 마우스 클릭 또 한 활성화 시켜준다.

3. 게임과 UI에 모든 포커스를 준다는 의미를 가지고있는 Game And UI에 연결해준다.

4. 끝나게되면 반대로, UI숨겨주고, 다시 게임모드로 바꿔줘야한다.

 

1. 코드를 작성하기 위해 그래프로 들어간다.

2. 변수 Textrues를 배열로 받는다

3. 지금까지 제작한 무기 or 하고 싶은 무기 행동을 위해 배열을 나누고 적용 시켜준다.

 

Construct = 생성자랑 역할이 똑같다. 그림을 그려 줄 때는 나타냄

Pre Construct = 생성자가 호출되기 전, 그려지기 전을 나타냄

 

1. 이미지를 담아 놓은 Grid를 가져와서 Children으로 담고있는 자식들을 다 호출시킨다.

2. 자료형을 내가 만들어 놓은 버튼을 사용하기 위해 버튼으로 형변환 해준다.

3. 아이콘을 변경하기 위한 Style로 구조체를 나타낸다. 핀 분활해준다.

4. Texture를 변경할 것이기 때문에, 알맞게 3가지에 연결시켜준다.

 

UI에서 버튼을 클릭하면 색이 바뀌면서 구조가 아래로 하나씩 내려오는 방법으로 터널링 형식으로 진행된다, 그리고 더 이상에 클릭을 막아주기 위해서는 핸들링을 사용한다. 다 처리하나서 다시 올라가야하는 방법이 버블링이다.

 

 

1. 이제 이미지 버튼을 눌러서 이벤트가 발생해야한다.

2. 캐릭터를 불러서 형변환을 해준다. Enemy는 절대 아니기 때문

3. Object Name으로 이름을 확인해준다.

4. 이벤트 호출하고, 전부 동일하게 진행

 

On Clicked = 눌렀다 땠을때

On Pressed = 클릭했을시

On Released = 땟을때

On Hovered = 마우스가 올라갔을때

On Unhovered = 마우스가 나갔을때

 

OnHovered

1. 속해있는 재료들 다 가져와서 for문을 돌려준다.

2. 커스텀이벤트를 추가해서 break용으로 만들어서 뒤에 콜해서 사용해주면 엄청 편하다.

3. Object Name이 같다면 필요한 버튼으로 캐스팅을 성공시킨다.

4. 배경화면인 Select를 가져와 Brush Color로 곱해서 색을 설정해준다.

5. 하나를 처리했으니, break 이벤트를 호출해서 끝내준다.

OnUnhovered

1. 위와 동일하게 만들어주고, Color 색만 변경해준다.

 

1. 마우스를 올리면 이제 빨강색으로 바뀌고, 때면 하얀색으로 변경된다.

2. 이제 클릭이 되면 내가 원하는 행동으로 바뀌도록 구현해 볼 것이다.

 

OnClicked 앞 부분

OnClicked 뒷 부분

1. Player 형변환까지는 동일하게 진행

2. 클릭이 되었다면, 플레이어까지 전달시켜줘야한다. UI를 전달해줘야 한다. 또 한 실행 해줄 객체가 플레이어 뿐이라 Get Player Character로 가져올 수 있다.

3. Replace를 사용하여 문자열을 찾아서 변경시켜준다. From안에 Action_ 을 넣어주면 내가 정해준 동작을 읽어주고, To안에 비워주면, 문자열을 바꿔주는 것이기 때문에 문자열은 사라져버리고, 뒤에 숫자만 남게된다.

4. WeaponComponent를 가져와서 알맞은 Index에 따라 Mode로 Switch를 돌려준다.

 

 

이제 UI는 끝이나고 다음에 AI를 다뤄볼 것이다.

 

 

https://www.youtube.com/watch?v=OQP1FUpownw 

 

- 편한 작업이였다.