위젯 블루프린트

출처 : https://youtu.be/sWWrcpf3WFQ?si=WjTEzQF-IOwV_O6V

 

목표

UI에서는 구성은 동일하지만 패널 사이즈,아이콘, 텍스트 등을 변형해서 사용해야하는 경우가 종종있다.

위젯 하나에 전부 만들어서 넣어도되지만 패널 사이즈가 변경이 된다면 하나씩 변경해줘야하는 번거로움이 생긴다.

기준이 될 위젯 프로퍼티를 파라미터화하고 해당 위젯을 상속 받은 후 자식 위젯에서 바꾸고 싶은 프로퍼티를 수정하면 해결이 가능하다.

 

새 위젯 생성

기준이 될 위젯을 생성한 후 레이어 구조는 아래와 같이 해준다.

Material

Image_Icon에 사용할 머티리얼을 생성해준다.

머티리얼을 사용하는 경우는 이미지 크기, 채도, 연출 등 다양하게 변형을 할 수 있고 파라미터 값을 위젯 프로퍼티에서 조절 할 수 있기 때문이다.

여기서는 이미지 교체와 스케일을 조절할 수 있게 해줄 것이므로 Icon과 Icon Scale를 파라미터로 변환을 해준다.

Icon Scale, Icon 파라미터로 변경

Image_Icon에 만들어 준 머티리얼 인스턴스를 연결해준다.

디자인쪽은 세팅이 완료됐다.

 

 

그래프

변수

변수를 위젯 프로퍼티에 노출시키려면 디테일에서 인스턴스 편집가능을 True로 변경해줘야한다.

 

Update Card Size

Event Pre Construct

컴파일을 하면 초기값으로 되돌려준다.

Set Width Override / Set Height Override

Size Box Pannel 가로,세로를 변경해준다.

 

Update Card Icon

Set Brush

Target에 Image Icon 레이어를 연결

Icon Brush에는 머티리얼을 인스턴스를 연결

머티리얼 파라미터를 위젯 프로퍼티로 조절가능하게 해준다.

Set Texture Parameter Value

텍스쳐와 스케일 파라미터를 조절할 수 있게 연결

Parameter Name에 파라미터 이름을 입력 

 

 

Update HeaderFont

Header Font

폰트 타입

Header Justification

텍스트 정렬

SetText

텍스트 변경

 

 

자식 위젯 생성

큰 카드를 만들어보자

상속받을 위젯을 생성하려면 부모 클래스로 위에 만들어놓은 위젯을 선택해준다.

 

디테일패널에서 프로퍼티를 변경해서 세로로 긴 카드를 만들어 준다.

 

출력 위젯 생성

큰 카드와 작은 카드를 배치할 위젯을 생성후 카드 위젯들을 배치해준 후 디테일쪽에서 프로퍼티를 변경해주면 끝이다.