About Tutorial

튜토리얼을 만드는 작업이 상당히 어렵게 느껴졌습니다. 기능을 구현하는 것이 어려운 것 보다 어떻게 표현하는게 좋은 방법일지 정하는게 문제였습니다. 어떻게 하면 사용자에게 정보를 잘 전달할 수 있을지 생각을 많이 했습니다.

튜토리얼의 진행 방향성

저는 플레이 중 멈추는 튜토리얼 보다 실시간으로 정보가 주어지는 튜토리얼 쪽이 더 좋은 튜토리얼이라고 생각했습니다. 주어진 정보를 바탕으로 실시간으로 사용자가 따라해볼 수 있었기 때문입니다. 그래서 제가 생각한 방식들은 모두 게임은 진행 상태일 것을 전제로 했습니다.

1안 - 글자 띄우기

2안 - GIF를 이용한 방법

UE4의 외부 플러그인으로 Gif를 재생할 수 있게 해주는 툴을 발견했습니다. 이 툴을 이용하여 Gif로 예시를 보여주면 사용자에게 더 좋게 보여질 것으로 생각하고 CSV 파일에 에셋의 주소를 넣고 비동기 로드를 하는 시도를 했습니다. 하지만 제가 Gif에 대해 잊고 있던 사실이 있었습니다. 기본적으로 Gif는 용량이 큽니다. 이 큰 에셋을 비동기 로드할 경우, 튜토리얼 UI는 출력됐지만 Gif는 화면에 표시되지 않는 경우도 생길 수 있습니다. 결정적으로 이 플러그인으로 인한 오류가 심각 했습니다. 이 플러그인을 공부하지 않고 사용했기 때문에 일어난 일입니다. VS 디버거로 메모리를 추적할 수 없지만 Nullptr에 접근해서 Crash를 일으켰습니다. 이 단점들로 인해 이 방법도 포기 했습니다.

3안 - 간단한 텍스트 메시지를 만들기

작동 원리

3번을 바꿨지만 작동되는 원리는 변하지 않았습니다.

• 튜토리얼 메시지들은 모두 CSV파일로 저장을 했습니다.

TutorialNotify.h

UENUM(BlueprintType)
enum class ENotifyType :uint8 
{

	E_None=0 UMETA(DisplayName = "None"),
	E_AttackInput UMETA(DisplayName = "AttackInput"),
	E_ChargeAttack UMETA(DisplayName = "ChargeAttack"),
	E_Claymore UMETA(DisplayName = "Claymore"),
	E_FireBallTrap UMETA(DisplayName = "FireBallTrap")
    //생략
}
	
UCLASS()
class ESCAPEGAME_API ATutorialNotify : public AActor
{
protected:
    UPROPERTY(BlueprintReadOnly, Category = "Data", meta = (AllowPrivateAccess = true))
	TMap<ENotifyType, FName> SetOfTypesOfNotifications;
	UPROPERTY(BlueprintReadWrite, EditInstanceOnly, Category = "Data", meta = (AllowPrivateAccess = true))
	ENotifyType NotifyType;
    UPROPERTY(BlueprintReadOnly, VisibleAnywhere, Category = "DataTable", meta = (AllowPrivateAccess = true))
	class UDataTable* DT_Tutorial;

};

메시지의 종류를 enum으로 정의한 후 Editor에서 어떤 것을 알려줄지 정할 수 있게 했습니다.

Tutorialnotify.cpp

void ATutorialNotify::OnOverlapBegin(AActor * OvelappedActor, AActor * OtherActor)
{
    auto Player = Cast<AEGPlayerCharacter>(OtherActor);
	if (!Player)return;

	auto Controller = Cast<AEGPlayerController>(Player->GetController());
	if (!Controller)return;
    Controller->ShowTutorialMessage((uint8)NotifyType);
}

Player의 컨트롤러에 있는 Widget에게 어떤 메시지를 출력하는지 알려줍니다.

EGPlayerController.cpp

void AEGPlayerController::ShowTutorialMessage(uint8 TutorialMessage)
{
	auto tempData = DT_Tutorial->FindRow<FTutorialDataTable>(FName(*FString::FormatAsNumber(TutorialMessage)), FString(""));
	if (!tempData)
	{
		EGLOG(Error, TEXT(" Data Load FAiled"));
		return;
	}
}

CSV에서 해당되는 정보를 불러와서 Widget의 TEXT를 수정합니다.

어려웠던 점

2안의 Gif를 이용한 방식 때문에 일어난 버그를 잡아내는 것이 가장 어려웠습니다. VS디버거로 디버깅을 할 때, 중단점이 없더라도 nullptr에 접근할 경우 중단되는 지점과 Callstack을 통해 추적할 수 있었습니다. 하지만 이 경우는 그 방법이 안 통했습니다. 그래서 문제가 될만한 점을 찾기 위해 소거법으로 제거하면서 이 버그를 찾아내야 했습니다. 이상한 점은 PIE는 문제가 없지만 패키징을 하면 문제가 생겼던 점입니다. 이 점 때문에 더 혼란스러워서 찾아내는 데 오랜 시간이 걸렸습니다. 이 경험을 바탕으로 잘 모르는 플러그인은 사용하기 전에 꼭 내부 코드를 살펴봐야 한다는 교훈을 얻게 됐습니다.

---

Back to Planning & Implementation