UE - 프로젝트 프로토 타입 - 슈팅 프로젝트(배경 스크롤)

Intro

한 장의 이미지를 아래로 이동시키면서 동시에 이미지의 위쪽 끝과 아래쪽 끝을 마치 컨베이어 벨트처럼 이어 붙여서 이미지가 계속 반복되도록 무한 스크롤.

 

 

목표

• 반복 가능한 우주 이미지를 프로젝트로 가져온다.
• 임포트된 우주 이미지를 월드 공간에 배치한다.
• 우주 이미지의 재질에서 UV를 아래로 이동하게 조정한다.
• 라이트맵을 베이크(Bake)하고 그림자가 생기지 않도록 조정한다.

 

이미지 가져오기(Image Import)

검색 창에 Universe Loop라고 입력해서 우주 이미지 검색.

 

 

 

UniverseLoop 이미지 가져오기

 

 

이미지를 3D 월드 공간에 배치하기

이미지는 2D 이지만 월드 공간에는 3D 모델링만 배치할 수 있으므로 이미지를 3D 모델링에 부착할 재질(Material)로 만들어야 합니다.

 

 

Material 생성

 

 

 

Material에 Texture Sample 추가

이미지를 Material Editor에 가져다놓으면 Texture Sample 생성

 

 

 

M_BackGround 기본 노드

해당 Material이 최종적으로 화면에 표현하기 위한 각 설정을 담당하는 노드. 다시 말해 표면 재질에 표현하고자 하는 각종 설정 값들을 기본 표현식 노드에 연결하면 연결된 모든 설정 값들을 종합하여 그 결과를 반영하고 최종적인 표면 재질로 화면에 그려지게 되는 것.

우주 이미지가 월드에 배치한 디렉셔널 라이트의 영향을 받아서 밝아지거나 어두워지면 이상하므로, 텍스쳐가 빛의 영향을 받지 않도록 수정.

 

 

Shading Model 설정 값을 Unit으로 변경

셰이더 : 물체를 화면에 그릴 떄 빛의 조도와 각도, 물체가 가진 색상 등을 계산해서 음영을 그려주는 역할을 합니다.
Lit은 빛의 영향을 받도록 계산하는 것이고, Unlit은 빛을 계산하지 않는 셰이딩 방식입니다.
해당 설정 이후 Texture Sample 노드의 RGB 출력 핀을 드래그해서 M_Background 노드의 Emissive Color 입력 핀에 연결합니다.
Emissive Color는 빛과 관계없이 물체 자체에서 발산되는 고유 색상입니다.

 

 

A 알파

텍스처 투명도를 의미합니다. RGB는 Red, Green, Blue 채널의 약자입니다. A는 알파(Alpha)의 약자로서 텍스처의 투명도를 의미합니다. 알파 값이 클수록 불투명하고, 알파 값이 작으면 투명해집니다. 배경 이미지에는 투명한 부분도 없을 뿐더러 굳이 투명도가 필요하지 않으므로 RGBA가 아닌 RGB 값만 Emissive Color에 연결하였습니다.

 

 

Plane Details 설정

 

 

 

Materials 밝기 설정

1. 마우스 클릭을 통해서 Scala Parameter Emissive Power 생성
2. RGB 노드 값에서 Multiply 노드 생성
3. Emissive Power와 RGB 값을 곱합니다. (RGB는 벡터이므로 스칼라 값과 곱해서 크기를 줄이거나 늘릴 수 있음)

 

UV란?

이미지에만 존재하는 특수한 가로 * 세로 픽셀 좌표입니다.

 

 

이미지 UV 스크롤하기

 

Panner 노드 추가

 

 

Panner 노드의 Y축 값을 -0.1로 설정

전진하는 느낌을 주려면 우주 이미지가 아래쪽으로 스크롤되어야 하므로 세로축의 값을 추가해주어야 합니다.
Speed Y항목에 -0.1을 입력합니다.

 

 

이미지 스크롤의 원리

이미지 픽셀을 그릴 떄 픽셀의 시작점을 계속 다르게 한 것.
Panner 노드를 추가할 떄 텍스처 노드의 UVs 입력 핀에 연결.
바로 이 UV가 이미지에만 있는 특수한 가로 X 세로 픽셀 좌표

만약 이미지의 픽셀 사이즈 그대로 3D 오브젝트의 표면 재질에 입히게 되면 3D 오브젝트의 크기에 따라 같은 이미지라도 여러 사이즈로 만들어야 합니다.

불필요한 이미지의 수가 늘어나서 프로젝트 전체 용량도 커지게 되고 이미지 파일을 화면에 그릴 때 메모리를 차지하는 양도 늘어나서 최적화를 망치는 주요 원인이 될 수도 있습니다.

텍스처의 픽셀 사이즈를 비율로 환산한 가로세로 좌표가 UV입니다. 즉, 가로세로 각 축의 비율을 0 ~ 1의 실수 값으로 픽셀의 RGB 값을 다시 계산한 좌표입니다. 0이 0%지점, 1이 100%(우측 끝)라고 한다면 0.5는 50%(중앙)이 됩니다.

좌표 축을 XY로 표시하면 월드 위치 좌표와 헷갈리므로 텍스처에서는 U축(가로), V축(세로)로 표시합니다.
UV 활용 시 하나의 면에 여러 이미지를 그리거나 하는 등 다양한 연출을 할 수 있습니다. 필요할 때마다 인터넷이나 책을 찾으며 활용하는 것이 좋습니다.

 

 

그림자 표시 설정

BP_Enemy의 그림자가 이미지 위에 표시되는 것이 거슬리므로 그림자를 제거하기 위해 Directional Light 설정에서 그림자 생성을 제거합니다. Directional Light 액터에서 Cast Shadwons 항목의 체크를 제거합니다.

 

 

 

이미지 스크롤

 

 

참고

인생 언리얼 프로젝트 교과서 5 - 1권을 학습하고 정리한 글입니다.