Timberborn의 복잡한 런타임 UI 제작 과정

Mechanistry가 어떻게 UI 툴킷으로 전환하여 생산 시간을 대폭 절약하고 비버 기반 도시 건설업체인 '광고 지면'을 위한 복잡한 사용자 인터페이스를 제작했는지 알아보세요.

무료 실습 가이드를 통해 Unity 유저. '광고 지면'의 타겟 고객 인터페이스 디자인 및 구현에 대해 알아보세요. 전자책 다운로드

UI 개발 간소화

리소스가 적은 소규모 팀이 복잡한 도시 건설 게임 UI를 제작하려면 어떻게 해야 할까요? Timberborn이 Steam의 얼리 액세스 히트작이 되었을 때, Mechanistry는 빠르게 성장하는 플레이어 기반을 위해 직관적인 UI로 빠르게 반복 작업해야 했습니다. UGUI에서 UI 툴킷으로 전환함으로써 관리하기 쉬운 깔끔한 코드로 제작 속도를 높일 수 있었습니다.

Unity 선택

Mechanistry는 소프트웨어 개발 경력을 보유하고 있기 때문에 깔끔한 코드, 민첩한 워크플로, 우수한 유저. '광고 지면'의 타겟 고객 경험을 중요하게 생각합니다. 그래서 그들은 Unity를 선택하여 Timberborn을 만들었습니다. 프로그래머 Paweł Duda는 다음과 같이 말합니다. “웹 리소스가 많습니다. 학습 곡선은 가파르지 않습니다. 저희 팀은 C#에 익숙합니다.”

결과

• UI 프로토타이핑 및 구현 가속화: 이제 며칠이 아니라 몇 시간이 소요됩니다.

• 매주 여러 병합 충돌에서 0으로 전환

• Steam에서 약 18,000건의 리뷰를 통해 “매우 긍정적” 평점 달성

uGUI의 한계에 도전

메커니즘은 초기 개발에서 uGUI를 사용했지만, Timberborn이 더 복잡해지면서 문제가 발생했습니다. 아이콘을 재설정하려면 레이아웃이 깨지거나 에셋을 재사용하기가 어려웠으며, 코드가 사람에게 읽을 수 없기 때문에 일주일에 여러 병합 충돌이 발생했습니다. 파웰은 이렇게 말합니다. “두 사람이 동일한 프립에서 작업하는 경우 보통 문제가 발생합니다. “일부의 충돌은 자동으로 해결되었습니다. 그렇지 않은 경우에는 직접 프리는 다시 만들어야 했습니다.”

UI 툴킷 로드맵을 보고 나서 Mechanistry는 새로운 시스템으로 마이그레이션하기로 결정했습니다. 이들은 Unity로 제작한 솔루션을 고수하고 싶었으며, UI 툴킷이 웹 기술에서 영감을 얻는다는 점을 알게 되면서 팀에서 원활하게 전환할 것을 확신했습니다.

UI 툴킷으로 이동

팀은 몇 달 동안 마이그레이션에 실용적인 접근 방식을 취했습니다. 우선 UI 코드 아키텍처를 정리하고 코드 냄새를 제거했습니다. 그런 다음 UI 툴킷에서 모든 UI 요소를 재구성하고 에셋을 재설계하여 원하는 모습을 구현했습니다.

파웰은 “UI 툴킷으로 전환한 덕분에 게임이 바뀌었습니다. "이전에는 큰 번거로움을 줄 줄 알았기 때문에 아름다운 UI를 만들고 싶지 않았습니다. 이제 UI 스케일링과 숨겨진 메뉴 같은 요소를 게임에 추가했기 때문에 uGUI보다 훨씬 수월했습니다."

병합 충돌 해결

메카니스트리는 UI 툴킷으로의 전환으로 병합 충돌이 사실상 제거되었으며, 이는 스튜디오에서 지연을 주는 큰 원인이 되었습니다. 파웰은 이렇게 말합니다. “분쟁이 발생하면 이를 확인하고 해결 방법을 즉시 알 수 있습니다. "누구나 동시에 UI를 작업할 수 있으며, 동일한 요소에서도 문제는 없습니다."

또한 UI 툴킷을 사용하여 게임 로직과 UI 로직을 분리하여 충돌을 줄일 수 있었습니다. 이제 팀은 UI의 다양한 부분을 독립적으로 반복하고 컴포넌트를 별도로 테스트할 수 있으므로 빌드 손상이 줄어듭니다. 파벨은 "이건 저희에게 매우 중요했습니다.

실시간 디버깅

Timberborn의 확장 가능한 적응형 UI는 현재 12개 언어를 지원합니다. 서로 전환하면 UI 요소가 잘못 정렬되므로 인터페이스가 전반적으로 복잡해지면 디자인 오류가 발생할 수 있습니다. 이들은 UI 툴킷 디버거를 사용하여 이러한 문제를 빠르고 쉽게 식별하고 해결할 수 있습니다.

UI 툴킷에는 UI 계층 구조의 실시간 뷰가 표시된 창이 표시됩니다. 메카니스트는 계층 구조의 모든 요소를 선택하여 프로퍼티와 상태를 검사하고 UI 오류를 확인할 수 있습니다. 파웰은 "이 방식으로 UI 요소를 실시간 검사하고 디버깅할 수 있었습니다.

툴킷 커스터마이징

UI 툴킷의 유연성 덕분에 필요에 맞게 메카니스트리를 조정할 수 있습니다. 파웰은 “드롭다운 메뉴에 이미지를 추가할 수 있는 자체 시스템이 있습니다. 또한 자체 툴팁과 현지화된 컨트롤이 있습니다. UXML에 속성을 넣기만 하면 자동으로 컨트롤을 현지화할 수 있습니다."

예를 들어 팀에는 태그를 사용하여 적절한 언어로 현지화된 스프라이트를 표시하는 컨트롤이 있습니다. 패널이 어떻게 스태킹되는지 보여 주는 뷰를 제작하여 화면에 표시되는 위치를 추적하면서 UI 컨트롤 위치를 쉽게 조작할 수 있었고, 배경, 버튼, 레이블 등을 위한 9슬라이스도 만들었습니다.

며칠에서 몇 시간으로

UI 툴킷을 사용하면 Mechanistry의 디자인 프로세스가 더 깔끔하고 직관적이며 훨씬 빠르게 다듬을 수 있습니다. 파웰은 이렇게 설명합니다. "이 작업에는 많은 어려움과 변화가 필요하며 몇 주가 걸릴 수 있습니다. "이제 프로세스는 최대 1주일에 며칠 걸립니다. 아티스트로부터 에셋을 기다리는 경우도 마찬가지입니다. 며칠이 단축되어 시간으로 단축됩니다.”

Unity UI 툴킷을 도입함으로써 Mechanistry의 UI 파이프라인이 대폭 혁신되었으며, Timberborn은 매우 기대되는 1.0 릴리스로의 개발을 가속화했습니다.

UI 툴킷으로 런타임 UI를 저작하고 통합하세요. 웹 기술에서 영감을 받은 직관적인 경험을 통해 에디터를 커스터마이즈하여 협업을 개선하고, 효율적인 디버깅을 활용하여 성능을 개선하여 UI를 더 빠르게 제작할 수 있습니다.