전체 글 (9) 썸네일형 리스트형 언리얼 엔진5로 umg 구현하기(8) : umg 애니메이션 이전에 만들어두었던 hud씬을 기반으로 동적ui 애니메이션을 제작해보았습니다. 창-애니메이션을 열면 오른쪽과 같은 애니메이션 작업창이 뜹니다. 저는 미리 해두었고 이것을 기반으로 기록해둘 것입니다. 위 + 애니메이션을 클릭해서 "Open"이라는 이름을 작성해주면 이 위젯bp에 속할 시퀀스가 오른쪽과 같이 생성됩니다. 처음 게임에 입장할때 등장하는 UI 애니메이션을 해볼 것이기에 Open이라는 이름으로 정했습니다. fps는 필요에 따라 변경하고 보기 편하게 설정해주기 위해 [시간을 다음으로 표시]에서 NDF Timecode로 설정해주었습니다. 이제 hud에서 UI가 가려져있다가 나오는 애니메이션을 만들어보겠습니다. 각 위치를 묶은 캔버스의 조상 위젯인 캔버스패널의 랜더 오퍼시티를 0으로 설정합니다. 시퀀스.. 브릭시티(Brixity) UI 분석 언리얼 엔진5로 umg 구현하기(7) : umg 배치하기(4) 영역 4 다음은 영역 4번인 EXP와 카메라 등 정보가 있는 부분입니다. 영역에 맞게 캔버스를 넣어줍니다. 먼저, EXP정보와 시간, 와이파이, 배터리 정보 부분을 가로정렬로 하기 위해 호리즌탈 박스를 사용했습니다. 와이파이 상태에 따라 이미지가 달라지므로 변수 체크를 해주었습니다. 그리고 배터리의 게이지는 'Progress Bar'를 사용했습니다. 디테일 설정은 배터리 BG에 맞춰 설정해주었습니다. 프로그레스 퍼센트가 1이었을 때, 적절하게 맞도록 설정해주었습니다. 이번에는 카메라 버튼입니다. 시점이 1,2,3으로 구성되어 있고 각 번호마다 라이트, 카메라 번호, 텍스트가 다르기 때문에 따로 bp를 생성하여 child widget 중, 선택된 위젯을 출력하는 widget switcher를 사용했습니다... 언리얼 엔진5로 umg 구현하기(6) : umg 배치하기(3) 영역3 ! 아이콘은 보스 위치를 가르키는 아이콘으로 화면 내 위치가 랜덤으로 작용할 것 같습니다. 그래서 영역3을 한 번에 잡았었는데 2부분으로 나누는 게 더 좋을 것 같습니다. 영역3과 3-1로 나누겠습니다. 캔버스 영역을 잡아줍니다. 스킬 버튼 배치를 해보겠습니다. 지금까지 했던 방식으로 버튼을 만들어도 되지만, 스킬테스트나 장착 화면에도 똑같이 적용되는 것을 고려했을때 동일한 위젯만 사용하면 되니까 bp로 만들어두면 추후 작업이 편할 것 같습니다. 또한, 이펙트나 쿨타임도 버튼마다 적용되야할 것도 생각해보면 마찬가지로 bp로 만드는 것이 유용할 것 같습니다. 상단의 패티브 스킬3개(파란)와 하단 액션 스킬은 같은 버튼 이미지를 사용하지만 액션은 쿨타임이 없어 독립적으로 만들어주겠습니다. 이펙트나 쿨.. 언리얼 엔진5로 umg 구현하기(5) : umg 배치하기(2) 영역2 캔버스 앵커를 오른쪽 위로 설정하고 Alignment(얼라인먼트) x값을 1로 설정해 영역을 설정합니다. Horizontal Box를 넣고 각 아이콘을 오버레이로 묶습니다. 여기서도 추후 업데이트를 고려하여 'size to content'를 체크해줍니다. 시안에서 볼때 알림 뱃지가 붙어있는데 이것은 모든 아이콘에 해당됩니다. 그래서 이 알림 뱃지를 공통화해주어야 합니다. 뱃지 이미지는 평소에는 꺼져있다가 어떠한 변화가 생기면 나타나는 이미지입니다. 그래서 이미지에 변수 체크를 해주고 평소에는 꺼져있다가 변화가 생길때 나타나게 해주기 위해 이미지의 Visibility(비지빌리티)는 Collapsed(컬랩스)로 설정해줍니다. 여기서 프로그래머분들에게 이미지가 켜질때는 hit-Testable(힛테스터블.. 언리얼 엔진5로 umg 구현하기(4) : umg 배치하기(1) 본격적으로 umg 배치를 시작해보겠습니다. * 배우는 과정이므로 미숙한 부분이 있을 수 있습니다. 앞으로 배우면서 수정 및 개선을 해나가도록 할 것입니다. 아래 시안에서 영역을 나눈 것을 기반으로 캔버스를 만들어줍니다. 클라이언트가 반복해서 낭비하는 작업을 하는 것을 방지하기 위해 캔버스는 필요할 때만 만들어줘야 합니다. 먼저 1번 영역부터 해보겠습니다. 영역별로 만든 뒤에 설명을 작성하는 방식으로 진행하였습니다. 영역1 - 프로필 먼저, 프로필이 있는 캔버스부터 해보겠습니다. 이 부분은 버튼이 따로 없고 변수만 있는 영역입니다. 순수 이미지인 프로필과 배경을 우선 배치해줍니다. 이미지 자체에 기능이 있는 것이 아니기때문에 '비지빌리티'에서 'non Hit-Testable(self only)[ 힛 테스터.. 언리얼 엔진5로 umg 구현하기(3) : 기초 개념 공부하기 언리얼은 위 화면에다 직접 만드는 것이 아니라 별개의 파일로 제작하고 프로그래밍적인 세팅을 통해 연결돼서 본 게임 카메라가 보는 화면 위에 umg로 제작한 UI를 띄워주는 것입니다. 여기서의 프로그래밍적인 세팅은 프로그래머가 하는 일로 알아둡니다.. 그리고 실수로 팔레트를 껐을 때는 '창'에 가서 다시 켜주면 됩니다. 모두 제대로 배치해 완성됐다고 생각했는데 재생해보니 앵커나 화면 비율, 뷰포트 등 많은게 엉망이었습니다.. 이래서 처음부터 주요 개념은 제대로 이해해야 합니다. 그래서 저는 다 제작했지만 다시 프로젝트를 생성해서 처음부터 해보기로 했습니다... 언리얼을 독학해보며 몸소 시행착오를 겪으며 차근차근 단계를 밟아갈 수 있어 오히려 좋습니다 ㅎㅎ.. 그래서 이번에는 기초 개념을 잡아가며 세팅하는 .. 언리얼 엔진5로 umg 구현하기(2) : 리소스 준비 리소스의 이름은 구분하기 쉬운 단어로 작성해줍니다. 리소스는 재활용될 수 있기때문에 미리 잘 분류해두고 관리하는 것이 좋습니다. 여기서 중요한 것은 리소스의 크기입니다. 기기 별로 압축을 지원하는 크기(압축 기술의 제약)가 다르지만 공통적으로 2의 배수 정사각형일 경우 안전합니다. [ 16x16, 32x32, 64x64, 128x128 ~ ] 2의 배수가 아닐 경우, 엔진에서 강제적으로 개별 텍스쳐가 차지하는 공간을 큰쪽으로 가까운 2의 배수로 늘리게 되는데 이로 인한 낭비가 생깁니다. 그것을 방지하기 위해 이미지 텍스쳐의 크기는 기본적으로 2의 배수로 맞춰줍니다. 예> 미사용 픽셀 없는 350x350 텍스쳐를 만들었다고 가정했을 때, 엔진에서 내부 작업 수행으로 큰 숫자인 512x512에 원본만큼 복사.. 언리얼 엔진5로 umg 구현하기(1) : 기본 세팅 제가 디자인한 UI시안으로 ue5의 umg에 구현해보았습니다. 그 과정의 기록과 공부한 내용을 정리해두었습니다. 지금부터 시작해보겠습니다. 콘텐츠 드로어(콘텐츠 폴더)를 열고 모든 리소스를 담을 UI폴더를 생성합니다. Fonts에 폰트를, Resource에 리소스를, WidgetBP에 umg파일을 넣습니다. Resource에 리소스를 분류하여 넣을 파일을 미리 만들어줍니다. WidgetBP에는 Scene파일을 만들어줍니다. 여기서 UI를 출력하기 위한 위젯 블루프린트(widget buleprint)를 생성할 것입니다. 사용자 위젯(User Widget)을 선택하면 위젯 블루프린트, umg가 생성됩니다. 1. 팔레트: 위젯리스트 출력 [ 조립 부품 출력 ] 2. 계층구조: 현재 배치된 위젯의 관계도 [ 포.. 이전 1 다음
