UMG

Unreal5로 UI만들어보기/1) UMG 사용하기

UMG 6편 : 슬롯(slot) (1) - 패널(Panel)의 사용

언리얼에서 화면에 어떻게 배치할지를 정하는 기능 슬롯(Slot)에 대해서 살펴볼 건데요. 이를 제대로 사용하려면 패널 위젯(Panel Widget)의 특성을 이해하실 필요가 있습니다. 그래야 원하는 배치를 만들 수 있기 때문입니다. 그럼 지금부터 시작해 보겠습니다. 1. 위젯에 올 수 있는 자식의 수는? 일단 먼저 위젯을 좀 살펴보겠습니다. 위젯에 마우스를 올려 놓으면 해당 위젯의 설명과 함께 Single Child , Many Children , No Children 를 보실 수 있는데요, 여기서 자식(Child)이란 하이어라키에서 하위 요소로 올 수 있는 위젯의 수를 의미합니다. 아무것도 올 수 없거나(No Children), 1개만 올 수 있거나(Single), 다수(many)를 집어넣을 수도 있습..

Unreal5로 UI만들어보기/1) UMG 사용하기

UMG 5편 : 버튼 이벤트에 기능 텍스트 출력 기능 부여하기

곰곰히 생각해봤는데 이대로 끝내기엔 버튼 같지가 않으므로, 버튼에 텍스트 출력 기능을 하나 넣어 볼게요. 1. 버튼에 이벤트 연결하기 지난 시간에 만들어 둔 버튼이 생성된 위젯 블루프린트를 열어줍니다. 그리고 버튼을 선택 해 주세요. 버튼 이벤트를 생성해 보겠습니다. 디자이너 패널과 그래프 탭 모두에서 버튼 이벤트를 생성할 수 있습니다. 다만 반드시 '변수로 등록(Is Variable)'이 되어 있어야 하는데 그 작업 부터 해 주겠습니다. 2. Is Variable : 변수화하기 변수화는 별건 아니고 그래프에서 '활용 가능한 대상'으로 만드는 작업이라고 보시면 됩니다. 디테일 패널의 최상단에 위치한 Is Variable 을 체크하여 활성화합시다. 체크가 되어야 변수로 등록되고, 이벤트를 생성할 수 있게 ..

Unreal5로 UI만들어보기/1) UMG 사용하기

UMG 4편 : 버튼 위젯 사용하기

지난 시간에 사용한 이미지 위젯에 이어서 이번 시간에는 여러 상태를 갖는 버튼 위젯을 사용해 보도록 하겠습니다. 1. 버튼 위젯 사용하기 버튼 위젯은 이미지 위젯과 비교하면 다 똑같은데 외관(Appearance) 옵션에 Brush 속성이 아니라 Style 속성으로 표시가 되어 있는데요, 한 가지가 아니라 여러 스타일을 다룹니다. 버튼의 텍스쳐는 지난 시간에 만든 이미지 위젯에서 가져오겠습니다. 이미지 위젯을 선택하고 텍스쳐 위에 Shift + 마우스 오른쪽버튼을 누르면, 해당 텍스쳐가 복사됩니다. 이제 버튼 위젯을 다시 선택해서 Shift 마우스 왼쪽 버튼으로 아래 각 스타일별 텍스처란에 붙여넣어 주세요. 그럼 해당 이미지가 각각 등록된 버튼이 완성됩니다. 1 - 1) 스타일 - 일반(Normal) : ..

Unreal5로 UI만들어보기/1) UMG 사용하기

UMG 3편 : 이미지 위젯 사용하기

지난 포스팅에서 말씀드렸던 대로, 이번 포스팅에서는 이미지 위젯을 만들어 보도록 할게요. 시작해 보겠습니다. 1. 파일 준비 및 실습 세팅. 리소스 파일을 먼저 준비합니다. 일단 이번 포스팅에서는 위젯 옵션이 어떤 요소만 있는지 정리해볼 예정이라 아무 이미지나 괜찮습니다. 픽사베이(Pixabay), 언스플래쉬(Unsplash),등 어떤 것도 상관없으니 아무 이미지 한 장만 준비해 주세요. 준비된 이미지의 이름을 T_UI_Image로 변경합시다. 이름을 바꾼 이미지를 콘텐츠 브라우저에 드래그 앤 드롭해 주고, 위젯 블루프린트를 생성하고 WBP_UI_Images라고 이름을 지어 주신 후 더블클릭으로 열어 주세요. 마지막으로 해당 위젯 블루프린트에 캔버스 패널을 검색하고, 캔버스 패널을 에디터 영역 안 쪽으로..

Unreal5로 UI만들어보기/1) UMG 사용하기

UMG 2편 : 텍스트 사용하기

이번 포스팅에서는 언리얼에서 여러 종류의 위젯이 있지만, 가장 기본적인 표현을 담당하는 위젯인 '텍스트'와 '이미지', 그리고 '버튼'을 만들어 볼 건데, 오늘은 그 중에서도 '텍스트'에 대해서만 다뤄 볼게요! 1. 환경 설정 먼저 위젯 하나를 생성하고, 배경에 캔버스 패널을 설치해 둡시다. 캔버스 패널이 있으면 화면 크기에 맞게 꽉 채워지고 하위 요소들을 자유롭게 배치할 수 있게 됩니다. 이제 팔레트에서 텍스트라고 검색해서 텍스트 위젯을 가져와 봅시다. 2. 텍스트 위젯 상세 설정하기 텍스트 위젯을 드래그 앤 드롭 해 놓고 나면 상세설정(Detail) 패널에서 여러 옵션을 볼 수 있습니다. 크게 보면 아래와 같이 동작합니다. 1. 슬롯(Slot) : 배치 규칙을 좌우하는 슬롯 규칙에 대해 설정합니다. ..

Unreal5로 UI만들어보기/1) UMG 사용하기

UMG(Unreal Motion Graphics) 1편 사용과 간단 출력해보기

이번 포스팅에서는 언리얼에서 UI를 만드는 방법인 UMG란 무엇이고 어떻게 사용하는지, 그리고 어떻게 화면에 출력하는지에 대해서 다루어 보도록 하겠습니다. 그럼 지금부터 시작하겠습니다. 1. 위젯 블루프린트 생성하기 먼저 UI를 출력하기 위해서는 위젯 블루프린트(Widget Blueprint)를 생성해야 합니다. UI폴더를 생성하고, 폴더에 마우스 오른쪽 버튼 → 위젯 블루프린트를 누르면 생성할 수 있습니다. 여기에서 '부모 클래스'를 설정할 수 있는데요, 일단은 시작 단계이므로 User Widget으로 설정해 줍시다. 사용자 위젯(User Widget)을 선택하면 아래와 같이 위젯 블루프린트가 생성됩니다. 이름을 WBP_MainMenu로 설정하고 더블 클릭하여 UMG 창을 실행합시다. 위젯 네이밍 규칙..

frogOlis
'UMG' 태그의 글 목록