언리얼에서 화면에 어떻게 배치할지를 정하는 기능 슬롯(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. 버튼 위젯 사용하기 버튼 위젯은 이미지 위젯과 비교하면 다 똑같은데 외관(Appearance) 옵션에 Brush 속성이 아니라 Style 속성으로 표시가 되어 있는데요, 한 가지가 아니라 여러 스타일을 다룹니다. 버튼의 텍스쳐는 지난 시간에 만든 이미지 위젯에서 가져오겠습니다. 이미지 위젯을 선택하고 텍스쳐 위에 Shift + 마우스 오른쪽버튼을 누르면, 해당 텍스쳐가 복사됩니다. 이제 버튼 위젯을 다시 선택해서 Shift 마우스 왼쪽 버튼으로 아래 각 스타일별 텍스처란에 붙여넣어 주세요. 그럼 해당 이미지가 각각 등록된 버튼이 완성됩니다. 1 - 1) 스타일 - 일반(Normal) : ..
지난 포스팅에서 말씀드렸던 대로, 이번 포스팅에서는 이미지 위젯을 만들어 보도록 할게요. 시작해 보겠습니다. 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 창을 실행합시다. 위젯 네이밍 규칙..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 1. 파라미터(Parameter)란? 먼저 파라미터가 무엇인지 알아봅시다. 보통 매개변수라고 하면, 시스템이나 '함수의 특정한 성질'을 나타내는 변수라고 말합니다. 좀 어렵죠?😅😅 쉽게 말하면 함수에 있는 파라미터 값 A를 늘리면 원이 되고, 줄이면 사각형이 되는, 특정한 성질을 제어하는 변수를 일컫습니다. 이전에 회전 기능을 만들 때, 파라미터를 사용해 보았어요. 파라미터 θ의 값을 조정해서 '회전'을 제어했습니다. https://wdnote.tistory.com/211 8. 텍스쳐 다루기 (2) 텍스쳐 회전(Rotate) 구현하기 ※ 현재 학습 중인 내용이므로 아직..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 11. 출력과 테스트 (2) : DebugValue 함수로 값 조회하기 ※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 값 연산을 조회할 수 wdnote.tistory.com 안녕하세요, 이번 포스팅에서는 11. 출력과 테스트(2) 편에 이어서 UV에서 값을 출력하는 방법에 대해서 알아보겠습니다. Scala 값을 갖는 요소들에서 2차원, 3차원 값 없이 Gradient 형태인 모든 노드들은 DebugValue로는 값을 조회할 수 없었습니다. 그래서 방법이..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 값 연산을 조회할 수 있는 방법에 대해서 작성하였습니다. 0. 언리얼 연산의 문제점에 대해서 알아보자! 언리얼에서는 주로 값 연산을 통해서 표현을 하게 됩니다. 그런데 여러분.. 문제가 있습니다. 현재 이 노드들의 최종 출력값은 과연 몇일까요? 바로바로 암산하고 생각하기 어렵습니다 ㅠㅠ 이렇듯 언리얼에서 연산을 복잡하게 꼬고 꼬아서 하다 보면 이게 지금 값이 몇인지 이해할 수가 없는 경우가 점점 많아집니다 😢😢😢😢 그래서 노드의 출력 값을 조회하는 방법, DebugValue 함수를 가져와봤습니다. 1. DebugScalaValue, Debug..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 함수에 대해서 정리해 보았습니다. 1. 긴 수식을 정리하는 머티리얼 함수 지난 시간에 완성된 수식을 다시 보겠습니다. 조금 길고 복잡하죠? 만약에 제가 이런 머티리얼을 30개를 만든다고 치면.. 일일히 노드를 끌어서 만들어야 할까요? 그럴 필요가 없습니다. 머티리얼 내에 작성된 노드들을 쉽게 재사용할 수 있도록 함수(Function)로 묶을 수 있습니다. 기존의 작성한 노드를 살펴보고, 어떤 기능을 재사용할지를 정합시다. 이번 포스팅에서는 1. UV 채널 분리 2. 이동(Translate) 3. 배율(Scale) 4. 회전(Rotate)를 머..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 그라디언트 제작과, 제작 후에 다른 연산을 통해서 그라디언트를 변형하고 색상을 입혀보는 시간을 가져 보도록 하겠습니다. 1. 선형 그라디언트 Linear gradient 선형 그라디언트를 만드는 방법은 간단합니다. 텍스쳐 좌표계(TexCoordinate) 노드에서 선형 그라디언트 (Linear gradient) 노드를 연결하고, U방향과 V방향을 추출하면 그라디언트가 완성이 됩니다. 여기에 선형 보간(Linear Interploate)노드로 색상을 합성하면 그라디언트에 색도 부어 넣을 수 있어요. 2번 이상 설정하면 3가지 이상의 색도 합성할 수 있습..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 0. 사용 텍스쳐 이번 포스팅에서 사용될 텍스쳐 이미지입니다. 1. 회전공식 회전의 경우는, 수학 수식으로 계산해야 할 필요가 있습니다. 이 경우, 사용되는 것이 바로, "회전변환 행렬"입니다. 수학 수식으로 정리하면 아래와 같습니다. x' = x × cos × θ - y × sin × θ y' = x × sin × θ + y × cos × θ 이 수식의 유도와 설명은 유튜브에 많이 되어 있고, 제가 수포자이기 때문에 아쉽지만 길게 설명드리는 것은 아무래도 어려울 것 같습니다. 😅😅😅 대신 제가 참고한 유튜브 영상을 공유 드리겠습니다. 1. OZTV님 [수포자를 위한 ..
