언리얼/라이라 프레임워크로 오버워치 만들기8 [UE5 라이라(Lyra) 샘플로 오버워치 만들기] 8. 설정 UI 바꾸기(2) Lyra 세팅 UI 커스터마이징 (2) - 패널 텍스트 수정하기지난 시간에 이어서 이번에는 세팅 패널의 텍스트를 수정해보겠습니다.기존에는 배경과 텍스트 모두 밝은 색이라,글자가 잘 보이지 않는 문제가 있었죠.오늘은 이 문제를 해결해보겠습니다! 1. 리스트 엔트리 백그라운드 수정먼저 W_SettingsPanel 위젯으로 갑니다.ListView_Settings를 확인해보니 Entry Widget Class가 W_SettingsListEntry_Missing으로 설정되어 있었습니다. 👉 이 W_SettingsListEntry_Missing 위젯을 수정해주겠습니다. W_SettingsListEntry_Missing 위젯 살펴보기구조를 보면, 백그라운드는Background 위젯 안에 있는W_SettingEn.. 2025. 6. 9. [UE5 라이라(Lyra) 샘플로 오버워치 만들기] 7. 설정 UI 바꾸기(1) Lyra 세팅 UI 커스터마이징 해보기이번 시간에는 Lyra 샘플 프로젝트의 Setting UI를 커스터마이징해보겠습니다. Setting UI는 어디에 있을까?먼저, W_LyraFrontEnd 블루프린트를 살펴보면,"설정" 버튼을 누를 때 W_LyraSettingScreen 위젯이 Push되는 것을 확인할 수 있습니다.그래서 이번 작업의 메인 대상은 W_LyraSettingScreen 위젯입니다. W_LyraSettingScreen 위젯 W_LyraSettingScreen 수정하기W_LyraSettingScreen 위젯은 대략 이런 구조를 가지고 있습니다.1. 세팅 탭(Tab) 정렬 변경TabSZ를 **좌측 정렬(Left Align)**로 변경했습니다. 먼저 세팅 탑 탭을 먼저 수정해보겠습니다. TabS.. 2025. 6. 3. [UE5 라이라(Lyra) 샘플로 오버워치 만들기] 6. 플레이 선택 UI 바꾸기 플레이 버튼 UI 커스터마이징하기오늘은 언리얼 엔진 프로젝트에서 플레이 버튼을 눌렀을 때 등장하는 UI를 커스터마이징해보겠습니다. 플레이 버튼을 누르면 어떤 UI가 나올까?플레이 버튼을 클릭하면, W_ExperienceSelectionScreen 위젯이 UI.Layer.Menu에 Push되는 구조로 되어있습니다.따라서 우리가 수정할 대상은 W_ExperienceSelectionScreen 위젯입니다. W_ExperienceSelectionScreen 위젯 W_ExperienceSelectionScreen 위젯은 다음과 같은 구조로 되어 있습니다.전체적인 구성은 이미 완성되어 있기 때문에, 이번에는 텍스트와 폰트 스타일 위주로 변경을 진행합니다. 수정 사항메인 메뉴 텍스트 변경기존 메인 메뉴 텍스트를 ".. 2025. 5. 27. [UE5 라이라(Lyra) 샘플로 오버워치 만들기] 5. 메인 메뉴 버튼 바꾸기 [Lyra 커스터마이징] 메인 메뉴 버튼 꾸며보기!지난 시간에는 메인 프론트엔드 UI의 구조와 스타일을 수정해봤습니다.이번 포스팅에서는 메인 화면의 메뉴 버튼을 직접 커스터마이징해볼게요.디자인 변경뿐 아니라 호버(hover) 애니메이션까지 적용해보겠습니다! 사용 중인 버튼 위젯은?Lyra의 메인 메뉴 버튼을 확인해보면 W_LyraMenuButton 위젯이 사용되고 있습니다. 📌 레퍼런스 뷰어로 확인해보면 이 위젯은 여러 곳에서 사용되고 있기 때문에직접 수정하지 말고 복사해서 새 위젯으로 작업하는 것이 안전합니다. 새 위젯 만들기W_LyraMenuButton을 복사해서 W_JHMenuButton이라는 새 위젯을 생성합니다.기본 UI는 아래와 같이 생겼어요:1. 불필요한 UI 제거✅ 먼저 PreConst.. 2025. 5. 23. [UE5 라이라(Lyra) 샘플로 오버워치 만들기] 4. 메인 프론트엔드 바꾸기 Lyra 메인 화면 UI를 커스터마이징 해보자이번 포스팅에서는 Lyra Starter Game의 메인 화면 UI를 커스터마이징해보는 과정을 소개드릴게요.로비 UI의 구조를 이해하고, 실제로 화면을 바꾸는 데 필요한 설정과 위젯 변경까지 함께 해볼게요 메인 UI는 어디서 생성될까?먼저 B_LyraFrontEnd_Experience 블루프린트를 열어보면, GameState에 B_LyraFrontendStateComponent가 추가된 걸 확인할 수 있어요.이 컴포넌트를 보면 MainScreenClass라는 UPROPERTY를 가지고 있죠. UI를 생성하는 함수는?void ULyraFrontendStateComponent::FlowStep_TryShowMainScreen(FControlFlowNodeRef .. 2025. 5. 12. [UE5 라이라(Lyra) 샘플로 오버워치 만들기] 3. Lobby Background 바꾸기 L_JHOverwatchBG 백그라운드 배경 레벨 세팅 및 시퀀스 적용하기 배경으로 사용할 레벨 다운로드원하는 무료 또는 상용 배경 레벨 에셋을 Fab에서 다운로드합니다.에디터 상단 메뉴에서 “Add to Project” 버튼을 눌러 내 프로젝트에 추가하세요. 저는 이번에 다운로드한 맵을 배경으로 사용했습니다. 프로젝트 내부에 맵 파일 배치 및 이름 변경Content Browser 에서폴더를 찾아 들어갑니다.Plugins/ShooterMaps Content/Maps다운로드된 레벨(.umap)을 이 폴더 안에 드래그&드롭하여 복사하세요.복사한 레벨의 이름을 L_JHOverwatchBG 로 변경합니다. . 로비 배경용 데이터 에셋 수정Content/Plugins/ShooterMaps Content폴더로 이.. 2025. 5. 5. 이전 1 2 다음
