How to Create Cycle Buttons - Unreal Common UI Menu System #5

WBP_OptionRotator 만들기

CommonRotator

• 순환형 위젯 선택 (Option Selector)
• < > 버튼으로 여러 옵션을 돌려가며 선택 가능
• CommonButton 스타일처럼 지정 가능
  • CommonRotator 자체는 버튼이 아니지만 내부에 있는 버튼들이 CommonButtonStyle을 사용
  • Hover 시 색상 변화, 클릭 사운드, 눌림/비활성 상태 등 모두 CommonButtonStyle에 따라 자동 적용

[ < ]  Medium  [ > ]
이런 식으로 “여러 옵션 중 하나를 순환적으로 고르는” 역할

CommonRotator
 ├─ LeftButton  (CommonButton)
 ├─ Text_Display (현재 선택 옵션)
 ├─ RightButton (CommonButton)

ButtonStyle 설정하기

MyText 로 이름 바꾸고 변수 체크 → 컴파일 → 에러 사라짐

WBP_OptionCycle

User Widget 으로 만들기

• Horizontal Box
• Common Text → CT_OptionName

Spacer / WBP_MenuButton / WBP_OptionRotator 추가해서 틀 만들기

Common Text 왼쪽 정렬하기

CommonUI 기본 버튼들 : 대부분 텍스트 중앙 정렬 → 왼쪽 정렬 해야 레이아웃 자연스러움

OverrideHorizontalAlignment 변수를 만들기 → 디자이너에서 정렬을 쉽게 바꿀 수 있게 해둠

→ 지금은 기본값이 Left지만, 나중에 Center 와 Right로 변경해도 자동 반영됨

다른 위젯에서 사용 가능하도록 👁️ 누르기

WBP_OptionCycle 에서 정렬 가능

WBP_OptionCycle

Horizontal Box → Wrap with Common Border

Horizontal Box : Padding 0.0

Common Border Style : BorderStyle_Background

CT_OptionName Style : CommonTextStyle_MenuText

배열과 인덱스로 Common Rotator 사용하기

WBP_OptionCycle

Event Pre Construct

• 위젯이 생성될 때(디자인 타임/런타임 모두) 한 번 호출
• 여기서 로테이터의 옵션 목록과 초기 선택 값을 세팅

Populate Text Labels

• Labels 핀 → OptionsArray(Text 배열)를 넣어 로테이터의 표시 항목을 채움
• 결과: < >로 돌릴 때 순서대로 이 배열의 항목들이 표시됨.

Set Selected Item

• In Value 핀 → DefaultSelectedIndex(int)를 넣어 처음 선택될 인덱스를 지정
• 결과: 로테이터가 시작할 때 OptionsArray[DefaultSelectedIndex]가 선택된 상태로 표시됨

Options Array에 요소 채우기

Default Selected Index = 1

로테이터(CommonRotator)의 초기 선택 항목을 지정하기 위한 기본 인덱스 값

DefaultSelectedIndex 변수의 역할

이 변수는 아래 노드에서 사용 중이죠 👇

Set Selected Item (In Value = DefaultSelectedIndex)

“로테이터가 처음 시작할 때 몇 번째 옵션을 선택 상태로 표시할지”를 결정하는 변수

인덱스는 0부터 시작

배열(Array)은 0-based index, 첫 번째 항목이 0, 두 번째가 1

인덱스	항목(Text)
0	"Low"
1	"Medium"
2	"High"

1로 설정한 이유

대부분의 옵션 메뉴에서 가운데값(중간 설정, 예: Medium) 을 기본으로 잡는 경우가 많음

→ 여기서도 DefaultSelectedIndex = 1 로 설정

• OptionsArray 예시: [Low, Medium, High]
• DefaultSelectedIndex: 1
• 결과: 처음 로테이터가 열릴 때 "Medium"이 선택되어 있음

💡 추가 팁

이 구조를 Instance Editable로 두면, 다른 옵션 위젯(예: “그래픽 옵션”, “해상도 옵션”)에서도

디자이너 창에서 인덱스만 바꿔서 각각 다른 기본 선택값을 설정 가능