배경화면 UI 만들기

AI 이미지 생성 도구를 이용하여 게임의 분위기에 맞는 배경 이미지를 제작했다. 이미지 자체의 분위기는 나쁘지 않지만, 그대로 UI에 배치하면 화면에 아무런 움직임이 없어 다소 정적으로 느껴진다.

따라서 배경 이미지 위에 Material 효과를 겹쳐 화면에 생동감을 추가해보기로 했다.

Unreal Engine의 UI에서도 Material을 사용할 수 있으며, Time이나 Texture Coordinate 값을 활용하면 시간에 따라 변화하는 애니메이션 효과를 만들 수 있다. 또한 Material Editor에서 구현하기 복잡한 계산은 Custom Node를 통해 HLSL 코드로 직접 작성할 수 있다.

셰이더 효과를 구현할 때는 ShaderToy에 공개된 여러 예제를 참고했다. ShaderToy에는 노이즈, 빛, 파티클, 왜곡 등 다양한 실시간 셰이더 예제가 존재하므로 원하는 효과의 원리를 파악하는 데 도움이 된다.

FireFly

첫 번째로 구현한 효과는 배경 화면을 떠다니는 반딧불이다.

Material에서는 Time Node와 TexCoord Node를 입력값으로 사용했다. TexCoord는 현재 픽셀의 화면상 위치를 나타내며, Time은 게임 실행 이후 흐른 시간을 전달한다.

두 값을 조합하면 각각의 빛 입자가 시간에 따라 다른 위치로 이동하도록 만들 수 있다. 반딧불의 위치와 밝기 계산은 Material Node만으로 구성하지 않고 Custom Node 내부에 HLSL 코드로 작성했다.

SunLight

다음은 화면 위쪽에서 햇빛이 들어오는 것처럼 표현하는 효과이다.

Glow

배경 이미지의 특정 부분을 강조하기 위해 Glow 효과도 추가했다.

Leaf

마지막으로 화면을 가로질러 나뭇잎이 떨어지는 효과를 추가했다.

---

최종 결과

제작한 Material은 일반적인 메시 표면이 아니라 UMG의 Image 위젯에 적용한다. UI에서 사용할 Material은 Material 설정의 Material Domain을 User Interface로 변경해야 한다.

이후 UMG의 Image 위젯에서 Brush Image 항목에 Material을 지정하면 해당 Material의 결과가 UI에 표시된다. 정적인 배경 이미지 위에 반딧불, 햇빛, Glow, 나뭇잎 효과를 추가하면서 처음보다 훨씬 많은 움직임이 생겼다.

(Material의 파라미터를 이용하면 마우스 인풋에 따라 인터렉티브한 효과를 주는 것도 가능하다.)

Material을 활용하면 별도의 영상 파일이나 복잡한 파티클 시스템을 사용하지 않고도 UI에 다양한 애니메이션을 적용할 수 있다. 특히 Time, TexCoord, 노이즈 함수와 같은 기본적인 요소만으로도 비교적 다양한 효과를 만들 수 있다.

다만 각각의 효과만 따로 확인했을 때는 괜찮아 보였지만, 모든 효과를 한 화면에 적용하니 전체적으로 조금 과해진 느낌도 있다. 효과를 구현하는 것만큼 화면의 분위기에 맞게 강도와 개수를 조절하는 과정도 중요하다.

하지만 난 디자인은 하지 말아야겠다.