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

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

13. 파라미터와 인스턴스로 모서리가 둥근 사각형 패널 만들기

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 1. 파라미터(Parameter)란? 먼저 파라미터가 무엇인지 알아봅시다. 보통 매개변수라고 하면, 시스템이나 '함수의 특정한 성질'을 나타내는 변수라고 말합니다. 좀 어렵죠?😅😅 쉽게 말하면 함수에 있는 파라미터 값 A를 늘리면 원이 되고, 줄이면 사각형이 되는, 특정한 성질을 제어하는 변수를 일컫습니다. 이전에 회전 기능을 만들 때, 파라미터를 사용해 보았어요. 파라미터 θ의 값을 조정해서 '회전'을 제어했습니다. https://wdnote.tistory.com/211 8. 텍스쳐 다루기 (2) 텍스쳐 회전(Rotate) 구현하기 ※ 현재 학습 중인 내용이므로 아직..

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..

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

10-1. 머티리얼 함수 (1) : UVMasking 함수 제작과 순서

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 함수에 대해서 정리해 보았습니다. 1. 긴 수식을 정리하는 머티리얼 함수 지난 시간에 완성된 수식을 다시 보겠습니다. 조금 길고 복잡하죠? 만약에 제가 이런 머티리얼을 30개를 만든다고 치면.. 일일히 노드를 끌어서 만들어야 할까요? 그럴 필요가 없습니다. 머티리얼 내에 작성된 노드들을 쉽게 재사용할 수 있도록 함수(Function)로 묶을 수 있습니다. 기존의 작성한 노드를 살펴보고, 어떤 기능을 재사용할지를 정합시다. 이번 포스팅에서는 1. UV 채널 분리 2. 이동(Translate) 3. 배율(Scale) 4. 회전(Rotate)를 머..

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

9. 그래픽 요소 만들기 (1) 그라디언트와 IF로 도형 그리기

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 그라디언트 제작과, 제작 후에 다른 연산을 통해서 그라디언트를 변형하고 색상을 입혀보는 시간을 가져 보도록 하겠습니다. 1. 선형 그라디언트 Linear gradient 선형 그라디언트를 만드는 방법은 간단합니다. 텍스쳐 좌표계(TexCoordinate) 노드에서 선형 그라디언트 (Linear gradient) 노드를 연결하고, U방향과 V방향을 추출하면 그라디언트가 완성이 됩니다. 여기에 선형 보간(Linear Interploate)노드로 색상을 합성하면 그라디언트에 색도 부어 넣을 수 있어요. 2번 이상 설정하면 3가지 이상의 색도 합성할 수 있습..

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

8. 텍스쳐 다루기 (2) 텍스쳐 회전(Rotate) 구현하기

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 0. 사용 텍스쳐 이번 포스팅에서 사용될 텍스쳐 이미지입니다. 1. 회전공식 회전의 경우는, 수학 수식으로 계산해야 할 필요가 있습니다. 이 경우, 사용되는 것이 바로, "회전변환 행렬"입니다. 수학 수식으로 정리하면 아래와 같습니다. x' = x × cos × θ - y × sin × θ y' = x × sin × θ + y × cos × θ 이 수식의 유도와 설명은 유튜브에 많이 되어 있고, 제가 수포자이기 때문에 아쉽지만 길게 설명드리는 것은 아무래도 어려울 것 같습니다. 😅😅😅 대신 제가 참고한 유튜브 영상을 공유 드리겠습니다. 1. OZTV님 [수포자를 위한 ..

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

7. 텍스쳐 다루기 (1) 이동(Translate), 배율(Scale) 기능 만들기

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼에 텍스쳐를 배치하고, 텍스쳐를 이동시키고, 배율을 조정하는 적용하는 방법에 대해서 알아보겠습니다. 1. UV와 텍스쳐의 배치 지난 포스팅에서 UV란, 2개의 채널을 이용해서 만든 '좌표(Coordinate)'로, Red 채널은 왼쪽에서 오른쪽으로, Green 채널은 위에서 아래로 0에서부터 1까지 '순서대로' 표현합니다. 이 좌표는 '2차원 공간'을 정의하고, 대부분의 머티리얼은 이 UV를 만드는 것으로 시작합니다. 라고 말씀 드렸던 것 기억 하시나요? 그러니까 이 좌표 안에, 텍스쳐가 붙여 넣어지는 거라고 보시면 됩니다. 이미지가 붙기 위해..

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

6.이미지 합성과 
Linear interpolate

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 언리얼에서 이미지 합성의 기초가 되는 선형 보간(Linear Interpolation)에 대해서 다루어 보도록 하겠습니다. 1. 선형 보간 Linear Interpolation이란? 먼저 위키백과 검색 결과를 보면 끝 점의 값이 주어졌을 때, 사이에 위치한 값을 추정하기 위해 직선 거리로 선형적으로 계산하는 방법이다 라고 말하고 있습니다. 여기서 주목해야 할 것은 끝 점, 사이에 위치한 값, 추정이고, 끝 점이라는 것은 시작 점도 있다는 소리이기 때문에 같이 기억해주시길 바랍니다. 위 말을 표현하면 아래와 같습니다. 구체적으로 0과 1사이에서 0.5라는 추정 값을 입력..

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

5. 머티리얼 적용 (1) 텍스쳐, UV와 워크플로우

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 자 오늘은 지금까지 배웠던 것을 복습하면서 텍스쳐, UV에 대해서 알아보고, 언리얼 머티리얼을 만드는 워크플로우에 대해서 알아보도록 하겠습니다. 1. 머티리얼 생성하기 지난 시간에 했던 것 처럼, '컨텐츠 브라우저(Contents Browser)' 또는 '컨텐츠 서랍(Content Drawer)'에서 마우스 오른쪽 버튼 → 머티리얼 생성 → 이름 붙이기( M_Actor_Panel ) 후 더블 클릭으로 머티리얼 에디터를 실행시켜 줍니다. 참, 이 위의 Add 버튼을 눌러도 머티리얼을 추가할 수 있으니 참고 바랍니다. 2. 머티리얼 속성 설정. 이번에는 머티리얼 도메인(M..

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

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

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

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

3. 머티리얼 데이터 (2) Appendvector , ComponentMask

※ 본 문서는 언리얼 엔진 5.0.3버전을 기준으로 작성되고 있습니다. 지난 포스팅에서는 float, float2, float3, float4에 사칙 연산을 하는 방법과 주의사항 등에 대해서 다루었습니다. 오늘은 float에서 float2, float3, float4 등으로 합치거나 원하는 채널만 추출하는 방법에 대해서 다루어 보도록 하겠습니다. 0) 머티리얼 표현식 불러오기 먼저 간단하게 머티리얼 에디터에서 머티리얼 표현식을 사용하는 법에 대해서 이야기하겠습니다. 머티리얼 표현식을 사용하는 법은 팔레트 패널에서 드래그 앤 드롭 하기, 마우스오른쪽 버튼에서 검색해서 찾기, 단축키로 불러오기 총 세 가지로 볼 수 있습니다. 이 중에서 3은 지난 시간에 간단하게 시도해 보았었는데요. 단축키가 어떤 것인지 궁..

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

2. 머티리얼 데이터 (1) 0과1, float, float2, float3, float4

※ 본 문서는 언리얼 엔진 5.0.3버전을 기준으로 작성되고 있습니다. 1) 머티리얼의 데이터 타입 머티리얼 에디터를 사용하기 위해서 기본적인 데이터 타입에 대해서 알아둘 필요가 있습니다. 왜냐하면 가장 기본적으로 데이터 타입을 가지고, 계산하여 원하는 표현을 만드는 것이 머티리얼의 목적이기 때문입니다. 그럼 지금부터 데이터 타입에 대해서 알아보겠습니다. 2) 부동 소수점(float), 0과 1. A. 0과 1, 그리고 그 이상. 머티리얼은 오브젝트가 '빛'에 반응하는 재질의 특성을 다룹니다. 그래서 빛에 얼마나 반응할지를 결정해야 하죠. 이 빛을 다루기 위해 가장 먼저 알고 계셔야 할 것은 0과 1입니다. 키보드의 숫자 키 1을 누르고, 클릭을 하면 숫자 노드 한 개가 나타납니다. 여기에 디테일 패널에..

frogOlis
'Unreal5로 UI만들어보기/0) Material 다루기' 카테고리의 글 목록