231128 Widget ItemShop 수업

언리얼용 버전관리

https://www.perforce.com/

Perforce Software | Development Tools For Innovation at Scale

UserWdiget으로 ItemShop C++클래스를 만들고   그걸로 WBP_ItemShop 을 만든다.

 

NPC.h

NPC.cpp

빌드후 NPC에 widget Ref를 설정하고 플레이후 다가가면 위젯이 나타난다.

 

Exit버튼을 선택하고 IsValiable체크하고 OnClick을 추가한다.

WBP_ITEMSHOP에 Graph에 다음과 같이 노드를 추가한다. Get Player Controller는  Game Player Category에서 잘 선택해서 Player Index 0가 나오는 걸로 한다.

버튼을 클릭하면 View를 Player Controll에서 현재 캐릭터 NPC로 옮겨준다 커서를 꺼주고 widget을 꺼준다.

컴파일후 플레이 해보면 Exit를 누르면 사라진다.

 

WBP_Item 블루프린트 UI>UserWidget을 만든다

다음과 같이 구성 SizeBox는 Auto에서 Fill로 변경

Button밑에 Image추가

먼저만든 WBP_ItemShop을 로딩해 UniformGrid Panel를 추가 ItemGrid로 이름변경 isVariable체크

WBP를 검색해 끌어다 놓으면 들어간다.

다지운다. 이걸 C++에서 할 예정

 

Pre-Construction:

• 'Pre-Construction'은 위젯이 생성되기 전에 호출되는 단계입니다. 이 단계에서 위젯은 아직 화면에 나타나기 전에 초기화되며, 구성 요소가 아직 화면에 배치되기 전에 설정해야 할 속성들을 다룰 수 있습니다. 예를 들어, 위젯의 초기 상태를 설정하거나, 변수를 초기화하거나, 다른 위젯 구성 요소들을 추가하기 전에 실행되는 단계입니다.

Construction:

• 'Construction'은 위젯이 실제로 화면에 생성되고, 렌더링되기 직전에 호출되는 단계입니다. 이 단계에서는 위젯의 시각적인 부분을 구성하거나, 데이터를 로드하여 표시할 준비를 하거나, 다른 위젯과의 상호작용을 설정할 수 있습니다. 화면에 보이기 전에 위젯의 초기화와 레이아웃 설정에 사용됩니다.

주요 차이점:

• 'Pre-Construction'은 위젯이 생성되기 전에 실행되고, 위젯의 초기 설정과 속성 초기화에 사용됩니다.
• 'Construction'은 위젯이 실제로 화면에 생성되기 직전에 실행되고, 시각적인 부분을 구성하거나 데이터를 로드하여 표시할 준비를 합니다.

 

ItemGrid선택하고 선택하고 IsVariable체크 그럼 이벤트그래프에 노출된다. Inherited Variables체크  끌어다 Add Child to Uniform Grid에 사용한다.

수업시간에는 Fetch가 뺘져있다 이상태애서는 위젯에 아이템이 안보일것 같다

ItemFetch가 추가되면

이벤트 그래프를 다음과 같이 구성한다. Create Widget을 추가하고 Class를 WBP_Item을 선택한다. Loop는 0~11, /%는3으로 나눠줘서 가로세로 4x4개식 나타나게 한다.

Slot Padding을5로 넣어 배치에 여유를 둔다

언리얼에서 Struct만드는 법 컨텐트드로워에서 우클릭후 Blueprint>Struct를 선택한다.

• C++ 구조체는 C++ 코드 내에서 정의되고 사용되며, 일반적으로 빌드 시간에 컴파일
• Blueprint 구조체는 시각적 Blueprint 툴에서 정의되고 사용되며, 런타임에 실행
• C++ 구조체는 프로그래머가 직접 C++ 코드로 작성하고 정의하며, 성능 측면에서 보다 최적화된 구조를 제공

Blueprint 구조체는 시각적이며, 프로그래밍에 익숙하지 않은 사용자들도 사용할 수 있으며, 더 빠른 프로토타이핑과 시각적 피드백을 제공

 

위 에셋의 그림을 끌어다 Texture에 넣어준다. 이후 이름과 Cost도 일일히 정해준다.

둘다 이름을 바꾸고 IsVariable체크

WBP_Item에서 ItemID변수 추가

ItemDetail추가

 

 

WBP_Item의 텍스트 2개를  IsVariable로 변경

get ItemID와 set ItemDetail추가 이벤트그래프에 추가

 

Button Image ItemThumNail로 이름 변경, Bind에서 ItemDetail->IconImage선택

 

 

 

NPC.h에 추가

Level NPC interaction에 추가

BP_NPC Items 가 생겨났다.

Level의 NPC인스턴스에 Items에 ItemDataTable의 이름을 넣어준다.

 

 

ItemShop.h에 추가

public:
	UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Shop")
	class ANPC* owenerNPC;

NPC.cpp에 owenerNPC=this 추가

void ANPC::OverlapBeginTB(UPrimitiveComponent* OverlappedComponent, AActor* OtherActor, UPrimitiveComponent* OhterComp, int32 OthterBodyIndex, bool bFromSweep, const FHitResult& SweepResult)
{
	GEngine->AddOnScreenDebugMessage(-1, 5.0f, FColor::Magenta, TEXT("Debug"));

	if (WidgetRef)
	{
		itemShopWidget= CreateWidget<UItemShop>(GetWorld(), WidgetRef);
		itemShopWidget->owenerNPC = this;
		if(itemShopWidget)itemShopWidget->AddToViewport();
	}

 

WBP_ItemShop

itemFetch 펀셩 작성 ItemShop *OwnerNPC변수를 만들었기때문에 이걸 가져온다. 이걸로 Widget에서 NPC로 접근가능하다.

입력변수를 하나 만들고 Is Valid Index와 연결해준다.

Owner NPC에서 items를 검색해 Get Items 노드를 추가하고 IsValidIndex를 추가한다. 아까 NPC.h에 추가했던 변수

Items 어레이 노드에서 Get(a copy)를 추가한다

Output에 RowName을 Name으로만들어 연결해준다.

False의 경우 Error를 출력한다.

ItemFetch라는 Function index를 넣으면 Item배열의 값을 출력하는 함수다 없으면 Error를 출력한다.

Event Graph에서 for문으로 index를 만들어 ItemFetch함수에 연결해준다.

기존 WBP_ItemShop 이벤트그래프에 추가해준다.

플레이 해보면 아이템이 없는 부분도 나타난다. 아이템이 없을 경우 안보이게 에러처리를 하겠다.

WBP_Item에 Error처리를 위해 노드를 추가해준다.

WBP_Item에 EmptySlot라는 Function을 만든다.

Designer의 Item Text를 끌어다 get으로 놓고 text를 검색해 contet 카테고리의 Set Text를 추가한다.

방금만든 EmptySlot Function을 ItemID가 Error일경우에 연결해준다

플레이해보면 아이템이 없는 부분은 없어진걸 알 수 있다.