1. 개요

참고로 하고있는 Assassin's Creed 시리즈를 보면 벽 뒤에 있는 적과 물건을 볼 수 있는 능력이 있다. 해당 스킬을 사용하면 범위 내 적들과 물건이 특정 색으로 보이고 스킬이 종료된 이후 몇초간 색은 지속된다. 해당 기능을 구현해보자.

2. 아이디어

2.1. 초기 아이디어(문제점)

postprocess를 이용해 custom depth이 활성화 된 객체를 보여주려 하였다. 하지만 custom depth을 이미 외곽선을 그리기 위해 사용하고 있어서 해당 기능을 구현할 방법을 찾기 힘들었다.

2.2. 최종 아이디어(문제 해결)

외곽선은 굳이 postprocess를 사용해 그릴 필요가 없으니 overlap material로 그려주고 postprocess를 사용해 벽 뒤의 액터를 그렸다.
구현 내용은 크게 바탕 색, 객체의 색, 스킬 범위가 있다. 바탕색은 스킬이 활성화 되었을 때 바꿔주고, 범위내에 있는 객체만 지정된 색으로 그려준다.

• 스킬 범위 지정
  • Radius: 범위의 반지름, float
    
• 배경 색
  • EnableBackground: Background color의 활성화를 토글하기 위한 변수, bool
    
• 객체 그리기
  • EnableColor: 객체 그리기를 활성화 하기위한 변수, bool
    

2.3. 실행 흐름

1. 스킬이 활성화 된다.
2. 백그라운드 컬러를 활성화 한다.
3. 객체 그리기를 활성화 한다.
4. 주변 객체들 중 EagleVisionComponent를 가지고 있는 객체를 찾아 배열에 저장한다.(이전에 저장해둔 객체들의 CustomDepth은 비활성화)
5. 배열에 저장된 객체들의 CustomDepth을 활성화 한다.
6. 스킬 활성화시 4~5를 반복한다.
7. 스킬이 비활성화 된다.
8. 백그라운드 컬러를 비활성화 한다.
9. 3초 뒤 객체 그리기를 비활성화 한다.

• 주요 소스 코드
  VisionComponent를 만들어 관리해주자.

  • ExcuteEagleVision: 스킬을 활성화/비활성화 하는 함수

    if(CanEagleVision)
    {
    	CanEagleVision = false;
    	//Postprocess 백그라운드 비활성화
    	if(EagleVisionPci == nullptr)
    	{
    		if(EagleVisionMat == nullptr) return;
    		EagleVisionPci = GetWorld()->GetParameterCollectionInstance(EagleVisionMat);
    	}
    	TargetEagleVisionRadius = 0.f;
    	EagleVisionPci->SetScalarParameterValue("EnableBackground", false);
    
    	//객체 그린건 3초 뒤 비활성화
    	GetWorld()->GetTimerManager().SetTimer(ColorDisableTimerHandle, FTimerDelegate::CreateLambda([&]()
    	{
    		EagleVisionPci->SetScalarParameterValue("EnableColor", false);
    	}), ColorDisableWaitTime, false); 
    }
    else
    {
    	CanEagleVision = true;
    	//Postprocess활성화
    	if(EagleVisionPci == nullptr)
    	{
    		if(EagleVisionMat == nullptr) return;
    		EagleVisionPci = GetWorld()->GetParameterCollectionInstance(EagleVisionMat);
    	}
    	TargetEagleVisionRadius = EagleVisionRadius;
    	EagleVisionPci->SetScalarParameterValue("EnableBackground", true);
    	EagleVisionPci->SetScalarParameterValue("EnableColor", true);
    }
    

3. 결과 화면