언리얼 모션 그래픽(UMG)에서 제공하는 텍스트 블록은 다양한 스타일 및 커스텀 옵션을 제공합니다. 하지만 스타일 변화, 인라인 이미지, 하이퍼링크와 같은 마크업을 지원하는 유연한 텍스트 블록 옵션이 필요할 수 있습니다.
UMG의 *RichTextBlock 은 보다 유연한 텍스트 블록을 제공합니다. 스타일 변경, 인라인 이미지, 하이퍼링크 등의 마크업을 지원합니다. UMG RichTextBlock은 프로젝트에 필요한 마크업 동작을 정의하기 위해 작성할 수 있는 데코레이터 클래스를 허용합니다. 또한 페이지에는 프로퍼티에 대한 상세 정보가 표시됩니다. 리치 이미지 행 및 리치 텍스트 스타일 행 데이터 타입을 사용하여 리치 텍스트 블록 위젯 및 데이터 테이블 에셋에 설정할 수 있습니다.
RichTextBlock (리치 텍스트 블록)은 데이터 테이블 에셋을 사용하여 추가적인 스타일과 커스텀 옵션을 관리합니다. 데이터 테이블 에셋으로, 별도의 스타일을 만들거나, 프로젝트에 필요한 마크업 동작을 정의하는 자체 데코레이터 클래스를 작성할 수도 있습니다. 예제 데코레이터 클래스로 포함된 RichTextBlockImageDecorator 를 자체 데코레이터 클래스 작성을 위한 시작점으로 사용할 수 있습니다.
다음 단계를 통해 UMG의 RichTextBlock과, 커스텀 데코레이터 클래스 작성 방법을 알아보세요.
데이터 테이블 에셋 생성 및 할당
리치 텍스트 블록 위젯에 스타일을 적용하기 전, 데이터 테이블 에셋을 만들어야 합니다. 이 데이터 테이블 에셋을 통해 다양한 데이터 태그 유형을 만들어 UMG 의 리치 텍스트 블록에 사용할 수 있습니다. 데이터 테이블 에셋은 텍스트 스타일을 지정하거나, 리치 텍스트로 인라인에 사용할 이미지를 지정할 수 있습니다.
테이터 테이블 에셋은 다른 에셋처럼 콘텐츠 브라우저에서 신규 추가 를 클릭하여 생성할 수 있습니다. 그리고 기타 > 데이터 테이블 을 선택하면 됩니다.
행 구조체 선택 박스가 표시되면, Rich Image Row(리치 이미지 행) 또는 Rich Text Style Row(리치 텍스트 스타일 행) 를 선택하면 됩니다.
리치 이미지 행은 커스텀 데코레이터 클래스를 사용하며, 데코레이터 클래스에 대한 자세한 내용은 데코레이터 클래스 섹션을 참고하세요.
Rich Image Row 데이터 유형
Rich Image Row 데이터 유형은 다양한 커스텀 옵션과 함께 이미지를 저장할 수 있는 예제로 제공되는 커스텀 데코레이터 클래스로, UMG 의 RichTextBlock 에서 인라인 텍스트와 함께 사용할 수 있습니다. Rich Image Row 데이터 유형 사용법 예제는 아래와 같습니다.
- 데이터 테이블 에셋을 만들고, 행 구조체 선택 박스가 나타나면 Rich Image Row 를 선택합니다.
- 리치 텍스트 블록에서 사용하고자 하는 모든 인라인 이미지에 대해 테이터 테이블 에셋에 행을 만들고, Appearance 아래 이미지의 다양한 프로퍼티를 설정합니다.
- 행 추가를 완료하면, 저장 을 클릭하고 데이터 테이블 에셋을 닫습니다.
이 세팅 관련 자세한 내용은 UMG 리치 텍스트 블록 프로퍼티 문서를 참고하세요.
Rich Text Style Row 데이터 유형
Rich Text Style Row 데이터 유형은 UMG RichTextBlock 의 텍스트에 사용할 수 있는 폰트의 다양한 스타일과 커스텀 옵션을 설정할 수 있는 기본 데코레이터 클래스입니다.
RichTextBlock 에서 사용하려는 모든 스타일에 대해 데이터 테이블 에셋에 행을 만들고 Appearance 아래 각 폰트에 사용할 다양한 프로퍼티를 설정합니다.
이 세팅 관련 자세한 내용은 UMG 리치 텍스트 블록 프로퍼티 문서를 참고하세요.
데이터 테이블 에셋에 스타일 또는 이미지 행 추가
데이터 테이블 에셋에 스타일 또는 이미지 행을 추가하는 방법은 다음과 같습니다.
- 데이터 테이블 에셋을 생성했으면, 더블클릭하여 데이터 테이블 에디터 에서 엽니다.
- 행 에디터 패널에서 더하기 부호 (+) 아이콘을 클릭하여 행을 추가합니다.
- 리치 텍스트 스타일 데이터 테이블 에셋의 첫 행에서, Row Name 칸에 Default 라 입력합니다. 다른 스타일을 지정하지 않은 경우, 프로젝트의 텍스트에 대한 기본 스타일이 됩니다. 리치 텍스트 데이터 테이블 에셋 및 리치 이미지 데이터 테이블 에셋 둘 다, 각 행의 행 이름을 각괄호 안에 넣은 태그가 바로 리치 텍스트 블록 위젯에 그 행의 스타일 또는 이미지를 적용할 때 사용됩니다.
첫 행 "Default" 이름을 제외하고, 행 이름은 아무렇게나 지어도 됩니다. 접두사든 대소문자 구분이든 다른 어떤 규칙에도 제약받지 않습니다.
데이터 테이블 에셋의 스타일 또는 이미지 행 제거
데이터 테이블 에셋의 행을 삭제하려면, 먼저 삭제하고자 하는 행(들)을 선택합니다. 그런 다음 행 에디터 패널의 더하기 부호 (+) 아이콘 옆 X 아이콘을 클릭합니다.
UMG UI 디자이너에서 리치 텍스트 블록 위젯 사용
리치 텍스트 블록 행 또는 리치 이미지 행으로 데이터 테이블 에셋을 만들 때, UMG UI 디자이너 to add Rich Text 를 사용하여 리치 텍스트 블록 위젯을 디자이너 뷰포트에 추가할 수 있습니다.
리치 텍스트 블록 위젯 추가
왼쪽 팔레트 패널에서 Rich Text Block 이 보일 때까지 스크롤을 내립니다. Rich Text Block 을 그래프 로 드래그합니다. 텍스트 크기를 크게 할 경우 Rich Text Block 스케일이나 크기를 조정합니다.
텍스트 박스 스케일은 텍스트 크기에 맞게 자동 조절되지 않습니다. 박스 크기를 텍스트 크기에 맞게 조절하지 않으면, 일부 텍스트가 잘려 제대로 표시되지 않을 수 있습니다.
데이터 테이블 에셋을 리치 텍스트 블록에 할당
리치 텍스트 블록 위젯을 그래프에 추가했으면, 선택한 뒤 오른쪽 디테일 패널을 사용하여 Appearance 섹션의 Rich Text Style Row 또는 Rich Image Row 데이터 유형을 적용합니다.
(w:400)
Text Style Set 를 사용하여 Rich Text Style Rows 를 적용합니다. 데이터 테이블 에셋에 만든 스타일에 대한 레퍼런스는 지은 Row Name 을 사용하면 됩니다.
Decorator Classes (데코레이터 클래스)를 사용하여 프로젝트에 생성한 커스텀 데코레이터 클래스를 적용할 수 있습니다. 이 예제에서는 리치 텍스트가 있는 인라인 이미지를 만들기 위해 제공된 Rich Image Row 데코레이터 클래스를 사용합니다.
텍스트에 스타일 적용
데이터 테이블 에셋을 리치 텍스트 블록 위젯에 할당했으면, 텍스트에 스타일을 적용해야 합니다. 스타일 적용 방법은 다음과 같습니다.
- 디테일 패널에서 Content 섹션을 찾습니다.
- 리치 텍스트 블록의 Text 칸에 텍스트를 입력합니다.
- 데이터 테이블 에셋의 Default 행에 선택한 스타일로 텍스트가 표시되는 것이 보입니다. 예를 들어 "This is some rich text!" 라 입력했다면, 데이터 테이블 에셋으로 지정한 기본 Appearance 값으로만 표시될 것입니다.
-
텍스트에 다른 스타일을 적용하려면, 각괄호에 스타일 행 이름을 입력하며, 포맷은
Text 입니다.
예:This is some <RichText.Emphasis>rich</> text!
데이터 테이블 에셋 행 이름을 리치 텍스트 블록에 참조할 때, 행 이름은 대소문자를 구분하지 않습니다.
데코레이터 클래스
리치 텍스트 블록에 스타일 텍스트 이외 다른 것을 포함하려면, Decorator Class (데코레이터 클래스)를 만들면 됩니다. 데코레이터 클래스를 만들 때, Slate (슬레이트)를 사용할 수 있도록 자체 마크업 태그를 구성하면 텍스트 안에 다른 요소를 자연스럽게 렌더링할 수 있습니다.
데코레이터 사용
자체 데코레이터 클래스를 사용하기 시작하는 데 도움이 되도록 포함시킨 RichTextBlockImageDecorator 예제로 리치 텍스트 블록을 사용할 때 텍스트에 인라인 이미지를 추가할 수 있습니다.
자체 데코레이터 클래스를 참조하는 데이터 테이블 에셋 생성 방법은, 위의 '데이터 테이블 에셋 생성 및 할당' 섹션을 참고하세요.
자체 데코레이터 클래스를 만들어 사용하려면, 예제 RichTextBlockImageDecorator 클래스를 확장한 뒤, 데이터 테이블 에셋에 있는 서브클래스를 지정하면 됩니다. 한 가지 방법은 다음과 같습니다.
- 새 블루프린트 클래스를 생성하고, 부모 클래스로 RichTextBlockImageDecorator 를 선택합니다.
-
새 블루프린트를 열고, 데이터 테이블을 Image Set 프로퍼티에 할당합니다.
RichTextBlockImageDecorator 클래스는 부모 클래스 목록에 나타나지 않습니다. 대센 C++ 클래스로 확장할 수 있습니다. 그런 다음 C++ 파일에서 데이터 테이블 에셋을 할당하거나, 헤더 상단 UCLASS 매크로에 Blueprintable 을 추가한 뒤 서브클래스를 블루프린트로 확장합니다.
- 데코레이터 클래스 구성을 마쳤으면, 그것을 UMG 리치 텍스트 블록의 데코레이터 클래스 배열에 추가합니다. 그런 다음
마크업을 ("ImageNameFromTable" 부분에 할당한 행 이름을) 사용하여 데이터 테이블에서 이미지를 삽입하면 위젯을 컴파일하자마자 나타납니다.
새 데코레이터 추가
언리얼 엔진에 RichTextBlockImageDecorator 예제 데코레이터 클래스가 제공되기는 하지만, 자체 커스텀 데코레이터 클래스를 정의해서 Slate 를 활용하여 텍스트에 원하는 인라인을 무엇이든 추가할 수 있습니다. 이를 위해서는 URichTextBlockDecorator, FRichTextDecorator 두 클래스를 작성해야 합니다. 이 클래스를 구성했으면, DecoratorClasses 배열을 사용해서 RichTextBlock 에 데코레이터를 추가한 뒤, 마크업을 사용하여 데코레이터의 텍스트를 파싱할 수 있습니다.
URichTextBlockDecorator 가 정의하는 UObject 는 CreateDecorator 를 정의하며, 여기서 중요한 작업을 하는 FRichTextDecorator 인스턴스로의 SharedPtr 를 반환합니다. 여기서 프로퍼티나 유틸리티 함수를 구현할 수도 있는데, 그러면 디자이너가 데코레이터를 블루프린트로 서브클래싱할 수 있습니다. 그러면 원하는 데이터는 무엇이든 전달할 수 있습니다. 기억하실 점은, RichTextBlockImageDecorator 가 데이터 테이블 프로퍼티를 정의하므로, 이미지 테이블을 전달할 수 있습니다. 블루프린트에서 수정하려는 것은 여기 UObject 에도 있을 것입니다.
리치 텍스트 블록 및 데이터 테이블 에셋 프로퍼티 전체 목록은 UMG 리치 텍스트 블록 프로퍼티 문서를 참고하세요.