지난 포스팅에서 말씀드렸던 대로,
이번 포스팅에서는 이미지 위젯을 만들어 보도록 할게요.
시작해 보겠습니다.
1. 파일 준비 및 실습 세팅.
리소스 파일을 먼저 준비합니다.
일단 이번 포스팅에서는 위젯 옵션이 어떤 요소만 있는지 정리해볼 예정이라
아무 이미지나 괜찮습니다.
픽사베이(Pixabay), 언스플래쉬(Unsplash),등 어떤 것도 상관없으니
아무 이미지 한 장만 준비해 주세요.
준비된 이미지의 이름을 T_UI_Image로 변경합시다.
이름을 바꾼 이미지를 콘텐츠 브라우저에 드래그 앤 드롭해 주고,
위젯 블루프린트를 생성하고 WBP_UI_Images라고 이름을 지어 주신 후 더블클릭으로 열어 주세요.
마지막으로 해당 위젯 블루프린트에 캔버스 패널을 검색하고, 캔버스 패널을 에디터 영역 안 쪽으로 드래그 앤 드롭해서
세팅을 완료해 주세요. 이전 시간에 다 했던 내용이니 그렇게 어렵진 않을 거예요.
2. 이미지 위젯 사용하기
자 여기까지 되셨으면 이제 이미지 위젯을 적용해 보겠습니다.
크게 보면 UMG 첫번째 포스팅에서 써 본 것 처럼 콘텐츠 브라우저에서 직접 드래그 앤 드롭해서 배치하는 방법과
이미지 위젯을 먼저 배치하고 해당 리소스와 연결하는 방법이 있습니다.
일단 콘텐츠 브라우저에서 드래그 앤 드롭 하는 것은 해 봤으니,
이번엔 옵션을 살펴보면서 하나하나 세팅 준비를 해보겠습니다.
전체 옵션을 지정하는 영역은 다음과 같습니다.
1. 슬롯(Slot) : 배치 규칙에 대해서 설정할 때 사용합니다. 이 속성은 기본적으로 부모 요소의 영향을 받아 생성되는데요.
추후 슬롯 편만 따로 다룰 예정입니다.
2. 외관(Appearance) : 이 옵션에서는 해당 이미지 위젯을 어떻게 나타낼지 대해서 다룹니다.
├ 이미지(Image) : 표시할 텍스쳐 또는 머티리얼을 설정할 때 사용합니다.
언리얼의 콘텐츠 브라우저에 드래그 앤 드롭한 이미지는 '텍스쳐'로 등록됩니다.
T_UI_Image 텍스쳐를 드래그 앤 드롭해서 등록시켜 주세요.
├ 이미지 크기(Image Size) : 원본 이미지의 크기를 설정합니다. 현재 다운받은 이미지의 크기가 그대로 표시됩니다.
├ 색조(Tint) : 해당 이미지에 적용될 색상을 설정할 때 사용합니다. 흰색으로 설정해야 동일하게 출력됩니다.
색상 변경시 텍스쳐에도 영향을 받습니다.
├ 그리기 방법(Draw As) : 5가지 옵션이 있고, 각 방법별로 특징이 존재합니다.
├ 없음(none) : 아무 것도 출력하지 않습니다.
├ 박스(Box) : 마진(Margin) 옵션을 기준으로 해당 이미지의 반복되는 영역이 존재합니다.
이 마진 영역이 꽤 중요한데, 처음에는 이해하기 조금 난해합니다.
이미지를 비율에 맞게 자돟으로 맞춰 주는데(Stetch), 해당 마진으로 고정된 영역은 그 상태가 고정됩니다.
그러니까 전체 영역이 512 × 512 인 경우, 좌측 여백이 0.1로 잡혀있는 경우, 그 1/10인 약 51픽셀은 고정되고
나머지 영역에서만 맞춰지는(Strech) 것입니다.
다만 Left영역이 고정되면 수직으로는 Stetch가 일어나고, Top 영역이 고정되면 수평으로는 Strech가 일어나는데,
만약 둘 다 0.1씩 고정되었다고 한다면 좌측 상단은 가로세로 약 51px은 변하지 않고 항상 고정되는 값이 되는 것입니다.
├ 경계(Border) : 박스와 동일하지만 고정되지 않는 영역은 출력되지 않습니다.
├ 이미지(Image) : 반복되는 영역없이 원본과 똑같이 출력합니다. 상하, 좌우, 혹은 둘 다 타일링 옵션을 지정해서 반복시킬 수 있습니다.
├ 둥근박스(Rounded Box) : 외곽을 둥글게 처리합니다. 모서리 각각을 설정하거나(Fixed), 원형에 맞게(half height radius) 바꿔줄 수 있습니다. 또한 외곽선을 그려 줄 수 있습니다.(Outline 속성)
이외 기타 영역은 이번에 다루지 않으므로 접어두겠습니다.
3. 접근성(Accessibility) : 스크린 리더 기능 사용 여부를 설정합니다.
4. 동작(Behavior) : 팁(Tooltip), 시각화(Visibility), 렌더 투명도(Render opacity) 설정시 사용.
5. 렌더 변형(Render Transform) : 이동,스케일,기울이기, 회전 등 기능 설정 시 사용. 주로 애니메이션 효과로 적용됨.
6. 성능(Performance) : 성능 처리를 위한 '무효화(V)', '휘발성여부(is Volatile)', '심플 텍스트 모드(Simpl)' 설정
7. 클리핑(Clipping) : 부모 위젯의 크기 바깥으로 넘어간 자식 위젯을 가리는 클리핑(Cliping) 기능 설정시 사용합니다.
8. 내비게이션(Navigation):내비게이션 설정시 사용합니다.
9. 현지화(Localization):텍스트의 언어 설정 시 사용됩니다. 주로 여러 언어를 표현해야 하는 경우에 사용합니다.
10. 이벤트(Event) : 마우스 이벤트에 바인딩 설정시 사용합니다.
3~10번은 이미 지난 시간에 봤던 옵션입니다. 이번에 크게 중요하진 않아요.
외관(Appearance) 옵션을 이리저리 바꿔서 적용해 보시면 됩니다.
자 이렇게 오늘은 이미지 위젯을 사용하는 법에 대해서 배워 봤습니다.
분량조절 실패와 시간관계상 오늘은 여기까지 하고,
다음 포스팅에서는 버튼을 만들어 보겠습니다...!
'Unreal5로 UI만들어보기 > 1) UMG 사용하기' 카테고리의 다른 글
| UMG 6편 : 슬롯(slot) (1) - 패널(Panel)의 사용 (0) | 2023.05.09 |
|---|---|
| UMG 5편 : 버튼 이벤트에 기능 텍스트 출력 기능 부여하기 (0) | 2023.05.08 |
| UMG 4편 : 버튼 위젯 사용하기 (0) | 2023.04.27 |
| UMG 2편 : 텍스트 사용하기 (0) | 2023.04.25 |
| UMG(Unreal Motion Graphics) 1편 사용과 간단 출력해보기 (0) | 2023.04.24 |
