Unreal Engine 5 배워보기 - 14일차

컴퓨터 및 게임 관련 전공인이 아닌 문외한 일반인이 언리얼 엔진을 배우면서 정리한 내용입니다.

그날그날 배웠던 내용을 제가 나중에 보기 위해 정리한 것으로, 지금 당장 보기에 부족한 점이 아주아주 많고 추후에 수정이 될 수도 있습니다.

오탈자 및 잘못 기재된 내용 지적, 부족한 내용 설명은 언제든지 환영입니다.

 

본글은 언리얼 엔진 5.5.4 버전 영문판을 기준으로 합니다.

 

----------------------------------------------------------------------------------------------------------------

 

14일차 학습 내용

- Widget

   Box

     Check Box

     Spin Box

     Combo Box

   Text Box

   Progress Bar

   Parents & Child

   3D Widget

   Loading Bar

   CCTV

   Grid

     Uniform Grid Pannel

     Vertical / Horizontal Box

- Postprocess

   Infinite Extend (Unbound)

   Bloom

   Chromatic Aberration

   Dirt Mask

   Lenz Flare

   Image Effect (Vignette)

   Color Grading Temperature

   Color Grading MISC

   Film

   Exposure

   Postprocess Material

 

 

Widget

Box

Box의 종류는 'Check Box' , 'Spin Box' , 'Combo Box' 이렇게 총 3가지가 있다.

Check Box

"Check Box" 는 단어 그대로 체크 여부로 설정해주는 것이다.

"Checked State" 는 "Check Box" 의 기본 체크 상태를 설정해주는 것이다.

'Checked' 로 돼있으면 기본으로 체크된 상태로 설정된다.

"Check Box" 의 크기는 "Transform" 탭의 "Scale" 에서 가능하다.

Spin Box

"Spin Box" 는 Slider와 비슷하게 가운데 막대를 잡아당겨 수치를 설정해주는 Box이다.

"Content" 의 "Value" 에서 기본 값 설정 및 최소, 최댓값 설정이 가능하다.

"Backgroudn Brush" 는 마우스 올리기 전 "Spin Box" 의 배경 색상이고, "Hovered Background Brush" 는 마우스 올렸을 때의 배경 색상이고, "Active Fill Brush" 는 마우스 올렸을 때 바를 움직여 적용된 수치만큼 활성화된 곳의 색상이다.

위의 색상대로 적용하면 아래와 같이 출력된다.

Combo Box

"Combo Box" 는 클릭 시 아래에 선택 목록이 나오는 Box이다.

아래에 나올 선택 목록은 "Default Option" 에서 설정 가능하다.

새로운 버튼과 텍스트 박스를 생성한 뒤, "Hierachy" 에서 텍스트 박스를 버튼 위로 올려 버튼에 종속되게 만들어준다.

버튼을 선택하고 우측의 "On Clicked" 를 누르면, 해당 버튼을 눌렀을 때 실행시킬 BP를 작성할 수 있다.

BP를 위와 같이 작성해주면, 'Update' 버튼을 눌렀을 때 Check Box의 체크 표시 여부, Spin Box에 적용된 수치, Combo Box에서 선택한 것을 표시하도록 해주는 것이다.

게임을 실행한 뒤 'Update' 를 눌러주면 아래 사진과 같이 수치가 나타나게 된다.

* "To Text (Float)" 노드의 'Maximum Fractional Digits" 에서 표시할 소숫점 자릿수를 설정해줄 수 있음

Text Box

"Text Box" 는 "Commons" 에 있는 "Text Block" 과는 다르다.

"Text Box" 는 게임 플레이 시 플레이어가 직접 타이핑해서 입력이나 수정을 할 수 있고, "Text Block" 은 플레이어가 수정할 수 없는 것이다.

"Editable Text Box" 는 enter를 누르면 텍스트 입력창이 종료되고, "Multi-Line Editable Text Box" 는 enter를 누르면 줄 추가가 가능하다.

Progress Bar

"Progress Bar" 는 진척도나 잔여량을 표현해주는 막대로, 주로 플레이어의 체력을 표시할 때 사용한다.

"Progress" 의 "Bar Fill Type" 은 수치가 높아질수록 채워지는 방식을 어떻게 할 지 정할 수 있다.

위 사진과 같이 "Left to Right" 는 수치가 높아질수록 막대가 오른쪽으로 채워지는 방식이다.

"Progress Bar" 를 이용하여 대미지를 입으면 HP가 줄어드는 Widget을 제작해보도록 하겠다.

우선은 플레이어에게 대미지를 입힐 공간을 만들어야한다.

"Place Actor" 의 "Volume" 을 보면 "Pain Causing Volume" 이 있는데, 해당 액터는 지속적으로 대미지를 입히는 공간 생성해주는 것이다.

"details" 의 "Damage Per Sec" 에서는 초당 들어오는 대미지의 수치를 정해줄 수 있고, "Pain Interval" 은 "DPS" 수치 자체는 유지하면서 대미지가 들어오는 간격을 변경 시켜줄 수 있다.

"Pain Causing Volume" 의 크기는 "details" 의 "Brush Settings" 에서 x, y, z축 별로 정해줄 수 있다.

다음으로 플레이어에게 체력 수치를 부여해보도록 하겠다.

플레이어 BP에 들어간 뒤 위와 같이 BP를 작성해준다.

"Event AnyDamage" 노드는 캐릭터가 대미지를 입으면 활성화되는 노드이다.

위 BP는 플레이어가 대미지를 입으면 플레이어의 체력을 낮추고, 남은 체력 수치를 텍스트로 표시해주는 BP이다.

다만 여기서 하나 문제가 생긴다.

체력의 최저선 제한이 없기에 - 수치로 계속 떨어져버리게 된다.

그렇기에 "Clamp" 를 넣어 체력이 '0' 밑으로 떨어지지 않게 해준다.

다시 "Progress Bar" 의 WB로 돌아가 체력을 표시해주고 싶은 "Progress Bar" 의 "Percent" 옆에 있는 사슬 모양 아이콘을 눌러 바인딩을 해준다.

"Map Range Clamped" 노드를 이용해 입력과 출력값의 최소, 최댓값을 설정해준다.

'Health' 의 수치는 0~100, 'Progress Bar' 수치는 0~1로 설정해주면 된다.

그리고 다시 플레이어 BP로 돌아가 "Begin Play" 노드를 생성하고 위와 같이 연결해준다.

"Create Widget" 노드에 "WB_Progressbar" 를 연결해주면 된다.

외부에서 이미지를 가져와 적용시켜줄 수도 있다.

위 사진과 같이 이미지를 가져온 뒤, "Style" 탭에서 "Draw As" 를 모두 "Image" 로 바꿔주고, "Bar Fill Style" 을 "Scale" 로 바꿔준다.

그러면 위 사진과 같이 체력이 깎임에 따라 Widget도 똑같이 깎여가는 것을 확인할 수 있다.

플레이어 BP에서 "Event AnyDamage" 노드 뒤에 위 그림과 같이 연결해주면, 플레이어 체력이 '0' 일 때 "Open Level" 에서 지정해준 레벨로 이동하게 된다.

이를 응용하여 게임 오버 화면도 제작해보겠다.

새로운 WB를 제작하고 위 그림과 같이 이미지를 캔버스에 배치한 뒤, 좌측 하단에 있는 'Animation' 을 눌러준다.

그러면 위 그림처럼 영상 편집 프로그램과 같은 창이 뜨는데, 'Add' 를 눌러 애니메이션을 넣어줄 Widget을 선택해준다.

Widget을 삽입하고 '+' 버튼을 눌러보면 Widget의 다양한 부분을 변화시키는 애니메이션을 넣어줄 수 있다.

애니메이션을 재생할 시간의 길이를 먼저 정해준 뒤, 위 그림의 위치에 있는 마름모 모양을 누르면 타임라인에 키프레임이 추가되면서 원하는 시점에 원하는 변화들을 삽입할 수 있다.

* 아래 그림처럼 "details" 탭에서도 키프레임 추가가 가능

이런 식으로 화면이 점점 검게 변하며, 위에서 'You Died' 라는 글자가 내려오게 하는 애니메이션 제작이 가능하다.

그리고 WB에서 "Event Construct" 노드를 추가하고 위 그림과 같이 연결하여, 애니메이션이 출력하고 일정 시간 뒤에 지정해준 레벨로 이동 시킬 수 있다.

플레이어 BP에서는 위 그림처럼 "Do Once" 노드를 넣어줘야 애니메이션이 제대로 출력된다.

"Do Once" 는 이름대로 한 번만 실행시키는 노드인데, 이 노드를 넣어주지 않으면 캐릭터의 체력이 '0' 이라고 지속적으로 입력되기 때문에 애니메이션의 첫 부분만 지속적으로 실행되게 된다.

Parent & Child

종속되는 관계를 가리킨다.

위 사진과 같이 캔버스 없이 바로 버튼 삽입하고, 버튼에 사용할 이미지를 삽입해준다.

Graph 탭으로 이동하여 좌측 하단의 "On Clicked" 를 누르면, 해당 Widget을 눌렀을 때 발생시킬 이벤트 관련 BP를 제작할 수 있다.

위와 같이 BP를 작성해주면 버튼 클릭 시 화면 내 모든 Widget이 제거된다.

"Remove All Widgets" 노드는 화면 내 배치된모든 위젯을 제거하는 노드이다.

위 그림과 같이 생성된 Widget 뿐만 아니라 플레이어에게 종속된 Widget도 지워버린다.

위 그림과 같이 "Remove Child At x 버튼 이미지가 속해있는 위젯만 제거

0번째 인덱스와 버튼 자신도 제거한다.

3D Widget

캔버스 위에 텍스트를 적어준 뒤, 우측 상단의 "Desired" 를 눌러주면, 텍스트의 크기에 맞게 캔버스가 조정된다.

"Desired" 는 위젯에 자동으로 적절한 크기를 결정해줄 때 사용한다.

새로운 BP 액터를 생성하고 "Add" 로 "Widget" 을 추가한 뒤, 위에서 제작한 WB를 지정해준다.

그리고 "User Interface" 의 "Space" 를 "World" 에서 "Screen" 으로 변경해준다.

이렇게 변경해줘야 특정 각도에서만 Widget이 표현되지 않고 모든 각도에서 Widget이 정상적으로 표시된다.

플레이어 BP에 들어가 "Add" 를 눌러 "Child Actor" 를 추가해주고 적당한 위치로 옮겨준 뒤, "Child Actor Class" 를 새로 만들고 수정한 BP 액터로 지정해준다.

그러면 게임 실행 시, 위 그림과 같이 3D Widget이 지정된 위치에서 플레이어를 따라다니게 된다.

Loading Bar

"Loading Bar" 역할을 해줄 수 있는 "Throbber" 와 "Circular Throbber" 가 있다.

"Throbber" 는 위 사진 중앙에 있는 막대형 Loading Bar이고, "Circular Throbber" 는 위 사진 좌측에 있는 원형 Loading Bar이다.

"Appearance" 의 "Number of Pieces" 에서 Loading Bar에서 표현할 오브젝트 갯수 및 주기를 설정할 수 있다.

CCTV

우선 빈공간을 우클릭을 하고 "Texture" 의 "Render Targer" 을 생성해준다.

위 사진과 같은 형태로 캔버스 위에 이미지를 두 장 놓은 Widget을 만들어준다.

카메라 두 대를 사용할 것이기에 두 개를 만든 것이지, 한 대를 사용할 거면 한 장만 올려줘도 된다.

레벨로 돌아가 "Place Actor" 에서 "Scene Capture 2D" 를 검색하여 레벨에 배치하고, "Scene Capture" 의 "Texture Target" 을 "Render Texture" 로 지정해준다.

"Render Targer" 을 우클릭하여 "Create Material" 을 눌러 마테리얼을 생성해준다.

생성된 마테리얼에서 "Material Domain" 을 "User Interface" 로 변경해주고, "Render Target" 을 마테리얼에 텍스쳐로 적용해준 뒤, RGB를 'Final Color' 에 연결해준다.

그리고 Widget의 이미지에 위에서 생성한 마테리얼을 입혀주면 된다.

CCTV Widget을 인식할 범위를 넓혀주고, 해당 범위 안에 들어가면 아래 사진과 같이 CCTV가 뜨게 된다.

위 기능은 많이 사용하면 컴퓨터 자원 많이 잡아먹기에 많이 사용하지 않는게 좋다.

"Scene Capture 2D" 를 클릭하고 우측 상단의 "Add" 를 눌러 "Rotating Movement" 를 눌러 회전하는 기능을 넣어줄 수 있고, "Rotating Rate" 를 통해 회전속도나 회전축 조절이 가능하다.

"Scene Capture 2D" 가 플레이어를 인식하고 화면을 플레이어에게 고정시키는 효과도 줄 수 있다.

"Open Level Blueprint" 를 클릭하여 새 BP창을 열어준다.

"Open Level Blueprint" 에 "Scene Capture 2D" 를 드래그 하여 넣어주면, 위 그림처럼 변수가 생성된다.

생성된 변수를 이용하여 위 그림과 같이 BP를 작성해주면 된다.

"Scene Capture 2D" 에 플레이어의 위치를 인식시켜 따라다니게 하는 BP이다.

그러면 위 그림과 같이 플레이어를 중심에 둔 채로 플레이어를 추적하는 CCTV를 제작할 수 있다.

* "Render Target" 에서 화면 크기로 CCTV 해상도 설정 가능

Grid

"Grid" 는 아래 그림과 같이 지정해준 범위 안에 일정한 크기로 이미지나 텍스쳐를 나란히 배치해주는 기능이다.

Uniform Grid Pannel

"Uniform Grid Pannel" 은 왼쪽에 있는 분홍색 Grid이다.

버튼에 Row 와 Column 으로 좌표 입력을 해서 나란히 배열 가능하다.

"Horizontal Allingment" 와 "Vertical Allignment" 는 둘 다 'Fill' 로 설정해주는 것이 좋다.

Vertical / Horizontal Box

중앙에 위치한 세로형 Grid가 "Vertical Box" 이고, 우측에 위치한 가로형 Grid가 "Horizontal Box" 이다.

이미 이미지가 차있어도 alt + d를 눌러 복사하면, 버튼 갯수가 늘어나고 크기가 줄어들면서 균일하게 맞춰진다.

"Uniform Grid Pannel" 와 마찬가지로 버튼의 "Horizontal Allingment" 와 "Vertical Allignment" 둘 다 'Fill' 로 설정해주는 것이 좋다.

그리고 "Fill" 옆의 "Size" 에서 단일 버튼의 크기 수정이 가능하다.

 

Postprocess

화면에 필터를 씌우거나 채도, 노출, 대비 등의 변화를 주는 것으로, 한국어 번역으로는 "후처리" 라고 한다.

레벨 전체가 아닌 Postprocess Volume 안에 들어갔을 때 플레이어 화면에 영향을 준다.

Infinite Extend (Unbound)

빛의 세기를 낮춰 어두운 배경으로 만들고자 했을 때 자주 썼던 설정이다.

"Infinite Extend (Unbound)" 는 Postprocess Volume 내에서만 효과가 적용되는게 아닌, 레벨 전체에 효과를 주는 기능이다.

''Exposure" 에서 "MinEV100" 의 값을 '1' 로, "MaxEV100" 의 값을 '2' 로 설정해서 어두운 배경으로 만들 수도 있지만, "Metering Mode" 체크 후 "Exposure Compensation" 수치 조절을 통해서도 어둡게 만드는 효과를 줄 수 있다.

Bloom

"Bloom" 은 위 사진과 같이 화면을 뽀얗게 만들어주는 효과이다.

"Bloom Method" 를 체크한 뒤, "Intensity" 수치 조절을 통해 뽀얗게 만드는 정도를 조절해줄 수 있다.

수치가 높으면 더 뽀얘진다.

Chromatic Aberration

"Chromatic Aberration" 은 한국어 번역으로 "색수차" 라고 한다.

"Chromatic Aberration" 은 위 사진과 같이 가장자리 부분의 초점을 엇나가게 해주는 효과이다.

"Intensity" 수치 조절을 통해 효과를 증폭시킬 수 있다.

Dirt Mask


"Dirt Mask" 는
 위 사진과 같이 텍스쳐를 넣어 필터를 씌우는 효과이다.

Lenz Flare

"Lenz Flare" 는 위 사진과 같이 광원을 바라볼 때 빛이 번지는 효과를 주는 것이다.

"Dirt Mask" 와 비슷하게
 텍스쳐를 넣어 필터를 씌워 효과를 바꿔줄 수 있다.

Image Effect (Vignette)


"Image Effect" 는 "Vignette" 라고도 하며, 위 사진과 같이 
화면의 주위를 어둡게 만들어 가운데쪽에 강조를 주고 싶을 때 사용하는 효과이다.

마우스 드래그로 수치 조절할 때에는 0~1 값만 가능하지만, 직접 타이핑 해서 넣을 때는 10까지 효과를 줄 수 있다.

Color Grading Temperature

"Color Grading Temperature" 은 수치 조절을 통해 위 사진과 같이 따뜻하거나 차가운 효과를 주는 것이다.

수치를 높이면 화면에 따뜻한 느낌을 주는 효과를 낼 수 있다.

Color Grading MISC

"Color Grading MISC" 는 "LUT 텍스쳐" 를 사용해 위 사진과 같이 톤을 씌워줄 수 있다.

Film

"Film" 은 "Slope" , "Toe" , "Shoulder" , "Black Up" , "White Up" 수치 조절을 통해 화면에 효과를 줄 수 있다.

"Toe" 를 건드리면 위 두번째 사진처럼 안개가 낀 것마냥 화면이 어두워지고, "Slope" 를 건드리면 채도를 건드리는 듯한 효과를 줄 수 있다.

Exposure

"Exposure" 은 화면의 노출 수치를 건드리는 효과이다.

따로 볼 건 없고, "Speed Up" 수치와 "Speed Down" 을 통해 암순응에 들어가는 속도 및 암순응에 빠져나가는 속도를 조절할 수 있다.

Postprocess Material

우선 마테리얼을 생성한 뒤, "Material Domain" 을 "Post Process" 로 바꿔준다.

"Scene Texture" 노드를 생성하고 "Scene Texture Id" 를 "PostProcessInput0" 로 설정해주면 "Postprocess Material" 을 생성할 수 있다.

그리고 효과를 주고 싶은 Postprocess Volume을 선택한 다음, "Post Process Material" 에서 배열을 추가한 뒤 위에서 제작한 "Postprocess Material" 을 선택하면 위 사진과 같이 효과를 줄 수 있다.