image.png

뚫려있는 원의 위치는 TutorialHighlighting 클래스에 있는 HighlightStart 함수에 FHighlightingInfo를 전달하여 조정합니다.

구조체의 정보는 아래와 같습니다.

USTRUCT(BlueprintType)
struct ABYSSDIVERUNDERWORLD_API FHighlightingInfo
{
	GENERATED_BODY()

	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	FAnchors Anchors;
	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	FVector2D Offset;
	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	float Multiply = 1.0f;

	FHighlightingInfo() {};
	FHighlightingInfo(const FAnchors& NewAnchors, const FVector2D& NewOffset, float NewMultiply = 1.f)
		: Anchors(NewAnchors), Offset(NewOffset), Multiply(NewMultiply) {
	};
};

사용방법

image.png

사용하시는 튜토리얼 위젯에

사진처럼 WBP_TutorialHighlighting을 배치하고

(예시로 PlayerStatusWidget에 추가해놓은 것입니다)

위젯 설정은 아래 사진처럼 설정해주어야 합니다.

변수 여부 체크 + 앵커 설정 + 슬롯 위치/정렬 값 설정

image.png

image.png

블루프린트 사용

image.png

블루프린트에서 사용하시려면 위에처럼 사용해주시면 됩니다.

Anchor와 Offset은 위젯 블루프린트 에디터에서 앵커 설정해보면서 확인한 값을 넣어주시면 됩니다.

image.png

처음에 Highlight Start 꺼내면 Info 핀만 있는데 구조체 핀 분할 하시면 위에처럼 돼요.

C++ 사용

C++에서 사용하시려면 위젯 바인딩을 해주고 아래처럼 사용하면 됩니다.

.h
class UTutorialHighlighting;

UPROPERTY(meta=(BindWidget))
TObjectPtr<UTutorialHighlighting> HighlightingWidget

//C++에서 위젯 바인딩 시 블루프린트 에디터 그래프에서는 WBP_PlayerStatusWidget이 뜨지 않습니다. 
//혹시 C++ 바인딩도 하고 블루프린트에서도 사용해야한다면 저 찾아와주세요.

.cpp

FAnchors InAnchors = FAnchors(0.f, 0.f, 0.f, 0.f); //좌상단
//FAnchors(0.f, 0.f, 0.f, 0.f); //좌상단
//FAnchors(1.f, 0.f, 1.f, 0.f); //우상단
//FAnchors(0.f, 1.f, 0.f, 1.f); //좌하단
//FAnchors(1.f, 1.f, 1.f, 1.f); //우하단
//FAnchors(0.5f, 0.5f, 0.5f, 0.5f); //가운데
FHighlightingInfo OxygenUIHighlightInfo(InAnchors , FVector2D(50.0f, 150.0f), 2.0f);
//기본 사이즈 사용 시 사이즈는 생략

HighlightingWidget->HighlightStart(OxygenUIHighlightInfo); //하이라이트 시작
HighlightingWidget->HighlightEnd(); //하이라이트 종료