Unreal Engine 5/Tutorial Project: 시작해요 언리얼 2023

Unreal Engine 5 Tutorial - 시작해요 언리얼 2023 (2)

HappyFrog 2023. 6. 8. 18:10

 

(9) 시작해요 언리얼 2023 | 2주차 | 레벨 제작하기 I - YouTube

 

해당 게시물은 'Unreal Engine KR 유튜브 채널의 시작해요 언리얼 2023 | 2주차 | 레벨 제작하기'를 시청하며 따라한 내용입니다.

 


0. 추가 레벨 인스턴스 제작

1주차 강의가 끝나고 과제로는 다른 Quixel Bridge의 에셋을 활용하여 더 많은 레벨 인스턴스를 만들어 두는 것이 나왔다고 한다. 맘에 드는 에셋을 Quixel Bridge에서 다운받아 새로운 레벨 인스턴스를 몇개 더 제작하자.

 

* 23.06.08, 5.1.1버전 사용기준으로 Quixel Bridge에서 프로젝트에 추가한 에셋을 중복으로 추가하면 엔진이 꺼지는 현상을 발견했다. 중복으로 추가하지 않도록 조심하자.

 

이렇게 새로운 드럼통이나 포장된 상자더미, 나무상자 등을 새로이 받아 몇몇 레벨 인스턴스를 더 만들 것이다.

 

지난 영상에서 배웠던 대로 샘플로 확인할 액터들은 그대로 두고 레벨 인스턴스를 만드는데 활용할 액터들을 복사하여 다른 공간에서 작업할 것이다.

 

에셋들로 지난번에 배운 단축키들과 기능을 활용해 빠르게 레벨 인스턴스를 여러개 만들었다.

 

2. 공장 에셋 준비

1) 머티리얼 다운로드

우선 공장의 구조를 세울 것이다. 공장의 구조를 세우는데, 조금 특별한 방법을 사용할 것이다. Nanite를 활용해 높은 퀄리티로 표현되는 공장의 벽면을 만들 것이다. 공장의 벽면을 표현할 데이터가 필요하기 때문에 Quixel Bridge에서 에셋을 다운받자.

 

Home > Surfaces > Metal, Concrete

Home > Surfaces 탭에서 Metal을 검색하여 Rusty Metal Sheet, Dirty Corrugated Metal Sheet, Japanese Concrete Panels를 다운받고, Concrete를 검색하여 Rough Concrete를 다운받았다. 다운을 받고 Add는 하지 않은 에셋들은 Local 탭에서 다운받은 순서대로 확인할 수 있다.

 

하지만 액터는 Static Mesh와 Material을 합쳐 생성하는데, 방금 받은 에셋은 Material만 존재할 뿐, Static Mesh가 없다. 따라서 Static Mesh는 만들어 줄 것이다. 

 

2) 모델 생성

Modeling Mode > Box, Depth = 30

좌상단의 Selection Mode에서 Modeling Mode를 선택한다. 그러면 위 사진의 좌측에 존재하는 패널이 나타나는데, Mode Toolbar 패널에서 Shapes > Box를 선택하면 Modeling 패널이 나타난다. Mode Toolbar 패널에서 상세 모드를 고르고 Modeling에서는 고른 Shape의 상세 설정을 수정하는 패널이라고 보면 된다. Depth를 30으로 설정하자. 그럼 벽으로 쓸 수 있게 적당히 얇아질 것이다. 이것을 Viewport에서 클릭하여 배치하자.

 

Model vs Actor

좌측은 모델링 모드로 생성한 액터, 우측은 액터 배치에서 생성한 큐브 액터이다. 사실 큐브 액터의 스케일을 조절하면  모델링과 크게 다를 바 없는 외형을 갖게 된다. 하지만, 둘의 차이점은 자명하다. 모델링을 통해 만들어낸 액터는 UE5에 존재하지 않았지만 새로이 만들어낸 에셋이며, 액터 배치를 통해 만들어낸 큐브는 UE5에 이미 내장되어 있던 기본 액터다. 

 

Ctrl + B

따라서 Ctrl + B를 통해 프로젝트 내의 어떤 위치에 존재하는지 살펴보면, 액터 배치를 통하여 생성한 액터들은 Engine > Content > BasicShapes에 존재하지만, 모델링을 통해 생성한 에셋은 seMo > Level > _GENERATED > 사용자 이름 폴더 하위에 생성된 것을 확인할 수 있다.

 

이후 과정은 모델링 모드를 이용하여 새로운 에셋으로 만들어 진행하는 것을 권장한다. 액터 배치 패널에서 큐브를 사용하여 스케일 변경 등으로 만들어나가면 문제가 생길 수 있다고 한다.

 

방금 모델링 모드로 생성한 액터에 미리 받아뒀던 머티리얼을 할당해보자.

 

3) 모델링 수정(Remesh, Displace)

질감표현은 아주 잘 됐으나, 굴곡표현은 결국 착시를 이용하여 구현했기 때문에 오른쪽 사진을 보면 보이다시피 실제 굴곡은 없는 그냥 상자형태이다. 이 부분은 상자모양의 표현 한계를 넘어서지 못해 조금 아쉬운데, UE5의 모델링 기능을 이용한다면 텍스쳐데이터의 정보로 실제 굴곡을 표현할 수 있게 된다.

 

실제 굴곡을 만들기 전에, 굴곡을 표현하기 위해선 Static Mesh의 폴리곤 갯수가 굉장히 많이 필요하다. 따라서 모델링 모드로 돌아가 MeshOps > Remesh를 선택한 후, 상자모양 액터를 선택하고 Target Triangle Count를 20000으로 늘려준 뒤 Accept를 눌러주자.

 

이어서 그 위쪽에 있는 Deform > Displce를 선택하면 현재 상자액터가 굉장히 이상해질 것이다. 이것은 Displacement Type이 Perlin Noise여서 그런데, 우리는 2D Texture를 기반으로 에셋 형태에 굴곡을 줄 것이기 때문에 Texture2D Map으로 타입을 변경한다.

 

Texture2D Map으로 변경하면 여기까지 표현된다. 이 다음엔 그 아래 Options > Displacement Map에 데이터로 제공할 텍스쳐맵을 할당해야하는데, 이것은 우리가 사용하는 머티리얼의 텍스쳐 중 ORDp라고 네이밍된 텍스쳐를 제공하면 된다.

 

이 텍스쳐를 할당해주면 된다.

 

* ORDp = Occlusion Roughness Displacement

 

할당하고나면 버추얼 텍스쳐는 이 툴에서 Displacement Map의 텍스쳐 2D로서 사용할 수 없으니 비활성화 하라는 문구가 표시된다. 다행히도 이전에 했던 것 처럼 프로젝트 기본 설정을 바꿀 필요는 없다. 

 

할당하려는 텍스쳐를 우클릭하여 Convert to Regular Texture를 선택하여 일반 텍스쳐로 변환해준다.

 

변환이 완료되면 해당 텍스쳐에만 VT표시가 사라졌으며, 이것을 다시 Displacement Map에 할당하면 붉은색 경고 문구가 사라진다. 이렇게 버추얼 텍스쳐를 해제한 텍스쳐는 디스플레이스먼트 기능의 활용을 마치고 다시 버추얼 텍스쳐로 돌려주면 된다.

 

그리고 텍스쳐에는 '채널'이라는 것이 존재하는데, R,G,B,A채널이 있다. 텍스쳐 중에는 이것을 채널별로 가지는 것들이 있다.

R / G / B

텍스쳐를 기반으로 모델링을 변형시키는 것을 일반적으로 Displace라고 하는데, 방금 할당한 텍스쳐로 확인을 해보면 각 채널별로 흑백의 텍스쳐가 존재함을 확인할 수 있다. 위 텍스쳐에는 A채널이 존재하지 않았다.

 

그리고 이 텍스쳐의 이름 마지막부분에 ORDp라고 되어있었던 것이 기억날 것이다. 이 이름은 텍스쳐 채널의 용도를 알려주는 순서이므로, R 채널은 Occlusion을 위한 텍스쳐가, G 채널에는 Roughness를 위한 텍스쳐가, B 채널엔 Displacement를 위한 텍스쳐가 저장된 셈이다.

 

따라서 Displace를 해야하는 현재는 할당한 텍스쳐 바로 밑에 보이는 Modeling > Options > Channel 을 Blue 채널로 설정해주면 된다.

(만약 텍스쳐의 이름이 DpOR이라고 돼있다면 Displacement 텍스쳐는 R채널에 존재하는 것이다.)

 

이제 Directional Filter Options > Enable Filter를 눌러 방향 필터를 활성시켜주자. 

 

Directional Filter Disables vs Enables

활성화했다면 울퉁불퉁한 메쉬의 변형이 윗면에만 적용되고 옆면은 처음과 같이 매끈한 상자모양에 착시만 표현되는 것을 볼 수 있다. 이것은 필터의 방향설정때문인데, Filter Direction에서 (0, 0, 1)이라고 표현된 영역 중 1이라고 표현된 z값만 Displacement가 적용됐기 때문이다.

 

Displacement의 영역값을 넣을 때는 표현하고 싶은 축에 값을 입력해주면 된다. 왼쪽 사진에서 R, G, B 순으로 X, Y, Z 축이다. 하지만 Z축만 1.0이었을 때 윗면은 표현됐던 것을 생각하면 넖은 옆면은 X축, 좁은 옆면은 Y축이라는 것을 알 수 있다. 따라서 옆면만 표현하면 되는 우리는 Filter Direction의 값을 (1, 1, 0)으로 설정해주면 오른쪽 사진과 같이 원하는 Displacement를 표현할 수 있다.

 

하지만 하지만 양수를 기입하면 양의 영역 메시만 표현되고, 음의 영역은 여전히 평평한 것을 볼 수 있다. 따라서 본인이 표현하고 싶은 면으로 필터 방향을 잘 설정하는 것을 잊지말자. 최종적으로 (-1, 1, 0) 으로 설정했다.

 

Lit > Nanite Visualization > Triangles

그리고 보기 설정에서 나나이트 시각화 > 트라이앵글로 설정하고 봐보자.

 

Lit vs Nanite Trianlges

우리가 만든 에셋은 나나이트 적용이 되지 않는다는 것을 알 수 있다.

 

그럼 여기까지 변경한 것들을 저장하고 Selection Mode로 나와 에셋을 선택하고 Ctrl + B를 눌러 에셋의 위치를 Content Browser에서 찾는다.

 

나나이트를 켜주자.

 

그리고 확인해보면 이젠 나나이트 시각화에서 보인다. 나나이트가 잘 적용됐다는 뜻이며, ReMesh와 Displace를 통해 Static Mesh에 굴곡을 구현한 것이 실제로 표현되고 있음을 쉽게 확인할 수 있다.

 

Static Mesh

이제 만들어둔 에셋을 늘이고 복사하고 이어붙이며 공장 벽을 세울 수 있다. 하지만 여태까지 작업에서 주의해야 할 점은 ReMesh와 Displace 작업은 Static Mesh의 원본을 수정하게 된다. 따라서 Content Browser를 통해 에셋을 드래그하여 새로운 Actor를 배치한다 하더라도 우리가 수정하여 굴곡을 구현했던 그 모습 그대로의 Actor가 배치된다.

 

이렇게 원본의 Static Mesh가 변하는 작업이기 때문에 액터 배치에서 Cube를 가져와 작업하면 안된다는 것이었다. 기본 액터인 Cube가 변형될 수도 있기 때문에.

 

이제 앞서 가져왔던 머티리얼들로 모두 이런 에셋들을 만들어주자. 

 

Displace할 때 Virtual Texture를 잠시 Regular Texture로 변환하여 사용하는 것과 구현이 완료된 Static Mesh들의 Nanite를 켜주는 것까지 잊지말자.

 

3. 공장 만들기

타일을 배치하기에 앞서, 이 타일들이 어느 정도의 비율인지, 실제에선 어느정도로 큰지 우리는 잘 모른다. 비교군이 없어 감을 잡기 힘든데, 이것을 해결하기 위해 가상의 캐릭터 에셋을 하나 배치해두고 배치하기 시작하면 도움이 된다.

 

캐릭터와 비교했을 때 타일의 크기가 작으니 수정이 필요하다. Details > Transform > Scale 옆의 자물쇠버튼을 눌러 잠궈버리면 Scale값의 X, Y, Z값이 동시에 변한다. 

 

Scale (1, 1, 1) vs (2, 2, 2)

스케일을 변경하며 타일크기를 조절한 후, 배치를 시작한다. 타일을 복사하여 여러장 이어서 깔 생각이라면 Viewport 우상단에 있는 Snap을 켜고 배치하는 것을 추천한다. 최소단위로 이동하기 때문에 이어붙일 때 낭비되거나 모자란 공간없이 딱 들어맞는다.

 

Quixel Bridge 텍스쳐의 장점은 Seamless라고 하여, 모델의 경계면이 티가 나지 않도록 자연스러운 텍스라는 점이다. 위 사진에서 배치한 타일은 총 8개인데, 보면 이음새부분에서 거의 티가 나지 않는다.

 

적당히 이어붙이다가 상하로 4층의 타일을 쌓게됐는데, 3층 이상부턴 Japanese Concrete Panels를 기반으로 생성한 Static Mesh와 머티리얼을 사용하였다. 이렇게 단조로운 연출보단 조금 다른 머티리얼을 섞어가며 배치하면 보기좋게 연출할 수 있다.

 

충분히 길고 높게 쌓았다면 하늘에서 바라보고 모든 타일을 선택하여 복사할 것이다. 맞은편에 복사하여 맞은편 벽으로 활용할 것이다. (Light와 Actor, Plane을 복사하지 않도록 주의하자.)

 

복사한 타일들의 굴곡 표현은 그대로 복사됐기 때문에 벽과 벽 사이, 즉 건물 안쪽을 향하고 있다. 굴곡을 다시 벽 바깥쪽을 향하도록 만들려면 여러가지 방법이 있겠지만, Scale X의 값을 음수로 바꿔주는 것이 가장 간단하다.

 

Scale에서 X의 값만 2에서 -2로 변경해주면 굴곡 표현이 바깥쪽을 향하게되는 것을 볼 수 있다.

 

내 게시글과는 다르게 타일들의 질감이 반짝거리며 매끈한 느낌을 표현하고 있을 수 있다. 그럴땐 Displace할 때 Regular Texture로 변환했던 ORDp 텍스쳐들을 다시 Virtual Texture로 변환해주면 해결된다.

 

이제 공장의 양 벽면은 완성됐으니, 앞뒤를 만들어보자.

 

앞뒤는 Rusty Metal Sheet 머티리얼을 사용한 타일을 쓸 것이다.

 

Scale은 마찬가지로 (2, 2, 2)로 변경하여 사용했고, 배치할때는 조금 겹치 편이 자연스럽다.

 

앞서와 마찬가지로 복사를 활용하여 빠르게 앞뒤 벽면을 만들어주자. 그리고 반대편 벽을 복사하여 배치할 땐 Scale X를 -2로 변경하여 굴곡 표현을 뒤집어 주는 것을 잊지 말자.

 

이제 네 면으로 공장의 틀을 잡았으니 천장을 만들어보자. 천장은 Rough Concrete 머티리얼 타일을 사용할 것이다.

 

콘크리트 타일도 마찬가지로 모든 스케일을 2로 늘려준다. 그리고 콘크리트의 색감이 너무 밝아 조금 어둡게 만들 것이다.

 

Albedo Controls : Saturation = 0.2, Brightness = 0.7, Contrast = 1.8

콘크리트 타일의 Details > materials > Element 0 에 있는 머티리얼을 더블클릭하여 머티리얼 편집기를 연다. 머티리얼 편집기에서 01 - Albedo > Albedo Controls > Brightness 의 값을 낮춰주면 콘크리트 타일의 밝기를 수정할 수 있다.

 

수정한 타일로 지붕을 만들어보자.

 

직각으로 눕히면 밋밋하니 40도정도 눕혀서 비스듬하게 쌓아올릴 계획이다. 마찬가지로 복사해가며 빠르게 만들어가자. 양 옆을 복사할 땐 기존 Gizmo를 별 문제없이 활용할 수 있지만, 층을 쌓기 위해 복제를 하면 살짝씩 어긋날 수 있다. 이것은 월드, 로컬 Gizmo에 따라 조금씩 차이나는 것인데, Ctrl + `를 눌러주면 Gizmo의 유형이 바뀌니 로컬로 바꿔서 층을 쌓아주면 빈틈없이 깔끔하게 복사가 되는 것을 볼 수 있다.

 

지붕을 만들었다면 남은 공간도 모두 막아주자. 내부 모습 연출에 집중할 예정이므로 겉모습은 임시방편으로 막아둔 모습이 되었다. 

 

4. 빛 연출

공장 천장에 결함이 생겨 빛이 새어들어오는 연출을 의도하기 위해 천장 타일 몇개를 지워주자.

 

Directional Light를 공장 안쪽에 넣어주고 각도를 회전시켜 공장에 들어오는 빛의 각도를 좀 예쁘게 보이도록 수정해주자. 만약 각도를 조절하는데 뚝뚝 끊기듯이 각도가 변경된다면 snap이 켜진것이므로 끄고 하자. 각 수치에 관한 snap은 Viewport의 우상단에 위치한다.

 

* Directional Light는 빛의 각도를 표현하며 각도에 따라 밤~ 낮까지 다양한 빛표현이 가능하다. Directional Light의 액터의 위치와 스케일은 빛표현과 전혀 관계가 없으므로 이동시켜도 전혀 상관없다.

 

5. 공장 내부 구현

이제 공장 내부를 채워보자. 그 전에, 이전에 만들었던 에셋들과 레벨 인스턴스들을 복사하여 공장 내부로 가져오자. 이렇게 먼 거리를 이동할 때, 드래그하여 오브젝트들을 이동시키는데 맵 밖까지 이동하기위해 드래그하고, 시야를 옮기고, 드래그하는 식으로 하게되는 경우가 있을 것이다. 이 때는 Shift + 드래그를 통해 이동하면 카메라가 함께 이동하기 때문에 조금 더 편하게 이동시킬 수 있다.

 

옮겨온 오브젝트들을 적당히 보기 좋은곳에 배치해두고 이것들을 복사해가며 배치해보자.

 

환경배치를 하는 시간을 절약하는 팁을 주자면, 1열에 배치한 오브젝트들을 복사하여 2열에 배치한 뒤, 180도 회전시키면 반복되는 모습이 덜하기 때문에 빠르고 자연스럽게 오브젝트들을 배치할 수 있게 된다. 복사하여 배치하는 도중에 조금씩 바리에이션을 만들어주는 것도 자연스러운 연출을 위한 팁이다.

 

중간에 이런 다른 모양새의 인스턴스를 배치하는 것도 하나의 방법이며

 

기존 인스턴스를 조금 제거하여 부서진 선반을 연출할 수도 있다. 모든 배치는 정답이 없다. 다만, 반복되는 모습은 부자연스러움을 느낄  수 있으니 이것을 예방하기 위해 몇몇 팁을 소개했을 뿐, 본인이 원하는 대로 자연스러운 모습이 연출되기만 한다면 좋다.

 

나름 공들여 내부 오브젝트 배치를 완료했다. 이제 천장 구조를 꾸며보자. 천장 구조를 꾸밀 때 필요한 에셋은 Quixel Bridge에서 Modular Pipe를 검색하여 다운받으면 된다.

 

영상에서는 Modular Drain Pipe KitModular Metal Beams Kit을 사용한 듯 하다.

 

이 에셋을 이용하여 천장에 철골구조가 보이는 듯이 꾸며볼 것이다.

 

Fog On vs Off

그 전에, 공장 내부에 푸른 안개같은 것이 자꾸 시야를 가려서 작업하는데 불편함을 느낀다면 Outliner에서 Fog를 검색하여 ExponentialHeightFog 를 찾아 좌측의 눈모양 아이콘을 꺼주자.

 

Lit vs Unlit

안개를 껐는데도 빛의 노출에 따라 화면의 밝기가 유동적으로 바뀌는 것이 불편하다면, Viewport 좌상단의 Lit이라고 되어있는 옵션을 Unlit으로 바꿔주면 된다. 이는 Viewport의 옵션을 "Lighting 포함" 에서 "Lighting" 미포함 옵션으로 변경하는 것이다.

 

출처 - https://m.blog.naver.com/leb5000/221887575814

내 공장은 위 사진과 비슷한 형태의 지붕을 가지므로 이런 구조의 철골을 표현해주면 좋을 것 같다.

 

기본적인 구조를 구현했고, 이것을 레벨 인스턴스로 만들었다. 공장 천장에 지속적으로 배치해야할 구조물이기 때문이다.

 

천장을 지탱하는 철골표현이 되도록 충분히 반복배치 해주자.

 

들어오는 빛이 너무 적어 잘 안보이길래 천장에 구멍을 더 내주고 Lit으로 바꿔서 확인했다.

 

천장 구조에 조금 더 붉은 빛을 띄는 빔 에셋을 추가하여 마무리해줬다. 이제 이 철골에 조명을 달아줄 차례다.

 

조명을 쇠사슬에 걸어 배치할 것이므로 Quixel Bridge > Collections 에서 Warehouse를 검색한 후 나오는 쇠사슬들을 다운받자.

 

마찬가지로 Warehouse에 있는 Metal Pendant Light에셋 두개와 Fluorescent Ceiling Lamp 두 개를 다운받자.

 

다운받은 에셋을 조합하여 램프를 만들자. 쇠사슬에 감겨진 램프에서 빛이 나오는게 말은 안되지만, 연출로서는 훌륭할 것이다.

 

적당히 이어주면 되긴 하지만, 특히 램프의 이음새부분과 사슬이 겹치는 곳은 자연스럽게 배치해주는 것이 좋다.

 

Lit, Fog Off vs On

램프배치와 창고 내부 부족한 부분 배치까지 마쳤다. 이번 영상의 내용은 여기까지며 추가로 Directional Light의 각도를 조절하여 원하는 조광을 연출할 수 있으니 잘 마무리 해보자.