UE5

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만들어보기/0) Material 다루기

12. 출력과 테스트 (3) PlotFunctionOnGraph로 값 조회하기

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 11. 출력과 테스트 (2) : DebugValue 함수로 값 조회하기 ※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 값 연산을 조회할 수 wdnote.tistory.com 안녕하세요, 이번 포스팅에서는 11. 출력과 테스트(2) 편에 이어서 UV에서 값을 출력하는 방법에 대해서 알아보겠습니다. Scala 값을 갖는 요소들에서 2차원, 3차원 값 없이 Gradient 형태인 모든 노드들은 DebugValue로는 값을 조회할 수 없었습니다. 그래서 방법이..

Unreal5로 UI만들어보기/0) Material 다루기

11. 출력과 테스트 (2) : DebugValue 함수로 값 조회하기

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 값 연산을 조회할 수 있는 방법에 대해서 작성하였습니다. 0. 언리얼 연산의 문제점에 대해서 알아보자! 언리얼에서는 주로 값 연산을 통해서 표현을 하게 됩니다. 그런데 여러분.. 문제가 있습니다. 현재 이 노드들의 최종 출력값은 과연 몇일까요? 바로바로 암산하고 생각하기 어렵습니다 ㅠㅠ 이렇듯 언리얼에서 연산을 복잡하게 꼬고 꼬아서 하다 보면 이게 지금 값이 몇인지 이해할 수가 없는 경우가 점점 많아집니다 😢😢😢😢 그래서 노드의 출력 값을 조회하는 방법, DebugValue 함수를 가져와봤습니다. 1. DebugScalaValue, Debug..

카테고리 없음

10-2. 머티리얼 함수 (2) : 함수로 머티리얼 정리하기

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이전 포스팅 에서 이어집니다. 10-1. 머티리얼 함수 (1) : UVMasking 함수 제작과 순서 ※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 함수에 대해서 정리 wdnote.tistory.com 함수로 효과를 마저 연동해 보겠습니다. 1. 머티리얼 함수로 정리하기 2-2) 이동(Translate) 기능 분화하기 위 방법과 같은 순서로 진행하겠습니다. · 1단계 _구조 생각하기 이동 기능은 UV(Vector2)좌표에서 빼기(Subtract) 연산으..

Unreal5로 UI만들어보기/0) Material 다루기

4. 출력과 테스트 (1) Live update 옵션

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 연산을 진행하다가 중간 과정 중에 검토가 필요할 때, 어떻게 해야 할지에 대해서 이야기해보겠습니다. 1. 라이브 업데이트(Live Update)기능 먼저, 툴 바의 라이브 업데이트 기능에 대해서 이야기하겠습니다. 머티리얼의 현재상태를 조회하기 위한 기능으로, 아래 3가지의 옵션이 있습니다. 머티리얼 미리보기(Preview Material) : 저장 또는 적용 버튼을 사용하지 않고 변경 사항이 재질 미리보기 뷰포트에서 실시간으로 자동 업데이트 됩니다. 이 기능을 끄면 노드 미리보기(Start previewing node) 기능을 사용할 수 없습니다. 리..

Unreal5로 UI만들어보기/0) Material 다루기

1. UI를 위한 머티리얼 만들기 : 머티리얼이란?

※ 본 문서는 언리얼 엔진 5.0.3버전을 기준으로 작성되고 있습니다. 1) 머티리얼이란? 머티리얼(Material)은 3D 모델의 표면 또는 물체의 느낌과 물리적 특성을 결정하는 데 사용되는 애셋(asset)입니다. 색상, 반사율, 빛의 반응, 반사 및 빛의 파동의 각도 등 물리적 특성을 제어하는 데 사용되며, 이것은 게임, 영화 및 가상 현실(VR)에서 고품질 그래픽을 만들 수 있고, 저희가 지금부터 제작해 볼 사용자 인터페이스를 만드는 데에도 사용됩니다. 그럼 머티리얼을 만들어 보겠습니다. 2) 제작 및 사용 콘텐츠 브라우저에서 마우스 오른쪽 버튼을 클릭하고 머티리얼을 생성하면 사용할 수 있습니다. 콘텐츠 브라우저는 언리얼 프로그램 인터페이스의 가장 맨 하단에 위치합니다. 생성을 완료하면 이름을 작..

frogOlis
'UE5' 태그의 글 목록