[Unreal] 텍스처 UV 머티리얼에서 분할하기

UI에서 사용되는 이미지를 각각의 Sprite로 관리하지 않고, 하나의 텍스처와 머티리얼을 사용하여 이미지의 특정 부분을 분할하여 사용하는 방식으로 최적화를 구현하였습니다.

텍스처 UV 머티리얼에서 분할 기능

• 머티리얼 인스턴스를 통해 이미지의 행과 열의 인덱스를 Parameter 로 입력하면, 하나의 텍스처에서 여러 이미지를 분할해 사용할 수 있도록 설정
• 이를 통해 개별 이미지가 아닌, 하나의 텍스처 파일로 여러 이미지를 관리할 수 있으며, 최적화를 통한 성능 향상을 기대할 수 있음

구현한 머티리얼 이미지

구현 과정

1. Material 구현

2. DataManager를 통하여 텍스처의 행(RowIndex)과 열(ColumnIndex) 정보를 가지고 온다.

• 해당 인덱스는 이미지가 텍스처 내에서 어느 위치에 있는지 지정해 주는 인덱스이다.

4. MaterialInstanceDynamic을 생성하고, DataManager를 통해 파싱한 인덱스를 기반으로 동적으로 머티리얼 인스턴스에 Parameter 값을 입력하고, 그 결과를 UI에 반영한다.

	if ( FItemTable_ModuleInfo* ModuleInfo = DataManager->TryGetModuleInfo(ModuleTypeName))
	{
		const int32 rowIndex = ModuleInfo->RowIndex;
		const int32 columnIndex = ModuleInfo->ColumnIndex;
		if(nullptr == SlotMaterialInstanceDynamic )
		{
			SlotMaterialInstanceDynamic = UKismetMaterialLibrary::CreateDynamicMaterialInstance(GetWorld(), SlotMaterialInstance);
		}
		if ( SlotMaterialInstanceDynamic )
		{
			SlotMaterialInstanceDynamic->SetScalarParameterValue(FName("RowIndex"), rowIndex);
			SlotMaterialInstanceDynamic->SetScalarParameterValue(FName("ColumnIndex"), columnIndex);
			PreviewImage->SetBrushFromMaterial(SlotMaterialInstanceDynamic);
		}
	}

결과

첫번째 텍스처를 아래의 텍스처와 같이 필요한 부분만 잘라서 사용할 수 있다 !