[📜일지] 언리얼5 커스텀 슬레이트 위젯 사용 사례

[nyvux(publish8969)]

Phil in the Mirror라는 게임 1인 개발 했고

쫄딱 망한 뒤 내가 했던 작업들 간단하게 정리하고 있어서 내용을 여기에도 공유하려고 해.

기술적인 내용들 위주로 작성될 거라, 언리얼 엔진을 사용하지 않는 게이들한테는 별로 도움은 안 될 듯.

이번 내용은 언리얼 엔진에서 내가 원하는 UI의 형태를 만들기 위해서

유저 위젯 블루프린트가 아닌 C++ 코딩을 통해 커스텀 슬레이트 위젯을 만들고 활용한 사례야.

자세히 설명하려고 노력하다 보니 코드가 많아서 읽기 어려울 수도.. 이해좀

글고 모바일에서는 코드가 제대로 안 보이네. 이거 관련해서 모바일도 잘 보일만한 코드 html 포매터 추천해줄 인붕이 있음 댓글좀

일단 carbon으로 대체해서 올림

===============================================

Custom Slate Widget

  Phil in the Mirror에서는 언리얼 엔진 5에서 기본적으로 제공하지 않는 UI 요소 몇몇가지가 필요했는데요. 그러한 요소들을 어떻게 만들어서 해결했는지에 대해서 기술해볼까 합니다. 단순히 유저 위젯 블루프린트를 이용한 에디터 수준에서 해결할 수도 있었지만 코드 수준에서 이들을 적절히 구현해서, 유연함과 성능적 이점 및 사용성을 챙긴 사례를 공유합니다.

1) Redact Decorator

  Phil in the Mirror에서 플레이어는 다양한 문서들을 읽고 사건들의 관계를 파악하여 숨겨진 날짜들을 추리해야 합니다. 따라서 중요한 정보들은 가려놓고, 이들을 추리할 수 있게 해야 했습니다. 다만 여기서 고려되어야 할 사항이 있었는데요. 바로 로컬라이제이션입니다. 텍스트 상에서 가려질 부분들은 어떤 언어이느냐에 따라서 위치가 달라지고, 길이도 달라지게 됩니다. 이를 자연스럽게 해결할 필요가 있었습니다.

텍스트의 일부가 검정색으로 가려져 있습니다.

  단순히 U+2588(█) 문자를 이용할 수도 있었지만, 다음과 같은 문제가 있었습니다: 1) 언어마다 글자의 개수가 상이한데, 정말로 문맥 상의 단어가 자연스럽게 가려지는 느낌을 연출하기 어려웠습니다. 가령 "손가락 절단 사고"와 "finger amputation accident"는 글자수의 차이가 커서, 어느 한쪽 언어에서 어색하게 보이는 측면이 있습니다. 2) 사이에 공백이 없이 이어지는 느낌이 필요했습니다. (███처럼 이어서 써보면 사이에 애매한 공백이 보입니다)

  따라서 텍스트가 렌더링될 때, 해당 영역 위에 검정색 박스를 그려낼 필요가 있었습니다. 이는 RichTextBlock의 기능을 확장하여 구현할 수 있었습니다. 정확히는, Decorator를 만드는 것이죠. RichTextBlock은 Decorator를 추가할 수 있는데, 이러한 Decorator들은 RichTextBlock의 내용에 접근하여 본인이 꾸밀 수 있는 것들을 꾸미게 됩니다. 따라서 저는 "<redact>content</>" 따위로 감싸져있는 내용을 RedactDecorator가 접근하여 검정색 박스를 그려내는 형태로 구현하였습니다.

위젯을 이용한 가리기

  두 가지 방법을 고려할 수 있었는데요. 첫 번째는 해당 위치에 SBox 위젯을 적절히 생성해서 가리는 것입니다. 이것이 제가 처음으로 접근한 방법이었습니다. 코드는 다음과 같습니다:

  RichTextBlock에서 텍스트를 처리할 때, Run이라는 단위로 나누어서 텍스트를 처리하게 됩니다. 텍스트의 길이가 길다거나 해서 줄바꿈 등이 일어날 수 있기 때문에, 이러한 것들로부터 자유로운 최소한의 렌더 단위를 갖는 것이죠(예를 들면, 단어 하나). Supports()는 해당 Decorator가 어떤 텍스트를 처리할지를 결정합니다. Create()에서는 Supports()에서 true를 반환한 Run이 인자로 넘어오게 되고, Decorator 클래스들은 주어진 Run들에 대해서 추가적인 행위를 할 수 있습니다. 

  Run 정보를 이용해서, 어떤 TextStyle을 적용해야 할지 결정하고, FontMeasure를 이용해서 해당 Run이 어느정도의 크기를 갖고 어느 위치에 렌더링될지 계산할 수 있습니다. 이를 이용해서 검정색의 Border를 자식으로 갖는 SBox 위젯을 생성하여 해당 텍스트를 가리는 것입니다. 

  하지만 이는 어쨌거나 새로운 위젯을 생성하는 것이기 때문에, 약간의 오버헤드가 있습니다. 애초에 FSlateTextRun에서 '텍스트를 렌더링'하는 과정을 거치므로, FSlateTextRun을 확장하여 '텍스트를 렌더링하지 않고 검정색 박스를 렌더링'하게끔 하면 더 간결한 구현이 될 것입니다.

  기존의 RedactDecorator는 가려져야 할 텍스트의 Run에 대해 FSlateWidgetRun을 반환하고, 해당 위젯에 텍스트와 박스를 넣었습니다. 대신에, FRedactTextRun을 만들어서 반환하도록 하고, FRedactTextRun은 글자와 관계없이 그 크기만큼 단순히 검정색 상자를 렌더링하도록 개선하면, 텍스트를 렌더링하는것과 복합 위젯을 렌더링하는 오버헤드 등을 없앨 수 있을 것입니다:

  RedactDecorator는 다음과 같아질 것입니다:

  이런 식의 구현은 "<redact>아주 긴 문장으로 이루어진 텍스트</>" 따위처럼 구성된 상황에서도 이점이 있었습니다. 왜냐하면, SBox를 직접 구성하는 경우에는 어쨌거나 하나의 SlateWidgetRun으로 구성되기 때문에 여러 단어로 구성되어 있음에도 불구하고 줄바꿈이 이루어지지 않았었기 때문입니다. 하지만 FRedactTextRun은 FSlateTextRun을 상속받기 때문에, 내부적으로 단어 별 wrapping이 이루어지고 이에 대한 이점을 얻을 수 있었습니다. 다음처럼 자연스럽게 줄바꿈이 이루어지는 것을 확인하세요:

아주 긴 검열 상자의 경우 자연스럽게 줄바꿈이 이루어집니다.

2)  Fixed Size Thumb Scroll

  Phil in the Mirror에서는 문서를 스크롤하면서 읽을 수 있어야 했는데요. 저는 스크롤의 위치를 표시하는 막대(thumb)가 아주 작고 고정된 크기였으면 했습니다. 그러나 언리얼 엔진에서 제공하는 스크롤 위젯에서는 막대의 크기를 조절할 수 있는 옵션이 없었습니다. 따라서 이러한 UI를 별도로 만들어줄 필요가 있었습니다.

우측 인디케이터에서 하얀색 상자같이 작은 스크롤 막대를 원했습니다.

  우선 커스텀 슬레이트 위젯을 사용하지 않고 고려할 수 있는 가장 간단한 방법은 다음과 같습니다: 1) 언리얼 엔진의 기본 스크롤 바를 숨긴 뒤 2) 제가 원하는 형태의 스크롤 바 형태의 위젯들을 잘 조합해서 배치하고 3) 스크롤의 변화를 받는 리스너를 만들어 해당 위치에 따라 막대 위치를 직접 조절해주는 것입니다. 물론 이렇게 해도 할 수 있지만, 스크롤 위젯과 인디케이터를 위젯 블루프린트를 이용해 허술하게 묶는 것이 약간은 걱정이 되었습니다. 저는 언리얼 엔진 경험도 부족했고, 차후 어떻게 변경될 지 몰랐기 때문입니다.

  따라서 스크롤 위젯과 동일하지만 고정된 막대 길이를 갖는 커스텀 슬레이트 위젯을 만들어 해결하기로 하였습니다. 우선, FixedThumbScrollBox라는 위젯을 만들어야 했습니다. 이는 별다른 작업은 아니고, 그냥 위젯 블루프린트를 이용하던 것을 C++ 수준으로 옮겨놓은 것에 가깝습니다. UFixedThumbScrollBox는 단순히 안쪽에 SScrollBox를 만들고, 옆에 각종 버튼과 FixedThumbScrollBar가 배치되는 복합 위젯입니다.

대략적인 위젯의 구성. 최상위에는 HorizontalBox가, 그 하위에는 ScrollBox와 VerticalBox, VerticalBox 하위에는 UpButton과 FixedThumbScrollBar, DownButton이 존재합니다.

  코드는 다음과 같습니다:

  여기서 핵심은 SScrollBox를 배치한 뒤, SScrollBox의 변화를 추적하는 커스텀 ScrollBar를 구현해야 한다는 것입니다. 이는 SFixedThumbScrollBar로 구현되었으며, SScrollBar를 상속받습니다. 다행히, SScrollBox에는 ExternalScrollBar라는 인수가 있어 이를 이용하여 외장 스크롤 막대를 손쉽게 구현할 수 있었습니다. 

  SFixedThumbScrollBar에서는 큰 구현의 변화가 없었습니다. 단순히 그리는 방식만 변경하면 되었기 때문이죠. 따라서 1) FixedThumbSize를 제외한 모든 멤버들은 부모의 초기화를 따라가고, 2) OnPaint에서 MakeBox를 이용해 적절한 위치에 막대를 그려주기만 하면 되었습니다. 다음 코드를 참고하세요:

  저는 Vertical로만 제대로 동작하면 되었기 때문에, Horizontal 방향에 대해서 별도의 테스트를 거치지는 않았습니다. 하여튼, 막대의 위치는 스크롤의 상대적인 위치(0이면 맨 위, 1이면 맨 아래)를 기준으로 중앙점을 잡으면 될 것입니다. 코드에서는 ThumbTop을 계산해야 했으므로, 막대의 전체 길이에서 FixedThumbSize만큼을 뺀 뒤에 상대적인 위치를 적용하였음에 유의하세요.

  결과는 다음과 같습니다. 고정된 길이의 작은 막대가 스크롤의 위치에 따라 적절히 변하는 것을 확인할 수 있습니다:

3) Grid Table Decorator

  언리얼 엔진에서는 격자의 형태로 레이아웃을 구성할 수 있는 GridPanel을 제공하는데요. 저는 문서들을 연출해야 했기 때문에, 이를 이용해서 표 등을 쉽게 그려내고 싶었습니다. 표 레이아웃 디자인을 별도로 만든 뒤 이미지를 삽입하고, 각 위치에 TextBlock을 배치하는 것은 유연하지 않다고 생각했습니다. 예를 들어 한 행을 더 추가해야 한다고 할 때, 표 레이아웃 이미지를 다시 그려야 하기 때문이죠. 또한, 로컬라이제이션을 고려해 TextBlock의 사이즈에도 많은 신경을 써야했을 것입니다. 절차적인 디자인이 필요한 순간이었죠.

  특히, GridPanel을 사용하면서도 몇몇가지 디자인 요구사항을 해결할 수 있어야 했습니다. 각 표 항목을 구분하는 경계선을 그릴 수 있어야 했고, 특정 행 다음에는 구분선을 그릴 수도 있어야 했습니다. 또한 외곽선은 그리지 않고 내부선만 그릴 수도 있어야 했습니다. 다음 그림을 참고하세요:

헤더 다음의 행은 굵은 선으로 그려져있고, 표의 외곽선은 그려져있지 않습니다.

  절차적인 디자인을 사용하지 않는 간단한 방법은, GridPanel 안에 다시 Border를 만들고 Border 안에 TextBlock을 삽입한 뒤 Border를 이용해서 각 선의 디자인을 해결하는 것입니다. 하지만 이는 표의 모든 칸에다가 수행해야 하는 작업들이고, 구분선을 그린다거나 외곽선을 그리지 않는 등의 디자인을 하기 위해서는 조금 더 복잡한 작업이 요구됩니다. 따라서 이런 방법 대신, GridTableDecorator라는 위젯을 만들어 요구사항에 맞게 표를 꾸며주도록 했습니다.

GridTableDecorator 하위의 GridTable은 GridTableDecorator에 의해서 꾸며지게 됩니다.

  기본적인 전략은 다음과 같습니다: GridTableDecorator의 자식으로 GridTable을 놓으면, GridTableDecorator는 해당 GridTable을 자신의 속성에 따라 적절히 꾸밉니다. 이를 위해서는  GridPanel의 속성을 기반으로 경계선이 어디에 위치해야 하는지 계산할 수 있어야 합니다. 다만 저는 Span 관련 속성을 사용하지 않았으므로, 이와 관한 고려는 정확한 테스트를 거치지 않았습니다. 다음 코드를 참고하세요:

  이렇게 찾아진 행과 열의 경계를 이용하여 선을 그려주기만 하면 됩니다. 다음 코드를 참고하세요:

  선을 그리는 것은 단순히 MakeLines를 이용해서 쉽게 해결할 수 있었고, 다만 선이 그려지는 위치를 계산하는 과정에서 언리얼 엔진이 UI 트랜스폼을 어떻게 다루는지에 대한 이해가 부족해 애를 먹었던 것 같습니다. 결론적으로는 GridTableDecorator를 이용해서 손쉽게 GridTable을 꾸미고 유연한 표 디자인을 만들 수 있게 되었습니다.

끝.

[아침빵(lobster7304)]

[Indie 1(182.215)]

언리얼단은 개추야 근데 게임 깔끔하고 괜찮아보이는데 왜 안팔렸을까..

[nyvux(publish8969)]

그건 당신이 사주지 않아서..

[Indie 1(182.215)]

[불타는키보드(1bnmaker)]

[Indie 2(218.144)]

이야 이건 거의 mfc시절 코딩느낌 나네

[라우브(sanha1126)]

님 이거 진짜 재밌던데 차기작 개발하고 있는 거 더 있나요