본문 바로가기
Portfolio/Unreal 4

[살인마 웅] 설정 UI와 마우스 감도

by CDCP 2023. 7. 17.

[기능 설명]

설정 UI

- 마우스 감도와 오디오 볼륨 값을 설정합니다. (오디오 내용은 다음 글로 이어서 다루겠습니다.)

- 슬라이더와 버튼으로 값을 변경할 수 있습니다.

- 텍스트 박스에 직접 숫자를 입력하여 값을 변경할 수 있습니다.

 

 

[기능 미리보기]

 

 

[알고리즘]

위젯 블루프린트를 생성합니다.

이름은 'widget_setting'으로 하겠습니다.

widget_setting

배치해야 할 위젯이 많으니 차근차근 설명하겠습니다.

따로 언급이 없는 모든 위젯은 전체화면을 앵커로 합니다.

 

Image로 뒷배경을 검은 화면으로 채워줍니다.

Image

RGBA 값을 0, 0, 0, 0.5로 설정합니다.

 

세부 위젯을 배치할 Canvas Panel을 꺼내줍니다.

계층구조와 같이 배치합니다.

- Image_background2 : 캔버스의 뒷배경입니다.

- CanvasPanel_Audio : 오디오 설정 위젯을 배치할 캔버스

- CanvasPanel_Control : 마우스 설정 위젯을 배치할 캔버스

- close_Button : 닫기 버튼, 앵커 우측 상단, 'Is Focusable' 비활성화

 

Image_background2

Image_background2의 RGBA 값입니다.

 

close_Button

close_Button은 마우스 오버 되었을 때, Hovered -Tint 값은 위와 같습니다.

Normal과 Pressed의 Tint - A 값은 0.0입니다.

 

CanvasPanel_Audio

CanvasPanel_Audio의 구성은 위와 같습니다.

 

Button_volumeDown

Button_volumeDown, Button_volumeUp의 경우 배경 컬러 값을 위와 같이 설정합니다.

Is Focusable을 비활성화합니다.

 

Slider_Audio

위와 같이 설정합니다.

Value 값은 바인딩을 생성해서 밑부분에서 다시 다루겠습니다.

 

Textbox_volume_value

위와 같이 설정합니다.

마찬가지로, text값은 바인딩을 생성합니다. 관련 내용은 밑에서 다루겠습니다.

 

오디오 설정 항목들을 복사, 붙여 넣기 하여 마우스 설정 메뉴로 만들어 줍니다.

 

 

Button_MouseControlDown

Button_MouseControlDown, Button_MouseControlUp의 경우 컬러 및 오파시티 값을 위와 같이 설정하여 버튼을 숨깁니다.

 

Slider_Control

Slider_Control의 경우 바인딩을 생성하되, Value 값들을 위와 같이 설정합니다.

 

Textbox_volume_value도 바인딩을 생성해 줍니다.

 

 

widget_setting - 그래프

그래프로 이동해 변수와 이벤트 디스패처를 생성합니다.

- setting UI open : Bool 변수, 기본값 False

- slider_control_prev : 플로트 변수, 기본 값 0.5

- slider_audio_prev : 플로트 변수, 기본값 0.5

- settingUI_Close : 이벤트 디스패처

 

게임 인스턴스 GI_Woong

게임 인스턴스에 'mouse_sensitivity', 'master_volume_value' 플로트 변수를 생성해 줍니다. 기본 값은 각 각 1.0, 0.5입니다.

 

FirstPersonCharacter 그래프

FirstPersonCharacter에서 'Player MouseSensitivity' 플로트 변수와 'MouseUpdate' 이벤트 디스패처를 생성합니다.

변수 기본 값은 0.01입니다.

 

다시 Widget_setting의 그래프로 돌아옵니다.

위에서 생성했던 바인딩 함수들을 다음과 같이 설정합니다.

Get_Slider_Audio_Value_0
Get_Textbox_volume_value_Text_0

이후 그래프에 함수를 배치하여, 슬라이더의 값에 맞게 텍스트 박스 값이 변경되고, 텍스트 값에 맞게 슬라이더 값이 변경되도록 설정할 것입니다.

 

Get_Slider_Control_Value_0
Get_Textbox_MouseControl_value_Text_0

마우스 관련 바인딩 함수로 위와 같이 배치합니다.

 

widget_setting - 이벤트그래프

위와 같이 설정합니다.

설정 UI 종료 시에 인트로 맵이라면, 마우스 커서를 None로 바꾸고 화면에서 숨깁니다.

 

 

widget_setting

마우스 감도 설정 함수입니다.

1. 슬라이더 값 변경

슬라이더 값이 변경되면, 유효한 값인지 체크하고 'slider_control_prev' 변수 값에 저장합니다.

설정 위젯을 닫고 다시 호출했을 때, 바인딩 함수에 의해 슬라이더 값이 유지됩니다.

 

snap to grid 함수를 이용해 소수점 셋째 자리가 넘는 값을 보정합니다.

마우스 감도가 0이 되는 것을 막기 위해 2.0을 먼저 곱해주고 0.02로 칸을 나눕니다.

 

계산된 값을 게임 인스턴스 변수에 저장하고, 형변환하여 FirstPersonCharacter의 Mouse Update Event를 호출합니다.

 

2. 텍스트박스 값 변경

텍스트박스 값이 변경되면, 플로트로 형변환 시켜 값이 유효범위 내에 존재하는지 검사합니다.

실제 마우스 감도 값 범위는 0.01 ~ 1.0을 사용하지만, 텍스트박스 표기 상으로는 1~100의 값을 사용하므로 100을 곱해 검사합니다.

유효한 값이면, 'slider_control_prev' 변수 값에 저장합니다.

 

snap to grid 함수를 이용해 소수점 셋째 자리가 넘는 값을 보정합니다.

계산된 값을 게임 인스턴스 변수에 저장하고, Mouse Update Event를 호출합니다.

 

 

실제 마우스 감도 적용을 위해 FirstPersonCharacter 클래스 블루프린트로 이동합니다.

FirstPersonCharacter 클래스 블루프린트

FirstPersonCharacter의 BeginPlay 이벤트에 위의 함수를 추가합니다.

레벨 입장 시, 게임 인스턴스의 마우스 감도 값을 불러와 저장합니다.

 

FirstPersonCharacter 클래스 블루프린트

마우스 입력 부문을 위와 같이 변경해 줍니다.

MouseUpdate_Event가 발생하면, 게임 인스턴스 변수 값을 불러와 Player Mouse Sensitivity 변수에 저장합니다.

마우스를 움직일 때, 입력 축 값과 Player Mouse Sensitivity 값을 곱산하여 기존보다 빠르게 혹은 느리게 화면을 이동할 수 있습니다.