[언리얼] 학원 17일차: 버튼, RenderTexture

이전 글 보기

https://mountain-noroo.tistory.com/63

[언리얼] 학원 16일차: UMG: 언리얼 UI

 

 

버튼

버튼은 일반 탭에서 추가할 수 있고

노멀(Normal), 호버(Hover), 눌림(Press) 상태를 간단하게 설정해 줄 수 있다.

 

https://docs.unrealengine.com/5.1/en-US/API/Runtime/UMG/Components/UButton/

UButton

 

 

이벤트 추가

- OnClicked (버튼 클릭)

- OnHovered (버튼 위에 커서를 가져다 댐)

- OnUnhovered (버튼 위 커서를 해제함)

- OnPressed (버튼 누름)

- OnReleased (버튼 뗌)

 

다섯 가지 이벤트에 델리게이트를 등록할 수 있다.

충돌 이벤트 처리에서도 사용하였던 AddDynamic 매크로를 사용한다.

https://docs.unrealengine.com/5.1/ko/dynamic-delegates-in-unreal-engine/

다이내믹 델리게이트

 

UFUNCTION()
void StartBtnClicked();

UFUNCTION()
void StartBtnHovered();	

UFUNCTION()
void StartBtnUnHovered();

델리게이트 등록을 위한 함수는 UFUNCTION() 매크로를 붙여주어야 한다.

 

m_StartBtn->OnClicked.AddDynamic(this, &UStartHUD_Base::StartBtnClicked);
m_StartBtn->OnHovered.AddDynamic(this, &UStartHUD_Base::StartBtnHovered);
m_StartBtn->OnUnhovered.AddDynamic(this, &UStartHUD_Base::StartBtnUnHovered);

AddDynamic( UserObject, FuncName )

델리게이트를 추가한다.

 

 

애니메이션

Widget도 애니메이션을 간단하게 넣을 수 있다.

좌측 하단의 애니메이션 탭을 열면 창이 뜨는데

+애니메이션 버튼을 눌러 새 애니메이션을 추가할 수 있다.

 

+트랙 -> 모든 네임드 위젯 -> 원하는 위젯을 선택하여

그 위젯에 애니메이션을 추가해 줄 수 있다.

물론 위젯을 여러 개 추가하는 것도 가능하다.

 

+트랙 메뉴 아래에 바로 StartBtn이 보이는 것을 확인할 수 있는데

이는 계층 구조 창에서 위젯을 바로 트랙에 드래그 앤 드롭하면 보이는 것이고

사용하는 위젯이 많아졌을 때, 보다 간편하게 위젯을 추가할 수 있다.

 

추가할 트랙 옆에 또 +버튼이 있는데

여기서 세부 트랙을 추가할 수 있다.

여기서는 트랜스폼 프로퍼티를 추가하였다.

 

키프레임은 주황색 바를 움직여서 잡을 수 있다.

원하는 항목의 값을 변경하는 것으로 간단한 애니메이션을 만들었다.

여기서는 스케일이 1.2에서 1.0으로 줄어드는 애니메이션이 재생된다.

 

 

C++에서 애니메이션 재생

앞에서 등록한 델리게이트 함수에 애니메이션을 재생하는 기능을 구현해 본다.

void UStartHUD_Base::StartBtnHovered()
{
	UWidgetBlueprintGeneratedClass* pWidgetClass = GetWidgetTreeOwningClass();

	// Animations에서 애니메이션들을 가져올 수 있는데 TArray형태이기 때문에
    // 순회하며 원하는 이름의 애니메이션 찾아야 한다.
	for (int32 i = 0; i < pWidgetClass->Animations.Num(); i++)
	{
    	// 애니메이션 이름_INST로 등록 되어있다.
		if (TEXT("StartBtnHoveredAnim_INST") == pWidgetClass->Animations[i].GetName())
		{
        	// 애니메이션 재생
			PlayAnimation(pWidgetClass->Animations[i]);
			break;
		}
	}
}

OnHovered 이벤트에 등록한 함수이다.

StartBtnHoveredAnim에는 버튼이 1.2배로 커지는 애니메이션이 만들어져 있다.

이제 버튼에 마우스를 가져다 대면 버튼이 1.2배로 커지는 것을 확인할 수 있을 것이다.

 

 

다른 Level 이동

void UStartHUD_Base::StartBtnClicked()
{
	UGameplayStatics::OpenLevel(GetWorld(), TEXT("NewMap"));
}

게임 시작 버튼을 눌렀을 때 게임을 플레이할 레벨로 이동해야 한다.

다른 레벨로 이동하기 위해서는

UGamePlayStatic::OpenLevel(월드, 이동할 맵 이름) 함수를 호출하면 된다.

 

 

게임 종료

void UStartHUD_Base::EndBtnClicked()
{
	UKismetSystemLibrary::QuitGame(GetWorld(), GetWorld()->GetFirstPlayerController(), EQuitPreference::Quit, true);
}

게임 종료 버튼을 눌렀을 때 게임을 종료해야 한다.

게임을 종료하기 위해서는

UKismetSystemLibrary::QuitGame(월드, 게임을 종료할 플레이어, 종료 설정(백그라운드 모드 or 종료), 플랫폼 제한 무시 여부(ex PS4 게임은 절대 종료되어선 안된다)) 함수를 호출하면 된다.

 

 

InputMode

APlayerController* pController = GetWorld()->GetFirstPlayerController();

FInputModeUIOnly uimod;
pController->SetInputMode(uimod);
pController->bShowMouseCursor = true;

기본적으로는 GameOnly모드로 설정되어 있어 게임을 실행하면 마우스가 사라져 UI를 선택할 수 없어진다.

그래서 UI를 클릭하기 위해서는 모드를 따로 설정해주어야 한다.

 

InputMode의 종류에는

- FInputModeGameAndUI
- FInputModeGameOnly
- FInputModeUIOnly

세 가지가 있다.

 

 

RenderTexture

캐릭터를 캡처하여 프로필 사진으로 쓰기 위해 렌더 텍스처를 사용한다.

캐릭터 블루프린트 클래스의 컴포넌트 창에서 씬 캡처 컴포넌트 2D를 추가하면 렌더 카메라가 추가된다.

트랜스폼에서 위치를 적당히 조절하고

씬 캡처 탭에서 캡처 소스를 SceneColor(HDR) in RGB, SceneDepth in A로 설정하였다.

이는 RGB컬러는 HDR로 뽑고 A값은 Depth 즉 깊이값을 가져오겠다는 것이다.

 

그리고 우클릭 -> 텍스처 -> 렌더 타겟으로

렌더 타깃 텍스처를 생성하였다.

일단 크기값을 512x512 사이즈로 조정하였고 A채널을 사용하기 위해 랜더 타깃 포맷 값을 RGBA32로 설정하였다.

 

그리고 마테리얼도 하나 생성해 둔다.

우선 UI에 표시할 것이기 때문에 머터리얼 도메인을 User Interface로 표시한다.

 

이 부분은 렌더 타깃 텍스처를 가져와 A값(앞에서 깊이 값을 가져왔다.)이 500보다 큰지 그 이하인지에 따라 0 혹은 1을 출력하도록 하였다.

 

이 값을 원래 텍스처에 그대로 곱하면

1인 값만 나오고 0인 값은 사라지게 된다.

 

0인 부분에는 배경을 추가하기 위해 1-x 노드를 사용하여 값을 반전시켰고

이제 0으로 나온 픽셀값(깊이값이 500 값이 큼)이 1로 변환되고

1으로 나온 픽셀값(깊이값이 500 이하임)이 0으로 변환된다.

이 1-x로 변환된 값에 배경 값을 곱함으로써 거리가 멀어 날아간 곳에 대신 배경이 들어가게 되고

두 노드를 더함으로써

결국 캐릭터만 누끼 따진 것 같은 효과를 얻게 되는 것이다.

 

마지막으로 출력할 위젯의 이미지에 머터리얼을 할당해 주면 된다.