[UMG] 처음 만나는 언리얼 UMG — 버튼 넣고 해상도 조절까지 따라하기

 

 

에디터 블루 프린트 에디터 사용방법과

가볍게 버튼을 추가하는 방법에 대해서 공부한 것을 기록해보겠습니다.

 

 

 

1. 팔레트 - 이탭은 위젯에 추가 할 수 잇는 모든 개별 ui 요소를 보여줍니다.
  버튼, 텍스트 박스, 이미지, 슬라이더 등 많은 요소가 포함되어있습니다.
2. 계층구조(하이어라키) 위제에 현재 배치된 모든 UI 요소를 보여줍니다.
 현재는 캔버스 패널 밑에 이미지 가 추가되어있습니다.
3. 디자이너 이탭은 계층구조에 대치된 UI 요소와 배치 방식에 따라 위젯 모습을 시각적으로 보여줍니다.

4. 디테일 현재 선택한 UI 요소의 속성을 보여줍니다. 
 배치된 캔버스 패널을 선택하면 모든 옵션이 나타납니다.
5. 블루 프린트이기 때문에 두개의 버튼으로 디자이너뷰와 그래프뷰 사이를 전환할 수 있습니다.

 

이중 화살표를 드래그하면 원하는 해상도로 캔버스의 크기를 조절 할 수 있습니다.
다양한 장치에서 사용되는 해상도 위젯을 보여줍니다.

 

빨간색으로 표시된 화살표 부분이 해상도 조절하는 기능입니다.

 

Desired  콘텐츠에 맞춰 보여줌

 

 

 

 

이미지를 배치하려면 위젯블루프린트 - > 캔버스 패널을 드래그앤 드롭을 하면됩니다.

 

캔버스패널을 넣은뒤에 해상도 조절이 가능해집니다.

저는 1920*1080 사이즈를 기본으로 합니다. 

이미지 색상은 여기에서 조절이 가능합니다.

앞서 말씀드렸듯이 이미지 non이라고 표시된 곳에 이미지를 넣을 수도 있고

 

색조를 통해서 색상 조절도 가능합니다.

 

 

 

이미지를 캔버스 전체 화면만큼 채우기 위해

앵커 컨트롤 우측젤 아래 부분을 눌러서

전체 화면으로 만들어 줬습니다.

 

 

 

 

UMG 위젯들은 각각 자식을 1개씩 갖을수 있는 애들과

자식을 갖을 수 없는 애들이 있습니다.

 

저도 해당 부분에 대해서 완벽하게 알고있지는 않습니다만.. 블로그를 하면서 공부하고 보시는 분들과 같이 공부하도록 하겠습니다.

해당 사항에 대해서 잘 나와 있고 제가 요새 참고하면서 공부하는 블로그를 적어두겠습니다.

 

 

UMG 6편 : 슬롯(slot) (1) - 패널(Panel)의 사용 — 오구리의 디자인시스템노트

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

 

 

위젯 패널들의 정보를 잘 정리해주셨습니다.

저도 다시한번 정리하긴 할껀데 혹시나 더 많이 공부하고 싶으신 분들은 오구리님의 블로그로 가서 보시면 될 것같습니다.

 

 

 

 

버튼을 넣는 것들에 다양한 방법이 있지만

우선은 예시로 보여드린다면 버튼을 이런 형태로 넣을 수 있습니다. (사실 이건 정확한 정보는 아니고... 버튼넣는걸 보여드리려고 이렇게 만들엇습니다.)

 

 

 

 

텍스트 내용은

디테일 콘텐츠 - 텍스트에서 변경이 가능합니다.

 

 

 

 

 

언리얼과 유니티의 차이점중 하나라고 생각하는게

유니티는 게임 오브젝트 아래에 다양한 형식의 계층구조?를 형성할 수 있었던거 같습니다.

하지만 언리얼은 어떤이유 에서인지 패널들 간에 다양한 갯수를 허용하지 않은것 같습니다.

 

예를 들어 이미지는 자손을 가질 수 없고

버튼은 1개의 자손을 갖을 수 있다

 

이런식으로 계층 구조를 제한합니다.

 

언리얼로 넘어온지 얼마 되지 않았지만 이 부분에 대해서 조금 당황했던거 같습니다만..

제가 엔진을 변형할 수 있는게 아닌 이상 이 부분에 대해서 받아드리기로 했습니다.

 

 

아직까지 각 패널에 대한 다양한 특징을 다 파악하진 못했지만

선행적으로 공부한 블로거님들의 대한 내용과 챗 GPT를 활용하여서 

각각 기능을 공부중입니다. 

제글을 보시는 분들께서도 umg를 처음 만났을 때 너무 당황하진 마시고

 

위에 첨부드린 블로거님이나 챗 gpt를 활용해서

각 패널의 기능을 숙지하시면 좋을거같습니다.

 

 

 

 

그럼 오늘의 공부는 여기서 마치겠습니다.

혹시나 잘못된 설명이 있으면 댓글을 남겨주시면 수정반영하도록 하겠습니다.

 

글을 좀더 깔끔하게 작성하는 방법에 대해서 고민을 많이 해보도록 하겠습니다.

긴글 읽어주셔서 감사합니다.

 

 

 

#언리얼엔진 #언리얼엔진UMG #UMG기초 #언리얼UI #언리얼블루프린트 #언리얼UI디자인 #언리얼초보 #UMG블루프린트 #위젯제작 #언리얼위젯 #언리얼강의 #게임UI디자인 #언리얼UI구성 #언리얼디자이너 #언리얼강좌 #언리얼UMG초보 #게임개발기록 #게임UI제작 #UI디자인공부 #게임디자인공부