미터 머티리얼은 UI에 사용하기에 안성맞춤입니다. UMG 이미지 위젯에서 이 머티리얼을 참고하여 체력, 처치, 게임 내 굿즈 및 화폐의 수집 상황을 추적할 수 있습니다. 이 튜토리얼을 통해 나만의 미터 머티리얼을 만들고 커스텀 UI 디자인에 활용해 보세요.
이 머티리얼을 사용하면 자신이 제작한 커스텀 머티리얼로 기본 포트나이트 룩을 오버라이드하여 플레이어 체력, 보호막 등 플레이어 중심 통계 정보를 추적할 수 있습니다.
이 머티리얼은 디자인에 아이콘을 사용합니다. 포트나이트 언리얼 에디터(UEFN)에는 다양한 네이티브 아이콘이 포함되어 있습니다. Fortnite 폴더의 Textures > Icons에서 아이콘을 찾을 수 있습니다.
머티리얼 생성하기
모든 머티리얼은 콘텐츠 브라우저(Content Browser)에 생성됩니다. 프로젝트를 정리하려면 폴더를 생성하여 모든 머티리얼을 보관하세요.
콘텐츠 브라우저에서 우클릭하여 컨텍스트 메뉴를 엽니다.
컨텍스트 메뉴에서 머티리얼(Material)을 선택합니다.
머티리얼을 M_Meter로 명명합니다.
머티리얼 섬네일을 더블클릭하여 머티리얼 에디터를 엽니다.
미터 머티리얼을 생성하려면 팹에서 UI Material Lab을 다운로드해야 합니다.
머티리얼 노드와 그 작동 방식에 대한 자세한 내용은 머티리얼 노드 및 세팅을 참고하세요.
머티리얼 노드
다음은 이 튜토리얼에서 사용하는 머티리얼 노드와 최종 결과물에서 각 노드의 역할이 나와 있는 목록입니다. 설명을 건너뛰고 머티리얼 생성부터 시작하려면 여기를 클릭하세요.
| 머티리얼 노드 | 용도 |
|---|---|
아이콘 및 프로그레스 바 채우기에 컬러를 추가합니다. | |
아이콘 아래에 배경 마스크를 추가하는 데 사용됩니다. 프로그레스 바를 사용해 진행률에 따라 백그라운드를 마스킹하는 데에도 활용됩니다. | |
UI 머티리얼에 텍스처를 추가합니다. | |
컬러 아이콘을 배경 컬러 위에 오버레이하고, 배경 위 아이콘에 대해 마스크를 생성하는 데 사용됩니다. | |
아이콘의 UV 텍스처 좌표를 2채널 벡터 값의 형태로 출력합니다. | |
머티리얼 함수 > UI Scale | 텍스처 함수는 머티리얼 함수 노드의 하위 카테고리입니다. 이 함수를 사용하면 아이콘의 UV 스케일을 조절할 수 있습니다. |
머티리얼 함수 > UI SDF Circle | 아이콘 뒤의 프로그레스 바를 마스킹하고, 배경 컬러로 원을 얼마나 채울지 지정할 수 있습니다. 일반적으로 이 머티리얼 함수는 머티리얼에 원을 그리는 데 사용됩니다. UI Material Lab의 다른 SDF 셰이프 머티리얼 함수(UI SDF Box 등)로 대체하여 다른 형태를 만들 수도 있습니다. |
아이콘의 X축 및 Y축 스케일을 균등하게 조절하는 데 사용되며, 2개의 스칼라 파라미터가 뒤에 붙습니다. 하나는 아이콘의 X 스케일을 조절하고, 다른 하나는 Y 스케일을 조절합니다. 조절된 파라미터는 MF_UI_Scale에 연결됩니다. | |
아이콘의 래핑이나 타일링을 방지하기 위해 아이콘의 UV 범위를 0~1로 고정합니다. | |
추적기 장치의 진행률 스칼라 파라미터에 대해 0~10의 범위를 생성하는 데 사용됩니다. ConstantBiasScale은 파라미터에 설정된 값을 가져와 바이어스 값을 빼고, 여기에 스케일 값을 곱합니다. | |
2개의 입력을 받아서 서로 곱한 뒤 결과를 출력하는 곱셈 노드입니다. 이 예시에서는 백그라운드에 컬러를 칠하기 위해 텍스처의 RGB 채널에 Vector3 노드를 곱했습니다. 또한 아이콘 컬러를 입히기 위해 LinearGradient에 Vector3을 곱했습니다. | |
Step | X 및 Y 좌표의 한계치를 생성합니다. 한계치는 UI에서 백그라운드 머티리얼의 컨테이너를 만들어냅니다. Step 노드는 한계치를 초과하는 값을 1로, 한계치 미만인 값을 0으로 바꿉니다. 이렇게 하면 채워진 부분과 채워지지 않은 부분이 명확하게 분리되는 프로그레스 바 마스크가 만들어집니다. |
LinearGradient의 UGradient 값을 가져와 다음 정수로 반올림한 뒤 결과를 출력합니다. 이렇게 하면 기본적인 단색 백그라운드를 쉽게 만들 수 있습니다. | |
Constant | 머티리얼 어트리뷰트에 값을 추가할 수 있습니다. |
메인 머티리얼 노드 준비하기
머티리얼 노드를 추가하기 전에 먼저 메인 머티리얼 노드(Main Material Node, MMN) 세팅을 변경하여 UI에 사용할 머티리얼을 준비합니다. MMN 세팅은 MMN에 어떤 입력을 사용할 수 있는지, 머티리얼을 어디에 사용할 수 있는지를 결정합니다.
MMN 노드를 선택합니다.
머티리얼 에디터의 디테일(Details) 패널에서 머티리얼 도메인(Material Domain)을 유저 인터페이스(User Interface)로 설정합니다.
블렌드 모드(Blend Mode)를 반투명(Translucent)으로 설정합니다.
이미지를 클릭하면 확대됩니다.
프로그레스 바 컬러 구성하기
UMG에서 이미지 위젯을 통해 식별할 수 있는 프로그레스 바 컬러를 구성하여 미터 머티리얼을 시작합니다. 이 프로그레스 컬러를 커스텀 UI 디자인을 만드는 데 사용할 수 있습니다.
머티리얼 그래프에서 우클릭하여 노드 메뉴를 엽니다.
검색창에 LinearGradient를 입력합니다. 드롭다운에서 LinearGradient를 선택합니다. 그래프에 노드가 나타납니다.
1~2단계를 반복해 머티리얼 그래프에 다음 노드를 추가합니다.
Ceil
Multiply
Constant3vector
Constant3Vector 노드의 흰색 핀에서 드래그하여 Multiply 노드의 A 입력에 연결합니다. 뷰포트에서 셰이프의 컬러가 바뀌는 걸 볼 수 있습니다.
머티리얼 그래프에서 Constant3Vector 머티리얼 노드를 선택합니다. 노드를 선택하면 그래프에서 해당 노드가 강조 표시됩니다.
노드의 검은색 사각형을 클릭하여 색상환을 엽니다. 색상환에서 머티리얼 컬러를 선택합니다.
LinearGradient 노드의 UGradient 핀에서 드래그하여 Ceil 노드의 왼쪽 입력에 연결합니다.
Ceil 노드의 오른쪽 핀에서 드래그하여 Multiply 노드의 B 입력에 연결합니다.
이 노드 구성은 UI 컨테이너의 컬러를 제공합니다.
그래프 영역을 우클릭하여 그래프에 LinearInterpolate 노드를 추가합니다.
Multiply 노드에서 드래그하여 첫 번째 LinearInterpolate 노드의 A 입력에 연결합니다.
머티리얼의 이 부분은 컨테이너의 백그라운드를 채워 진행률을 추적하는 데 사용됩니다.
여러 노드를 그룹화해 한 번에 움직이려면 다음 단계를 따르세요.
그래프를 클릭하고 드래그해 원하는 노드를 함께 선택합니다. 선택된 모든 노드가 강조 표시됩니다.
노드 하나를 잡고 그래프의 다른 곳으로 이동하면 선택된 모든 노드가 한 번에 움직입니다.
아이콘 스케일과 컬러 구성하기
이 머티리얼 섹션에서는 아이콘을 선택하고 스케일을 조절한 뒤 머티리얼과 UI에 표시될 아이콘의 컬러를 선택합니다. 아이콘은 Fortnite > Textures > Icons 폴더에서 찾을 수 있습니다.
그래프 영역을 우클릭하여 그래프에 다음 노드를 추가합니다.
TextureCoordinate
AppendVector
Clamp
TextureSample
Constant3vector
Multiply
Constant
그래프에서 Constant 노드를 선택한 다음 우클릭하고 드롭다운에서 복제하기(Duplicate)를 선택합니다. 또 하나의 Constant 노드가 첫 번째 노드 위에 나타납니다. 복제된 노드를 원본 아래로 옮깁니다.
Multiply 노드를 복제합니다.
LinearInterpolate(Lerp) 노드를 복제합니다.
그래프의 상단 Constant 노드를 선택한 다음 0.7이라는 기본값을 추가합니다.
노드를 우클릭하고 드롭다운에서 파라미터로 변환을 선택합니다. 파라미터를 IconScaleX로 명명합니다. 이 노드가 아이콘 X 좌표의 스케일 크기를 제어하게 됩니다.
그래프의 하단 Constant 노드를 선택한 다음 0.7이라는 기본값을 추가합니다.
노드를 우클릭하고 드롭다운에서 파라미터로 변환(Convert to Parameter)을 선택합니다. 파라미터를 IconScaleY로 명명합니다. 이 노드가 아이콘 Y 좌표의 스케일 크기를 제어하게 됩니다.
IconScaleX 파라미터 노드에서 드래그하여 AppendVector 노드의 A 입력에 연결합니다.
IconScaleY 파라미터 노드에서 드래그하여 AppendVector 노드의 B 입력에 연결합니다.
파라미터 노드를 통해 설정된 IconScaleX 및 IconScaleY 값은 머티리얼 인스턴스로 바꾸면 머티리얼 외부에서도 제어가 가능합니다.
이제 머티리얼 함수 노드를 생성하여 머티리얼에 아이콘 UV의 스케일을 조절하는 기능을 추가해야 합니다.
머티리얼 함수 구성하기: UI_Scale
이 단계에서는 머티리얼 함수를 생성하고 이 노드와 함께 사용할 함수를 찾는 방법을 알아봅니다.
그래프에서 우클릭하고 검색창에 MaterialFunction을 입력합니다. 드롭다운에서 MaterialFunctionCall을 선택합니다. 그래프에 MaterialFunctionCall 노드가 나타납니다.
디테일 패널에서 머티리얼 함수 드롭다운 메뉴를 클릭하고 검색창에 UI_Scale을 입력한 뒤 드롭다운에서 MF_UI_Scale을 선택합니다. MaterialFunctionCall 노드가 UI Scale 노드로 바뀝니다.
UI_Scale 함수를 사용하면 머티리얼 함수를 통해 아이콘의 UV 스케일을 늘리거나 줄일 수 있습니다. 머티리얼 함수는 머티리얼 함수 노드를 통해서만 머티리얼에 사용할 수 있습니다.
아이콘 UV 구성하기
다음으로 파라미터에서 정보를 가져오고 UI 스케일 조절 시 스케일이 적용될 머티리얼에 아이콘과 아이콘 컬러를 추가해야 합니다.
TextureCoordinate 노드에서 드래그하여 MF_UI_Scale 노드의 UVs (V2) 입력에 연결합니다.
AppendVector 노드에서 드래그하여 MF_UI_Scale 노드의 Scale (V2) 입력에 연결합니다.
MF_UI_Scale 노드의 Result 핀에서 드래그하여 Clamp 노드의 흰색 입력에 연결합니다.
Texture Sample 노드를 선택하여 디테일 패널에서 노드 옵션을 엽니다.
텍스처 드롭다운을 엽니다.
검색창에 'icon'을 입력합니다.
드롭다운에서 아이콘을 선택합니다.
Clamp 노드의 흰색 핀에서 드래그하여 Texture Sample 노드의 UVs 입력에 연결합니다.
Texture Sample 노드의 RGB 핀에서 드래그하여 첫 번째 Multiply 노드의 A 입력에 연결합니다.
Texture Sample 노드의 A 핀에서 드래그하여 첫 번째 Multiply 노드의 B 입력에 연결합니다.
Texture Sample 노드의 A 핀에서 드래그하여 두 번째 LinearInterpolate(Lerp) 노드의 Alpha 입력에 연결합니다.
첫 번째 Multiply 노드에서 드래그하여 두 번째 Multiply 노드의 B 입력에 연결합니다.
Constant3Vector 노드를 선택하여 디테일 패널에서 노드 옵션을 엽니다.
상수(Constant) 필드를 클릭하면 색상환이 열립니다.
색상환에서 아이콘 컬러를 선택합니다.
Constant3Vector 노드의 흰색 핀에서 드래그하여 두 번째 Multiply 노드의 A 입력에 연결합니다.
두 번째 Multiply 노드의 흰색 핀에서 드래그하여 첫 번째 LinearInterpolate(Lerp) 노드의 B 입력에 연결합니다.
첫 번째 Multiply 노드의 흰색 핀에서 드래그하여 첫 번째 LinearInterpolate(Lerp) 노드의 Alpha 입력에 연결합니다.
첫 번째 Multiply 노드의 흰색 핀에서 드래그하여 두 번째 LinearInterpolate(Lerp) 노드의 B 입력에 연결합니다.
첫 번째 LinearInterpolate(Lerp) 노드의 흰색 핀에서 드래그하여 메인 머티리얼 노드의 최종색 입력에 연결합니다.
이제 머티리얼 프리뷰 창에 아이콘이 나타납니다.
이제 프로그레스 바의 마스크를 구성해야 합니다. 이 작업은 아래 gif처럼 머티리얼 중에서 처치 수 증가에 해당하는 부분만 노출하는 방식으로 이뤄집니다.
프로그레스 바 마스크 구성하기
머티리얼의 마지막 단계는 프로그레스 바를 위한 마스크 생성하기입니다. 이를 위젯이나 시퀀서에서 호출하면 UI 머티리얼에 애니메이션을 적용할 수 있고, 플레이어가 적을 처치할 때마다 프로그레스 바가 머티리얼 컬러로 채워집니다.
먼저 다음 노드를 추가할 공간을 만들어 줍니다. 그래프를 클릭하고 넓게 드래그하여 기존 노드를 모두 선택하고, 한꺼번에 왼쪽으로 옮겨줍니다.
마스크 구성을 두 번째 LinearInterpolate(Lerp) 노드에 연결해야 합니다. 두 번째 LinearInterpolate(Lerp) 노드를 선택하고 메인 머티리얼 노드를 향해 오른쪽으로 옮깁니다. 여기까지 수행하면 아래와 같은 노드 구성이 만들어져야 합니다.
이미지를 클릭하면 확대됩니다.
머티리얼의 이 섹션에서는 컨테이너의 X 및 Y 좌표를 기준으로 머티리얼의 프로퍼티를 마스킹해야 합니다. 이 좌표는 플레이어의 처치 수가 증가할 때 머티리얼을 노출시키는 데에도 사용됩니다.
그래프 영역을 우클릭하여 그래프에 다음 노드를 추가합니다.
Constant
ConstantBiasScale
LinearGradient
Step
Multiply
Constant 노드를 선택한 다음 노드를 우클릭하고 드롭다운에서 복제하기를 선택합니다.
첫 번째 Constant 노드를 선택하고 값을 5.0으로 설정합니다.
노드를 우클릭하고 파라미터로 변환을 선택합니다.
파라미터를 TrackerProgress로 명명합니다.
이 파라미터는 UMG 및 시퀀서에서 플레이어의 처치를 추적하고 컨테이너의 머티리얼을 노출시키는 데 사용됩니다.
TrackerProgress 노드의 흰색 핀에서 드래그하여 ConstantBiasScale 노드에 연결합니다.
ConstantBiasScale 노드를 선택하고 디테일 패널에서 바이어스 값은 0으로, 스케일은 0.1로 설정합니다. 이렇게 하면 TrackerProgress가 추적기의 0~10 값으로 정규화됩니다.
ConstantBiasScale 노드에서 드래그하여 Step 노드의 Y 입력에 연결합니다.
LinearGradient 노드의 VGradient 핀에서 드래그하여 Step 노드의 X 입력에 연결합니다.
Step 노드의 흰색 핀에서 드래그하여 Multiply 노드의 B 입력에 연결합니다.
두 번째 Constant 노드를 선택하고 값을 0.9로 설정합니다.
그래프에서 우클릭하고 검색창에 MaterialFunctionCall을 입력합니다.
머티리얼 함수 노드를 선택하여 디테일 패널에서 노드 옵션을 엽니다.
검색창에 UI_SDF_Circle을 입력합니다.
드롭다운에서 UI_SDF_Circle을 선택합니다.
이 머티리얼 함수는 상수 노드를 통해 컨테이너의 크기를 제어하고 머티리얼 컨테이너의 형태를 결정합니다. 여기에서 컨테이너는 원형입니다.
두 번째 Constant 노드에서 드래그하여 MF_UI_SDF_Circle 노드의 Size (S) 입력에 연결합니다.
MF_UI_SDF_Circle 노드의 Fill 핀에서 드래그하여 Multiply 노드의 A 입력에 연결합니다.
Multiply 노드의 흰색 핀에서 드래그하여 두 번째 LinearInterpolate(Lerp) 노드의 A 입력에 연결합니다.
두 번째 LinearInterpolate(Lerp) 노드의 흰색 핀에서 드래그하여 메인 머티리얼 노드의 오파시티(Opacity) 입력에 연결합니다.
이것으로 머티리얼 작업이 완료되었습니다. 완성된 노드 구성은 아래 이미지와 같아야 합니다.
이미지를 클릭하면 확대됩니다.
이 머티리얼을 UMG에서 사용하려면 머티리얼 인스턴스로 변환해야 합니다. 머티리얼 인스턴스의 파라미터는 오버라이드가 가능하며 켜고 끌 수 있습니다. 또한 UMG 및 시퀀서에서 호출하여 머티리얼이 사용되는 UI에 애니메이션을 적용할 수 있습니다.
머티리얼 인스턴스는 생성하는 방법은 다음과 같습니다.
콘텐츠 브라우저에서 머티리얼 섬네일을 우클릭합니다.
드롭다운에서 머티리얼 인스턴스 생성(Create Material Instance)을 선택합니다.