Unreal Engine Study

언리얼 엔진의 TextRender를 이용할 때 한글이 깨지는 문제 해결

블루프린트 액터에 TextRender 컴포넌트를 추가해서 영어를 출력하면 다음과 같이 아무런 문제가 없는 것을 확인할 수 있다. 그러나 한글을 출력하기 위해 입력하면 제대로 한글이 출력되지 않는 문제가 발생한다. 

TextRender 에 영어를 출력하면 문제가 없다

TextRender를 통해 출력한 한글이 깨지는 현상

언리얼 엔진(4.16.3)에서 위의 문제를 해결하기 위한 방법은 로컬 시스템에서 지원하는 폰트를 등록하고 사용하면 된다. 

좀더 구체적으로 설명하자면 언리얼 컨텐트 뷰에서 폰트를 새로 생성하여 현재 시스템에서 지원하는 폰트를 찾아 등록하고 생성된 폰트를 TextRender에 설정하여 사용하면 된다.

새로운 폰트 생성

컨텐트 브라우저에서 마우스 우측을 누르고 [User Interface > 폰트] 를 선택하고 이름을 Font_KO 등으로 지정한다

새로 생성된 Font_KO를 더블클릭하여 에디터를 열고 [디테일]뷰 / Font / Font Chche Type 항목에서 Runtime 대신 Offline 으로 설정하면 다음과 같이 묻는 창이 뜬다

글꼴 선택 창에서 지원되는 한글 글꼴과 스타일, 크기를 선택하고 [확인] 버튼을 누른다

아래의 그림에서 [디테일]뷰/Font/Font Cache Type 항목이 Offline으로 변경된 것을 확인할 수 있다. 

아래의 창에서 [디테일/Import Options/Chars] 항목에 표준한글 문자를 복사해 넣으면 된다. 한글 표준문자는 아래에 첨부된 텍스트파일에 저장되어 있으므로 다운로드하여 메모장으로 열고 모두 복사하여 Chars항목에 붙여 넣으면 된다

KS-1001.txt

아울러 Texture Page Width, Texture Page Max Height 항목도 1024로 변경한다

폰트 에디터의 툴바에서 [애셋> Font_KO 리임포트] 항목을 선택하고 [저장] 을 누른다

TextRender 컴포넌트에 새로운 폰트 설정

폰트 에디터를 닫고 언리얼 레벨 에디터로 이동하여 TextRender 를 선택하고 [디테일]뷰 / Text / Font 항목에서 Font_KO를 선택한다

텍스트 머티리얼도 변경해야 하므로

위의 화면에서 Font 항목 위의 Text Material 항목에 있는 돋보기 아이콘을 클릭하고 컨텐뷰에 있는 텍스트 머티리얼을 찾아 더블클릭하여 머티리얼 에디터를 연다.

위의 화면에서 Font 노드의 R 핀에 Lerp노드의 Alpha 핀이 연결되어 있는데 아래의 그림과 같이 Font 노드의 Alpha 핀이 Lerp의 Alpha 핀에 연결되도록 변경하고 Font 노드가 선택된 상태에서 [디테일]뷰 / Material Expression Font Sample / Font] 항목에서 앞서 생성된 Font_KO를 선택하고 툴바에서 저장 버튼을 누른다

TextRender 에 한글출력 테스트

머티리얼 에디터를 닫고 언리얼 레벨 에디터로 돌아가서 TextRender 컴포넌트에 한글이 제대로 출력되는지 확인한다

게임을 실행했을 때도 제대로 한글이 출력되는지 확인한다

보다 실용적인 예제로, 마우스로 액터를 클릭할 때 클릭된 횟수를 TextRender에 출력하는 블루프린트를 작성해본다. 아울러 TextRender가 카메라를 향하여 항상 정면을 보이도록 회전하게 한 내용이다

오브젝트 외곽선을 밝게 하는 효과(Outline Highlight)

Post Process Material 생성

Post Process Volumn에 Post Process Material 설정하기

Post Process Material 효과내기

아래의 블루프린트는 머티리얼 에디터의 그래프 내용이다. 오브젝트의 외곽선에 특정색의 하이라이트 효과를 내기 위한 것이며 이 페이지 위쪽에 명시된 페이지를 참조하여 언리얼 4.16.3 버전에서 작성하여 테스트한 것이다

게임 실행시에 마우스로 액터를 클릭하면 Post Process 머티리얼이 적용되도록 한 경우의 블루프린트

당구 큐(Cue)를 만들고 C키를 누르면 플레이어 카메라 앞 아래에 큐가 나타나고 마우스 우측으로 큐를 클릭하여 큐를 선택한 후 마우스를 앞뒤로 움직이면 큐가 공을 향하여 앞뒤로 움직이게 한다. 큐가 놓일 때는 공을 향하게 하고 큐를 선택하여 큐를 앞뒤로 움직이면 큐가 공을 칠 수 있도록 하는 것이 목표이다.

여기서 공은 클래스 블루프린트 없이 그냥 기본 구(Sphere)를 드래그하여 뷰포트에 놓으면 된다

1. BP_Cue 클래스 블루프린트 생성

당구 Cue를 표현한 클래스 블루프린트를 생성한다(Actor 기반)

Static Mesh 를 컴포넌트로 추가하고 Static Mesh를 선택한 후 우측 [디테일]뷰 Static Mesh 항목에서 Shape_Cylinder 를 선택하여 설정한다

뷰포트에서 실린더가 길이방향이 X축과 평행하도록 회전툴을 사용한다

당구공의 크기에 적합한 굵기와 크기로 실린더를 조정한다

2. BP_Cue 이벤트 그래프에 다음과 같은 내용을 작성한다 (마우스로 클릭된 액터가 BP_Cue인지 확인하는 방법을 잘 이해야야 한다)

큐가 놓인 방향을 향하여 앞뒤로 움직이도록 하는 한가지 방법을 적용한다

3. 레벨 블루프린트에는 다음 내용을 작성한다(큐가 공을 향할 수 있도록 큐의 위치와 회전량을 계산하는 방법을 이해해야 한다)

마우스로 액터를 클릭할 때 마우스 커서 아래에 있는 액터를 확인하는 방법

GetPlayerController 함수를 통해 얻은 객체에 포함된 2개의 함수를 이용하면 된다

- GetHitResultUnderCursorByChannel : 액터의 Collision이 Block 으로 설정된 경우 사용 가능

- GetHitResultUnderCursorforObjects : 액터의 Collision이 Overlap으로 설정된 경우 사용 가능

4. 큐와 공의 충돌 후 적절한 충돌반응 구현하기

BP_Cue 액터의 Collision 설정이 Block 으로 된 경우에는 공과 충돌할 경우 그 즉시 언리얼 물리엔진이 적용되어 당구공과 같은 현상을 구현하기 곤란하므로 BP_Cue 액터의 Collision을 Overlap으로 설정한 후에 Overlap 이벤트에서 Add Impulse at Location 노드를 사용하여 실제 당구공과 유사한 물리현상(당구공의 이동과 회전)을 구현할 수 있다. 당구공은 Collision 설정을 Block으로 해야 한다. 

당구공은 Block, 큐는 Overlap으로 설정하면 큐와 공이 충돌했을 때 양쪽 모두에서 Overlap 이벤트가 발생하므로 둘 중 하나를 선택하여 로직을 구현하면 된다. 큐와 공의 충돌시 공측의 반응이 중요하므로 공 클래스에 충돌반응을 구현하면 된다

당구공 클래스와 큐 클래스는 다음과 같이 아주 간단하게 만들어 테스트할 수 있다

아래의 내용은 마우스에 따라 큐를 움직여 공을 치면 큐의 방향과 속도에 따라서 공의 방향과 속도가 결졍되는 내용이다. 

공을 마우스 왼쪽으로 클릭하면 그 지점에 당점이 표시되고 C 키를 누르면 당점을 향하여 큐가 생성되어 보여진다.

큐를 마우스 우측으로 클릭한 후에 마우스를 움직이면 마우스의 상하위치(Y값)에 따라서 큐도 전후로 움직인다. 마우스를 빠르게 앞으로 밀어서 공을 치면 큐가 당점을 치게 되고 공은 큐의 방향과 속도에 따라서 이동하게 되며 큐는 사라진다. 공이 이동할 때는 당점의 위치에 따라서 공이 회전하면서 이동하므로 당구공의 회전에 따른 가시적, 물리적 효과를 낼 수도 있다.

큐(BP_Cue) 클래스 블루프린트 만들기

위의 그림에서 컴포넌트로 추가된 Static Mesh에 우측 [디테일] 뷰의 Static Mesh항목에서 Shape_Cylinder를 선택하고 뷰포트에서 x축 방향으로 실린더를 눕혀놓고 길이와 두께를 조절하면 된다. Static Mesh컴포넌트를 선택했을 때 우측 [디테일]뷰의 Physics 패널과 Collision 패널은 다음과 같이 설정한다

BP_Cue클래스의 Static Mesh 컴포넌트의 속성설정

BP_Ball 클래스 블루프린트 생성

위의 컴포넌트 패널에서 Static Mesh를 선택하고 우측 [디테일] 뷰의 Physics, Collision 패널은 다음과 같이 설정한다

BP_Ball 클래스 블루프린트의 Static Mesh 컴포넌트 속성설정

레벨블루프린트의 내용

BP_Cue 클래스 블루프린트의 내용

BP_Ball 클래스 블루프린트의 내용

1. 배경을 투명하게 처리할 이미지를 준비한다

2. https://pixlr.com/ 접속하여 [컴퓨터로부터 이미지 열기]를 클릭한다

2. 보기>줌인 기능을 이용하여 이미지를 확대하고 필요한 부부만을 잘라내기 위해 사각 선택툴로 이미지의 필요부분만 선택한다

3. 이미지 > 오려내기 를 사용하여 필요한 부분만 오려낸다

4. 오려내기를 마친 후 보기 > 실제픽셀 을 선택하여 원래 이미지의 크기로 되돌아 간다

5. CTRL+A 를 누르고 이미지 전체를 클립보드에 복사(CTRL+C)한다

6. 파일 > 새 이미지 를 선택하고 아래와 같이 설정한다. 이 설정 결과 클립보드에 저장된 이미지와 동일한 크기의 배경이 투명한 빈 이미지가 생성된다.

7. 격자무늬의 바탕에서 CTRL+V를 누르면 새로운 레이어가 생성되면서 클립보드에 저장된 이미지가 붙여넣기 된다

8. 요술지팡이 선택툴을 사용하여 이미지의 빈 부분(흰색부분)을 선택하고 DELETE 키를 누르면 색상이 제거된다

9. 레이어 > 보이는 레이어 병합을 선택하여 모든 레이어를 병합한다

10. 파일 > 저장 을 선택하고 PNG 형식을 선택하여 [확인] 버튼을 누른다

언리얼 엔진에서 지원하는 Decal을 블루프린트를 이용하여 원하는 Actor 위에 보여주는 방법

https://answers.unrealengine.com/questions/2184/how-to-make-a-decal-and-spawn-it.html

To spawn the decal you can use either "Spawn Decal At Location" (for non-moving objects like wall) or "Spawn Decal Attached" (for moving objects like a vehicle). 

당구공의 표면에 적색의 점을 표현하는 Decal을 생성하고 블루프린트에서 사용하는 예

CB에서 마우스 우측 > 머티리얼 > M_Decal_Red_Dot 등의 이름을 지정한다

더블클릭하여 머티리얼 에디터를 열고 왼쪽 아래의 [디테일] 뷰 / Material/Material Domain : Defered Decal 선택

사용할 텍스쳐가 알파채널을 가진 PNG 파일이라면 Blend Mode : Translucent 으로 설정한다

텍스쳐로 사용할 이미지를 CB에서 드래그하여 머티리얼 그래프에 놓고 RGB 핀을 [베이스 컬러] 핀에 연결한다

BP_Ball 클래스의 [이벤트 그래프]에서 다음과 같이 로직을 구성하고 게임을 실행하여 G 키를 누르면 플레이어 카메라가 바라보는 공의 정면에 위에서 준비한 Decal이 나타난다

마우스로 클릭된 액터의 표면에 데칼을 출력하는 예

ConvertMouseLocationToWorldSpace 노드는 마우스 커서의 2차원 좌표를 3차원 공간의 위치로 변환해준다. 그러나 그 위치는 마우스가 올려진 특정 액터의 표면 위치가 아닌 현재 영상이 보여지는 카메라의 표면의 위치에 해당하므로 마우스 커서 아래의 액터의 표면의 월드좌표를 구하려면 ConvertMouseLocationToWorldSpace 노드의 WorldLocation 핀과 WorldDirection을 사용하여 LineTraceByChannel 을 이용하여 라인이 충돌한 위치를 얻으면 된다

쉽게 표현하자면 ConvertMouseLocationToWorldSpace노드를 통해 얻은 마우스 커서의 월드좌표는 그 어떤 액터의 좌표를 의미하지 않고 모든 액터로부터 이격된 곳에 있는 카메라 렌즈상의 마우스 위치가 월드좌료로 리턴된다. 

당구공을 마우스로 클릭하여 당점을 설정할 때 클릭된 당구공의 표면 월드좌료를 저장했다가 당구공에 충격을 가할 때 그 위치에 가하면(Add Impluse At Location) 당구공이 이동하면서 회전하는 효과를 낼 수 있다.

위의 그림에서 LineTraceByChannel 노드의 Ignore Self 항목에 체크를 해제해야 공 자신에게도 라인이 그려진다.

Decal을 그릴 때 적절히 회전하여 그리는 방법

Decal이 그려지는 위치는 LineTraceByChannel 을 통해 구할 수 있고 Decal이 그려질 때 액터 상의 그려지는 방향에 따라서 Decal도 적절히 회전하여 그려줘야 Decal의 정면이 보여진다. 

간단한 벡터의 연산을 통해 Decal의 회전량을 구하는 방법은 아래의 내용을 참고하면 된다. 레벨 블루프린트를 이용한 경우이다