언리얼 UMG: Widget Blueprint 기초

폴더구조

UI/ 
- Fonts
- Materials
- Textures
- Widgets

 

엔진설정

//프로젝트 세팅

//해상도에 따라서 스케일링 되는 UI를 사용하겠다는 의미
//Engine ->UserInterface-> 

- DPI Scaling -> DPIScaleRule -> Scale to Fit 으로 변경 // curve를 이용해서 과도하게 작아지거나 과도하게 커지지 않도록 조절
- Scale to Fit Rule -> 1080*1920 // 사용할 화면에 맞게 조정해준다 
- UMG Font // 현재 96 DPI로 되어있다. 때문에 포토샵에서 96으로 해상도를 맞춰주었던 것이다.

 

 

포토샵 출력설정 

초보자때는 포토샵의 모든 이미지를 조각조각 내면서 붙이기 보다는
전체의 이미지를 바닥에 붙이고 그 위에 얹는 방식으로 보는 것을 권장한다.
// 실제로는 모니터 두개를 놓고 한쪽에 포토샵, 한쪽에 언리얼 켜놓고 맞는지 확인하면서 작업하는게 좋다. 




//출력할때 
ctrl+ alt + shift + s

- 알파값을 출력해야할때는  transparancy 체크해줘야함, 필요 없을때는 체크를 해제해주는 것이 좋다. 
- PNG24로 출력해준다.
- 색깔은 엔진에서 넣어줄 것이기 때문에 반드시 색을 제거하고 투명도만 유지한 채로 하얀색으로 출력한다



// ---------------------------------아이콘 출력---------------------//
//출력할때 한번 더 영상보면서 출력하기
사이즈가 같은 것들은 한꺼번에 출력할 수 있다

//아이콘 출력그룹 만들기
- 같이 출력할 아이콘 or 버튼을 동시에 선택
- Duplicate Layers -> Document = New 선택 -> 새로운 바탕화면에 붙여넣어준다
- 아이콘들을 중앙정렬 Align -> 그룹핑Ctrl+G -> 복사Ctrl+J -> 합치기 Ctrl+E-> Crop(Alt+I+P)
- 만약 아이콘이 깔끔하게 정렬되지 않았다면 그룹을 열어서 완벽하게 겹치도록 설정해준다. 

//중앙정렬 맞추기
- 그림자가 있을경우 아마 상하좌우 간격이 안맞을 것이다. 
- 간격도 맞춰준다 Alt+c에서 픽셀을 확인후 ->아래 그림에서 좌우 화살표를 클릭해주고-> 픽셀에 필요한 값만큼 + 또는 -를 한다. 
- 아이콘마다 중앙이  맞을때까지 픽셀을 체크하면서 크기를 조절해준다

// 캔버스 사이즈를 정사각형으로 맞춰주기
- Ctrl + Alt + C 로 캔버스 사이즈를 켜고
- 더 큰 수를 반대쪽에 입력해준다(정사각형이 되도록)
ex) 67* 76 일경우 -> 76*76으로 변경

- 이렇게 캔버스 사이즈를 정사각형으로 맞춘 후에 이미지 사이즈를 조절해주면 된다. 

//이미지 크기 지정
- 중앙정렬이 맞았다면 이제부터는 이미지 크기를 지정해주면된다. 

- ctrl+ Alt + I
- 크기는 무조건 2의 상수로 지정해줘야한다. 
- 이미지의 수직 수평 크기가,  예를 들어 64에 가까운 수 라면   64*64 /  128에 가까운 수 라면 128*128 -> 이런 방식으로 처리해주면 된다.
- 색깔은 엔진에서 넣을 생각하는게 좋다
- 이름은 (성격_이름)으로 지정해준다.

 

 

텍스쳐 임포트 후 텍스쳐 설정

 

먼저 배경 위치확인용 더미 텍스쳐의 경우 2의 상수를 맞춰 출력하지 않았기 때문에 압축 및 최적화 설정이 올바르게 되지 않았을 것이다. 

//Level of Detail

- texture Group = UI
- MipGen = NoMipmaps

//Compression

- Compression setting = UserInterface2D
압축이 안된 세팅이다. 알파가 없을때는 DXT1, 있을때는 DXT2를 사용한다. 


//texture
//Advanced 
- X-axis Tiling Method = Clamp
- Y-axis Tiling Method = Clamp

//File Path
-Souce File = 개인 texture 폴더를 따로 만들어서 경로 설정

경로가 연결되어있는 곳에서 즉시 확인할 수 있기때문에 
혹시 나중에 이미지를 reimport했을때 이미지를 바로 교체할 수 있도록 하기 위해서 좋다.

 

 

아이콘으로 임포트를 했을 경우 여러개를 동시에 임포트 했을 가능성이 높다.

이 경우 여러개의 텍스쳐 설정을 동시에 조절해주어야만 한다. 

여러개의 UI텍스쳐를 기본 설정하는 방법에 대해 알아보자 

수정할 에셋을 여러개 동시에 선택한다->우클릭AssetActions-> Edit Selection in Property Matrix
여기에서 여러개의 텍스쳐를 동시에 수정할 수 있다.

//Texture
- X-axis Tiling Method = Clamp //하나만 사용하기때문에 clamp 설정하는 것, 만약 다른상황에서는 다른 설정을 할 수도 있다
- Y-axis Tiling Method = Clamp




위에서와 동일하게 세팅해주면 된다. 
//Copression
- Compression Without Alpha = true // 아까는 알파값이 없었지만, 이번엔 있어야하기때문에 Compress Without Alpha를 체크
- Cook Platform Tiling Setting = UserInterface2D (RGBA) // 알파가 있기때문에 4채널짜리로 선택해준다. 

//LevelOfDetail
-TextureGroup = UI
-MipGenSetting = NoMipMaps

 

 

 

위젯 블루프린트에 대한   기본적 내용

1. Canvas Panel 붙이기
- 기본적으로 어떤 크기를 지정해주는 판을 만들고 그 안에 다양한 구성요소를 안전하게 추가하도록 돕는다.
- canvas없이 구성요소를 붙이게 되면 찌그러지는 경우가 빈번하게 발생할 수 있다
- 여기서는 custom 사이즈 설정 후 크기를 조절해준다. 

2. image 불러와서 배경 설정하기
- image를 불러오면 그 안에 이미지를 붙여넣을 수 있다.

3. 앵커 포인트 맞추기
- 앵커포인트를 맞추는 작업은 굉장히 중요하다
- ctrl을 클릭한 채로 앵커 포인트를 클릭하면 이미지를 앵커포인트에 맞출 수 있다. 
-> 좌우상하를 맞춘 앵커포인트를 선택할 경우 전체화면으로 만들어버릴 수 있다.


//먼저 기억할 것
1) 언리얼 엔진에서 위젯 블루프린트는 다른 위젯 블루프린트의 컴포넌트가 될 수 있다. 
2) 이를 이용해서 위셋 블루프린트의 기본적인 형태에 대해 컴포넌트를 제작하고, 구성요소로서 넣을 수 있다. 




4. 버튼 불러오기
- 이것도 앵커포인트로 위치 잡고 시작하는건 굉장히 중요하다
- 위치는 임의로 드래그해서 지정하더라도 앵커포인트는 어디에서부터 시작할 것인지 올바르게 설정하는 것이
굉장히 중요하다

5. 버튼에 이미지 넣기
- 이미지를 넣기 전에 SizeX와 Y에 적절한 값을 넣어주는 것 또한 중요하다 (여기서는 64*64)
- Style->Normal / Hovered / Pressed /Disable 에 전부 같은 이미지를 넣어준다.
- Disable의 경우 0.4로 투명도A를 조절해눈다. 
- 테두리를 사용하지 않는경우 Draw As에서 None으로 설정해준다

- 텍스트 블록을 사용할 경우 Size To Content를 설정해주면 텍스트에 맞춰서 크기가 알아서 변경된다.

6. 버튼 기능만 사용하고 하위에 이미지를 넣을 경우
- 기본적으로 버튼은 하나의 자식만 가질 수 있도록 설정되어있다. 
- 그래서 버튼에 image를 넣는 것 보다는 Canvas나 HorizontalBox같은 것들을 넣어준다. 
- 그리고 그 하위계층으로 이미지를 넣어서 이미지의 크기들을 조절하거나 text를 따로 더 추가할 수 있다. 
- 폰트가 달라지거나, 텍스트의 길이가 달라지더라도 이미지가 찌그러지지 않도록 조절할수 있다. 

// 컴포넌트 교체하기
- 만약 이미 계층구조로 넣은 것을 바꾸고 싶다면 우클릭->ReplaceWith로 다른 컴포넌트로 변경해줄 수 있다.

// 컴포넌트를 하나의 상위 개체를 이용해 묶기
- 묶을 컴포넌트를  같이 선택하고 우클릭 -> Wrap With
ex) 두개의 컴포넌트를 HorizontalBox 안에 배치하여 균일하게 나올 수 있도록 설정한다. 

7. Text Block
- AutoWrap을 체크하게되면 크기에 맞춰서 알아서 줄바꿈이 되어진다. 
- 원하는 폰트를 넣어서 폰트에 맞게 지정되도록 설정해줄 수 있다. 


- Shadow Color에서 A값을 1로 변경하면 텍스트에 그림자 효과를 줄 수 있다.

 

 

위젯 버튼 공용화(위젯 블루프린트 추가생성 -> 컴포넌트화)

전체의 위젯이 모여있는 하나의 window는 보통 Scene또는 Page라고  접미사를 붙인다.

하지만 그 구성요소로서 역할을 하는건 WB와 다른 얘기다. 그리고 이것과 Page는 엄연하게 분리되어야만 한다. 
Component로 사용하기위해 WidgetBlueprint를 불러온다


위에서 버튼 생성했던 것을 (자르기->붙여넣기)해도 되고 아니면 연습용으로 반복해서 하나 더 만들어줘도 된다
- 다만 앵커포인트는 왼쪽위 상단에 맞춘다. 이 버튼이라는 기능을 기준으로 다른 이미지도 돌려 사용할 것이기 때문이다. 
- 밖에서 앵커의 위치를 바꾸는 것이 좋지 컴포넌트 내부에서는 가능하면 앵커는 기본 값을 그대로 유지하는 것이 좋다

그리고 완성된 WBP를 드래그 앤 드롭해서 버튼으로 붙여넣어 줄 수 도 있다.

 

 

 

공용화 했던 컴포넌트들을 내부 세팅

//----------------------------버튼-----------------------//
1. 먼저 버튼 안에 이미지를 넣었다면 이제 다 제거해준다. (버튼은 버튼으로서의 기능만 사용할 것이다)
2. 그리고 버튼 하위계층으로 이미지를 넣어주면 된다. 
3. 이미지를 IsVariable = true로 체크해준다. 


이제 Graph 탭으로 이동한다.
1. Img를 get으로 가져옴 -> Get Brush를 한다. 
// Brush 안에는 이미지뿐만 아니라 컬러 등 다양한 그래픽 관련 변수들이 있다. 이걸 세팅하기 위함이다.
2. brush -> Break 해서 구조체를 쪼갤 수 있다. 조절할 수 있는 다양한 옵션들을 여기서 확인할 수 있다. 
3. SetBrush 노드를 불러오고 Make brush를 불러와서 pin에 연결해준다.


4. break했던 brush의 다른 값들은 그대로 할 것이기 때문에 Make bruch의 pin에 그대로 연결해준다. 
5. Image만 BtnIcon이미지(안보인다면 IsVariable체크 되어있는지 확인해라) texture를 Make에 pin에 연결해준다. 
6. SetBrush노드를 PreConstruct 이벤트에 연결해준다ㅜ.


//PreConstruct 이벤트
- 생성자와  같은 역할을 한다. 엔진에서 컴파일될때 노출되는 형식을 여기서 볼 수 있다. 
//Construct 이벤트
- 아이러니하게도 위젯블루프린트에서는 beginplay와 같은 역할을 한다



7. 이제 img를 바꿔줄 BtnIcon을 intance Editable = true로 변경해준다.
8. 가능하면 BtnIcon의 이미지 기본값도 정해주면 좋다.
9. 버튼의 경우에는 hovered / pressed /default 모두 이미지가 다를 수 있기 때문에 고려해서 넣어주면 된다 .


// 위와같은 형식으로 앞으로 컴포넌트로 만든 위젯들의 옵션을 다양하게 조절할 수 있도록 세팅할수 있다. 
//Image
1. SetColorAndOpacity //컬러와 투명도를 여기서 설정할수 있다




//----------------------------------텍스트----------//
- 텍스트의 경우도 마찬가지다 set text 노드를 이용해서 텍스트를 바꿔줄 수 있다.

 

위젯 컴포넌트들 심화

위젯의 배치와 관련된 Box

아이콘, 버튼, 이미지 등을 배치할때 아래와 같은 box종류를 사용하면 좋다. 


1) Horizontal Box
- 가로로 균일하게 배치하려 할때 사용하기 좋다.

2) Vertical Box 
- 세로로 균일하게 배치하려 할때 사용하기 좋다

3) Retainer Box
- UI Material을 하위 계층구조의 모든 컴포넌트들에게 적용시킨다. 
- TextureParamer의  이름을 Material 내부의 파라미터 이름과 동일하게 세팅해준다.
- Show Effects in Designer = true 하면 플레이 하지 않고도 머티리얼이 적용된 것들 확인할 수 있다.

 

 

 

테스트 해보기

1. 해상도 설정
- Editor Preference / Level Editor / Play / GemViewportSetting = 해상도 설정


2. 블루프린트
- GetPlayerController -> ShowMouseCursor = true
- CreateWidget (우리가 만든 WBP) -> AddToViewprot

 

엔진에서 파일 이동하다가 찌꺼기가 남는경우

//filter
- Other Filter -> Show Redirectors
- 켜진 상태에서 폴더 선택 -> 우클릭 -> FixUpRedirectors 클릭

//이렇게 해주면 남은 찌거기들이 사라진다.