Unreal - 원형 프로그래스바(ProgressBar) 만들기

스택형 스킬의 UI를 최종 수정하기전 스택차징이된걸 시각적으로 표현하기위해

원형의 프로그래스바가 필요합니다

 

그럼 육각형 프로그래스바를 만들어보겠습니다

사용할 메테리얼과 메테리얼 파라미터 컬렉션을 만들어줍니다

 

Translucent / Unlit 설정

해당사진처럼 세팅해줍니다

무슨노드인지 직관적으로 나오지않는경우 코멘트창으로 무슨노드인지 적어두겠습니다(Ex)Scalar Parameter)

 

명명된 경유 선언 노드 추가

해당그림처럼 노드를 설정해줍니다

해당 노드구간을 한개 더 만들어줍니다

Constant3Vector노드와 Lerp노드를 꺼내줍니다

해당노드를 파라미터로 변환 해줍니다

이렇게 세팅해줍니다

 

밑의 parameter값의 V값을 바꾸면 Emmisive값의 변동이 가능해집니다

높을수록 많이 빛납니다

밑의 초록색 노드 두개를 추가해줍니다

아까만든 Circular Gradient와 ProgressBar를 연결해줍니다

이렇게 세팅해줍니다

전체노드

 

 

만든 메테리얼을 머티리얼 인스턴스 생성해줍니다

해당보이는것처럼 노드를 설정해줍니다

 

그러면 이제 위젯에서 프로그래스바의 값을 변경하기위해

임시값으로 줬던 1값 을 저희가 만든 머티리얼 파라미터 컬렉션으로 교체해줍니다(드래그앤드롭)

메테리얼 파라미터 컬렉션의 값을 수정해줍니다

Progress로 스칼라 파라미터 인덱스를 추가해줬습니다

드래그앤드롭으로 꺼내온 머티리얼파라미터 컬렉션 노드에 파라미터 이름을 아까만든 Progress 인덱스 이름으로 변경해줍니다

Add 노드와 다시 연결해줍니다

그러면 이제 메테리얼 파라미터 컬렉션의 Progress 값에 따라 만들어놓은 

프로그래스바의 값이 설정됩니다

 

이제 아웃풋노드의 머티리얼 도메인을 User Interface로 변경해줍니다

그러면 이제 저의 위젯에 추가해보겠습니다

이미지를 추가해줍니다

메테리얼으로 만든 메테리얼 인스턴스를 브러시밑의 이미지에 할당해줍니다

 

이제 만든 프로그래스바를 스택형이기때문에 6등분 해보겠습니다

잠시 위로 분리해주겠습니다

해당 노드들을 배치합니다

(중간중간 ProgressMask나 Segmentations노드들은 명령된 경유 노드입니다)

 

전체노드

ProgressBar위의 CircleGradient노드를 지워주겠습니다

아까 만들어놓은 ProgressMask경유노드와 연결해줍니다

노드들의 최종배치구도입니다

Segmentations노드도 불러와 세팅해줍니다

 

머티리얼 파라미터 컬렉션의 인덱스 Progress의 디폴트값이 바뀌면 6등분되었던

프로그래스바가 값이 나누어진 구역만큼 변경됩니다

머티리얼 파라미터 값이 변동되면 6등분된 구역만큼 프로그래스바값이 변동됩니다

 

최종결과물