[UE5] 속성메뉴 설계, 속성위젯 디자인 구현

 

1.AuraUserWidget 상속받은 WBP_프레임 만들기

sizebox만들기

사이즈설정 함수 만들기

위에 덮어쓸 오버레이, 이미지 추가

함수에서 이미지 설정

테두리 설정

글자 추가

 

2. 아래 위젯 만들기

sizebox 만들기

함수에서 값설정 650*60

속성이라고 표시

위에서 만든 FrameValue 넣기

여백 설정

+버튼 넣을 슬롯추가

3. WBP_TextButtonRow 만들기

를 상속받은 WBP만들기

오버레이넣기, 테두리넣기

버튼추가, 둥근테두리제거

노말, 호버, 눌렸을때 각각 이미지 설정!!

+ Text 추가

 

4. 아래 전체위젯 만들기

 

사이즈박스, 오버레이, 테두리생성

랩 박스

랩박스 패딩 => 테두리랑 안겹치게

Fill span less than => boarder의 가로805 보다 크면, 다음줄로 내려감!

여백추가

크기조정위해, 카테고리만들고 visible설정

크기조정

노가다로 위처럼 만들기

 

보조속성갯수만큼(10개) 스크롤박스에 넣기

배경이미지 설정

닫기 버튼 만들기1

닫기 버튼 만들기2

결과

 

5. 위의 버튼을 클래스로 만들어버리기

스탯창 띄우는 버튼 만들기

sizebox만들고, 크기설정 40*40

브러쉬 설정 : 보더이미지

 

4개 상태에 대해 브러쉬(이미지)설정

이부분을 채운것과 같음

버튼 아래에 X 추가

버튼의 내용을 함수에서 설정할수 있다

폰트도 함수내에서 설정가능

윤곽선 설정 in 그래프

폰트사이즈 기본값 설정

기존의 하드코딩된 버튼지우고 위에서 만든 버튼넣기

이 버튼을 활용해서 메뉴를 닫을수있고, 열수도 있다!

 

* 버튼 활용 예시

버튼 > visible 설정

하드코딩 버튼을 WBP_Button으로 대체, text만 바꾸면됨

 

 

* 버튼상속받은 넓은버튼 만들기

그래프에서 속성값만 바꾸면됨

보더브러쉬 없앰

노멀 브러쉬 와이드로 설정, 나머지 브러쉬도 와이드로 설정하셈

txt 변경

 

* 오버레이에 와이드버튼 추가

결과

 

* 버튼클릭하면, 속성위젯표시 구현

이런식으로 오버레이에 함수를 만들면됨

 

다음수업에서..