언리얼에서 화면에 어떻게 배치할지를 정하는 기능 슬롯(Slot)에 대해서 살펴볼 건데요. 이를 제대로 사용하려면 패널 위젯(Panel Widget)의 특성을 이해하실 필요가 있습니다. 그래야 원하는 배치를 만들 수 있기 때문입니다. 그럼 지금부터 시작해 보겠습니다. 1. 위젯에 올 수 있는 자식의 수는? 일단 먼저 위젯을 좀 살펴보겠습니다. 위젯에 마우스를 올려 놓으면 해당 위젯의 설명과 함께 Single Child , Many Children , No Children 를 보실 수 있는데요, 여기서 자식(Child)이란 하이어라키에서 하위 요소로 올 수 있는 위젯의 수를 의미합니다. 아무것도 올 수 없거나(No Children), 1개만 올 수 있거나(Single), 다수(many)를 집어넣을 수도 있습..
곰곰히 생각해봤는데 이대로 끝내기엔 버튼 같지가 않으므로, 버튼에 텍스트 출력 기능을 하나 넣어 볼게요. 1. 버튼에 이벤트 연결하기 지난 시간에 만들어 둔 버튼이 생성된 위젯 블루프린트를 열어줍니다. 그리고 버튼을 선택 해 주세요. 버튼 이벤트를 생성해 보겠습니다. 디자이너 패널과 그래프 탭 모두에서 버튼 이벤트를 생성할 수 있습니다. 다만 반드시 '변수로 등록(Is Variable)'이 되어 있어야 하는데 그 작업 부터 해 주겠습니다. 2. Is Variable : 변수화하기 변수화는 별건 아니고 그래프에서 '활용 가능한 대상'으로 만드는 작업이라고 보시면 됩니다. 디테일 패널의 최상단에 위치한 Is Variable 을 체크하여 활성화합시다. 체크가 되어야 변수로 등록되고, 이벤트를 생성할 수 있게 ..
지난 포스팅에서 말씀드렸던 대로, 이번 포스팅에서는 이미지 위젯을 만들어 보도록 할게요. 시작해 보겠습니다. 1. 파일 준비 및 실습 세팅. 리소스 파일을 먼저 준비합니다. 일단 이번 포스팅에서는 위젯 옵션이 어떤 요소만 있는지 정리해볼 예정이라 아무 이미지나 괜찮습니다. 픽사베이(Pixabay), 언스플래쉬(Unsplash),등 어떤 것도 상관없으니 아무 이미지 한 장만 준비해 주세요. 준비된 이미지의 이름을 T_UI_Image로 변경합시다. 이름을 바꾼 이미지를 콘텐츠 브라우저에 드래그 앤 드롭해 주고, 위젯 블루프린트를 생성하고 WBP_UI_Images라고 이름을 지어 주신 후 더블클릭으로 열어 주세요. 마지막으로 해당 위젯 블루프린트에 캔버스 패널을 검색하고, 캔버스 패널을 에디터 영역 안 쪽으로..
이번 포스팅에서는 언리얼에서 여러 종류의 위젯이 있지만, 가장 기본적인 표현을 담당하는 위젯인 '텍스트'와 '이미지', 그리고 '버튼'을 만들어 볼 건데, 오늘은 그 중에서도 '텍스트'에 대해서만 다뤄 볼게요! 1. 환경 설정 먼저 위젯 하나를 생성하고, 배경에 캔버스 패널을 설치해 둡시다. 캔버스 패널이 있으면 화면 크기에 맞게 꽉 채워지고 하위 요소들을 자유롭게 배치할 수 있게 됩니다. 이제 팔레트에서 텍스트라고 검색해서 텍스트 위젯을 가져와 봅시다. 2. 텍스트 위젯 상세 설정하기 텍스트 위젯을 드래그 앤 드롭 해 놓고 나면 상세설정(Detail) 패널에서 여러 옵션을 볼 수 있습니다. 크게 보면 아래와 같이 동작합니다. 1. 슬롯(Slot) : 배치 규칙을 좌우하는 슬롯 규칙에 대해 설정합니다. ..
이번 포스팅에서는 언리얼에서 UI를 만드는 방법인 UMG란 무엇이고 어떻게 사용하는지, 그리고 어떻게 화면에 출력하는지에 대해서 다루어 보도록 하겠습니다. 그럼 지금부터 시작하겠습니다. 1. 위젯 블루프린트 생성하기 먼저 UI를 출력하기 위해서는 위젯 블루프린트(Widget Blueprint)를 생성해야 합니다. UI폴더를 생성하고, 폴더에 마우스 오른쪽 버튼 → 위젯 블루프린트를 누르면 생성할 수 있습니다. 여기에서 '부모 클래스'를 설정할 수 있는데요, 일단은 시작 단계이므로 User Widget으로 설정해 줍시다. 사용자 위젯(User Widget)을 선택하면 아래와 같이 위젯 블루프린트가 생성됩니다. 이름을 WBP_MainMenu로 설정하고 더블 클릭하여 UMG 창을 실행합시다. 위젯 네이밍 규칙..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 11. 출력과 테스트 (2) : DebugValue 함수로 값 조회하기 ※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 값 연산을 조회할 수 wdnote.tistory.com 안녕하세요, 이번 포스팅에서는 11. 출력과 테스트(2) 편에 이어서 UV에서 값을 출력하는 방법에 대해서 알아보겠습니다. Scala 값을 갖는 요소들에서 2차원, 3차원 값 없이 Gradient 형태인 모든 노드들은 DebugValue로는 값을 조회할 수 없었습니다. 그래서 방법이..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 함수에 대해서 정리해 보았습니다. 1. 긴 수식을 정리하는 머티리얼 함수 지난 시간에 완성된 수식을 다시 보겠습니다. 조금 길고 복잡하죠? 만약에 제가 이런 머티리얼을 30개를 만든다고 치면.. 일일히 노드를 끌어서 만들어야 할까요? 그럴 필요가 없습니다. 머티리얼 내에 작성된 노드들을 쉽게 재사용할 수 있도록 함수(Function)로 묶을 수 있습니다. 기존의 작성한 노드를 살펴보고, 어떤 기능을 재사용할지를 정합시다. 이번 포스팅에서는 1. UV 채널 분리 2. 이동(Translate) 3. 배율(Scale) 4. 회전(Rotate)를 머..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 0. 사용 텍스쳐 이번 포스팅에서 사용될 텍스쳐 이미지입니다. 1. 회전공식 회전의 경우는, 수학 수식으로 계산해야 할 필요가 있습니다. 이 경우, 사용되는 것이 바로, "회전변환 행렬"입니다. 수학 수식으로 정리하면 아래와 같습니다. x' = x × cos × θ - y × sin × θ y' = x × sin × θ + y × cos × θ 이 수식의 유도와 설명은 유튜브에 많이 되어 있고, 제가 수포자이기 때문에 아쉽지만 길게 설명드리는 것은 아무래도 어려울 것 같습니다. 😅😅😅 대신 제가 참고한 유튜브 영상을 공유 드리겠습니다. 1. OZTV님 [수포자를 위한 ..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 언리얼에서 이미지 합성의 기초가 되는 선형 보간(Linear Interpolation)에 대해서 다루어 보도록 하겠습니다. 1. 선형 보간 Linear Interpolation이란? 먼저 위키백과 검색 결과를 보면 끝 점의 값이 주어졌을 때, 사이에 위치한 값을 추정하기 위해 직선 거리로 선형적으로 계산하는 방법이다 라고 말하고 있습니다. 여기서 주목해야 할 것은 끝 점, 사이에 위치한 값, 추정이고, 끝 점이라는 것은 시작 점도 있다는 소리이기 때문에 같이 기억해주시길 바랍니다. 위 말을 표현하면 아래와 같습니다. 구체적으로 0과 1사이에서 0.5라는 추정 값을 입력..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 연산을 진행하다가 중간 과정 중에 검토가 필요할 때, 어떻게 해야 할지에 대해서 이야기해보겠습니다. 1. 라이브 업데이트(Live Update)기능 먼저, 툴 바의 라이브 업데이트 기능에 대해서 이야기하겠습니다. 머티리얼의 현재상태를 조회하기 위한 기능으로, 아래 3가지의 옵션이 있습니다. 머티리얼 미리보기(Preview Material) : 저장 또는 적용 버튼을 사용하지 않고 변경 사항이 재질 미리보기 뷰포트에서 실시간으로 자동 업데이트 됩니다. 이 기능을 끄면 노드 미리보기(Start previewing node) 기능을 사용할 수 없습니다. 리..
※ 본 문서는 언리얼 엔진 5.0.3버전을 기준으로 작성되고 있습니다. 지난 포스팅에서는 float, float2, float3, float4에 사칙 연산을 하는 방법과 주의사항 등에 대해서 다루었습니다. 오늘은 float에서 float2, float3, float4 등으로 합치거나 원하는 채널만 추출하는 방법에 대해서 다루어 보도록 하겠습니다. 0) 머티리얼 표현식 불러오기 먼저 간단하게 머티리얼 에디터에서 머티리얼 표현식을 사용하는 법에 대해서 이야기하겠습니다. 머티리얼 표현식을 사용하는 법은 팔레트 패널에서 드래그 앤 드롭 하기, 마우스오른쪽 버튼에서 검색해서 찾기, 단축키로 불러오기 총 세 가지로 볼 수 있습니다. 이 중에서 3은 지난 시간에 간단하게 시도해 보았었는데요. 단축키가 어떤 것인지 궁..
