순위창 UI 제작

진행 순서

1. 시안 뽑기
디자인 레퍼런스 및 로고 느낌 주고 시안 제작 

 

2.시안을 보면서 부품 목록 뽑기

3. UMG에서 조립

 

 

아래처럼 하면 안됨

오류남 

추후 수정 예정

 

1. 이미지 부품 배치 (WBP_RankRow)

(1) Root를 Overlay로 감싸기
Overlay는 자식들을 같은 자리에 겹쳐 쌓는 패널

• Hierarchy에서 [Horizontal Box]를 우클릭 -> Wrap With -> Overlay 선택

 

(2) 배경 프레임 이미지 추가

• Palette 패널에서 Image를 검색해서 Overlay 바로 아래, Horizontal Box보다 위쪽(= 렌더링 순서상 아래 레이어)에 드래그 Overlay 안에서는 위에 있는 게 먼저 그려지고 아래 있는 게 나중에 덮어씌워지니까 Image가 Horizontal Box보다 위에 있어야 배경으로 깔림
• 이름을 RowFrame으로
• Details -> Appearance -> Brush -> Image 슬롯에 일반 행 프레임 텍스처 드래그해서 넣기
• Size 항목에서 Size to Content 체크 해제하고 Brush Size를 텍스처 원본 비율에 맞게 지정
  (또는 Overlay 자체의 Horizontal/Vertical Alignment를 Fill로 두면 자동으로 꽉 참)

(3) 배지 이미지 추가

• 등수 우클릭 -> Wrap With -> Overlay
• 그 Overlay 안에 Image 하나 추가 등수 TextBlock보다 위쪽에 위치시켜서 배경처럼 깔리게
• 이름을 BadgeImage로
• Brush에 무광 배지 연결

 

2. 1등 강조 (배지 교체)

WBP_RankRow의 SetRowData 함수 시그니처를 확장해야 함

 

SetRowData 함수 안에서

1. In Rank == 1을 비교하는 Branch 노드 추가
2. True (1등인 경우):
   
   • BadgeImage (Image) -> Set Brush from Texture로 5번 중 금색 배지 텍스처 연결
3. False (2등 이하):
   
   • BadgeImage -> In Rank가 2, 3이면 은/동, 4 이상이면 무광
4. 이 분기가 끝난 뒤 기존에 있던 텍스트 세팅 로직(이름/등수/시간)으로 이어지게 연결

 

 

줄 사이 간격 두기

 

 

완성