---

MOBA 스타터 키트 - UI

---

문서 변경내역: James Tan 작성. 홍성진 번역. UDK 2012년 5월 버전으로 최종 테스팅.

개요

---

MOBA 류 게임은 일반적으로 HUD 에 많은 정보가 표시됩니다. MOBA 스타터 키트의 모든 HUD 는 Scaleform 안에서 처리되며, HUD 클래스가 존재하기는 하지만 대부분 Scaleform 으로 명령을 전달해 주거나 Canvas 인스턴스를 따라 지나가는 셸 역할을 할 뿐입니다. HUD 일정 부분에 대해서는 다른 문서에 설명되어 있으니, 여기서는 나머지 부분에 초점을 맞춰 보도록 하겠습니다.

영웅 영역

---

영웅 영역에는 영웅의 상태에 대한 정보가 들어 있습니다. 영웅의 생명력, 레벨, 마나, 초상화, 스펠, 스탯을 표시합니다. 영웅 영역 박스 GFx 위젯 대부분은 UDKMOBAGFxHUD::ConfigHero() 에 캐시됩니다. 핵심 로직 대부분은 UDKMOBAGFxHUD::UpdateCurrentHero() 에서 이루어지며, 이는 UDKMOBAGFxHUD::Tick() 에 의해 호출됩니다.

생명력

생명력은 세 부분으로 나뉩니다.

• 생명력 막대
• 현재 생명력 문구
• 생명력 재생 문구

UDKMOBAGFxHUD::UpdateCurrentHero() 안이 생명력 막대가 최신 상태로 유지되는 곳입니다. 막대를 작아보이게 하기 위해 마스크가 사용됩니다. 생명력 막대 크기 관련해서 전반적으로 이 기법이 사용되었는데, 그래픽 크기까지 조절되지는 않기 때문입니다. 또 이 방법이 마스크 위치 계산만 해 주면 되기에 최신 상태로 유지하는 것이 약간 더 쉽기도 합니다. 생명력 막대 문구 역시 같은 자리에서 최신 상태를 유지하는데, 텍스트 필드의 텍스트를 설정하는 식으로 이루어집니다.

마나

마나는 세 부분으로 나뉩니다.

• 마나 막대
• 현재 마나 문구
• 마나 재생 문구

마나 막대는 생명력 막대와 같은 방식으로 최신 상태를 유지합니다.

초상화

사용되는 초상화는 플랫폼에 따라 달라집니다. 모바일 플랫폼에서는 미리 렌더링된 스태틱 이미지가 사용되는 반면, PC 플랫폼에서는 실시간 다이내믹 렌더 타겟을 사용하여 애니메이션 초상화를 사용합니다. 이는 UDKMOBAGFxHUD::SetHeroPortrait() 를 통해 처리되며, 여기서 하는 일이라고는 해당 함수의 파라미터인 Texture2D 로 텍스처 리소스를 설정하는 것 뿐입니다.

모바일 플랫폼에서는 초상화 설정에 UDKMOBAHUD_Mobile::PostRender() 가 사용됩니다. 이 경우 이 함수가 하는 일이라고는 텍스처를 GFx 위젯으로 설정하는 것 뿐입니다.

PC 플랫폼에서는 초상화 설정에 UDKMOBAHUD_PC::PostRender() 가 사용됩니다. PC 플랫폼에서는 맵에 구애받지 않도록 맵 어딘가 임의의 곳에 스폰되는 애니메이션 스켈레탈 메시를 캡처하는 화면 밖 렌더 타겟을 생성합니다. 이렇게 하여 초상화 동영상을 미리 렌더링할 필요 없이 애니메이션 초상화를 만들어 냅니다. 또한 초상화 동영상을 다시 렌더링할 필요 없이 영웅 아트를 바꿀 수도 있습니다. 파티클 이펙트, 라이팅 이펙트 같은 이쁜 효과를 추가할 수도 있습니다.

스펠

스펠 부분은 복잡한 Scaleform 위젯에서 동적으로 생성되며, UDKMOBAGFxHUD::ConfigSpells() 에서 처리됩니다. UDKMOBAGFxHUD::ConfigSpells() 는 영웅의 스펠을 대상으로 반복처리하여 새로운 GFx 위젯을 HUD 에 동적으로 붙입니다. 그런 다음 그 버튼들을 적합한 이벤트 리스너에 바인딩하고서 나머지 것들을 구성합니다.

이벤트 리스너는 스펠 레벨 업, 스펠 트리거 등과 같은 면을 처리하는 것입니다.

스탯

스탯 부분은 거의 영웅의 상태 업데이트에 따라 업데이트되는 텍스트 필드가 있는 정도입니다. 이는 주로 UDKMOBAGFxHUD::UpdateHeroStats() 에서 업데이트되며, 단지 영웅에서 값을 구해온 다음 UDKMOBAGFxHUD::ConfigHero() 안에 캐시된 텍스트 필드에 할당할 뿐입니다.

인벤토리 영역

---

인벤토리 영역에는 플레이어의 현재 인벤토리 아이템과 플레이어의 보관함 인벤토리 아이템 둘 다 들어 있습니다. 양쪽 모두 Scaleform 에 미리 정의되어 있고, 복잡한 무비 클립을 사용하여 아이템을 처리합니다. 플레이어의 골드 양을 유지하는 데는 텍스트 필드가 사용되며, 상점 버튼은 단지 플레이어가 상점 영역 안에 있는지 아닌지를 나타내기 위해 크롬을 업데이트하는 버튼일 뿐입니다. 이들 모두 UDKMOBAGFxHUD::ConfigInventory() 에 캐시됩니다.

현재 인벤토리 슬롯

현재 인벤토리 슬롯은 왼쪽에 있는 것으로, 보관함 인벤토리 슬롯보다 큽니다. 이들은 인벤토리 배열이 바뀔 때 UDKMOBAPawnReplicationInfo 에서 호출되는 UDKMOBAGFxHUD::NotifyItemReceived() 를 통해 업데이트됩니다. 하는 역할은 단순히 캐시된 GFx 인벤토리 배열을 찾아서 다양한 위젯을 적합한 값으로 할당하는 것입니다.

보관함 인벤토리 슬롯

현재 인벤토리 슬롯과 같은 방식으로 업데이트됩니다.

골드 텍스트 필드

UDKMOBAGFxHUD::NotifyMoneyUpdated() 함수를 통해 업데이트되며, 텍스트 필드의 텍스트를 설정하는 함수입니다. UDKMOBAPlayerReplicationInfo.Money 변수가 변할 때 UDKMOBAPlayerReplicationInfo::MoneyUpdated() 에 의해 호출됩니다.

상점 버튼

이 GFxClikWidget 가 UDKMOBAGFxHUD::ConfigInventory() 에서 초기화될 때 이벤트 리스너를 PressShop() 라는 델리게이트에 바인딩합니다. 이 델리게이트는 단순히 ShopAreaMC 가시성을 토글합니다. 또한 크롬 버튼의 색을 바꾸는 데 UDKMOBAGFxHUD::ToggleShopButtonChrome() 가 사용되기도 합니다. 색의 변화는 플레이어가 샵 볼륨 안에 있는지 아닌지를 나타냅니다.

메시지

---

메시지는 동적으로 스폰되는 무비 클립으로, 텍스트 필드가 설정된 것입니다. 페이드 인/아웃 애니메이션을 통해 UI 에 보다 세련되고 동적인 느낌을 주기도 합니다. 메시지 추가를 쉽게 하기 위해 일부 헬퍼 함수를 UDKMOBAGFxHUD 에 추가했습니다.

• UDKMOBAGFxHUD::AddCenteredMessage() - 화면 중앙에 메시지를 추가합니다.
• UDKMOBAGFxHUD::AddMessage() - 화면 왼쪽에 메시지를 추가합니다.

이 함수 둘 다 UDKMOBAGFxHUD::AddGenericMessage() 를 호출하는데, 새 심볼을 생성하여 HUD 에 붙이거나 숨겨져 있던 예전 심볼을 재사용하거나 합니다. 심볼이 선택된 이후 함수는 보이는 메시지를 위쪽으로 정리한 다음 새로운 심볼을 맨 밑에 놓습니다. 심볼의 텍스트가 설정되고, 심볼더러는 Adobe Flash Professional 에 지정된 프레임 이름을 사용하여 애니메이션을 재생하라 이릅니다.

메시지 유지를 위해, UDKMOBAGFxHUD::Tick() 에서 UDKMOBAGFxHUD::UpdateGenericLogMessages() 가 호출됩니다. 이 함수는 적합한 메시지 배열을 대상으로 반복처리하여 만료되었는지를 검사합니다. 만료되었다면 메시지 심볼더러 Adobe Flash Professional 에 지정된 프레임 이름을 사용하여 애니메이션을 재생하라 이릅니다.

상단 영역

---

상단 영역에는 게임의 일반적인 상태에 대한 정보가 들어 있습니다. 멀리 왼쪽에는 메인 메뉴 버튼, 가운데에는 팀의 킬 수, 영웅 아이콘이 표시되는 영역과 밤 낮 시계, 멀리 오른쪽에는 킬, 데쓰, 어시스트 수입니다.

메인 메뉴 버튼

메인 메뉴 버튼은 UDKMOBAGFxHUD::ConfigHUD() 에 캐시되며, 버튼에는 이벤트 리스너가 구성됩니다. 버튼 눌림에 바인딩되는 이벤트 리스너는 단순히 메뉴를 엽니다. 먼저 메인 메뉴 인스턴스가 씬에 붙었는지 아닌지를 검사하여 메인 메뉴를 엽니다. 붙지 않았다면 새로운 메인 메뉴 인스턴스를 생성하여 메뉴 스토리지 무비 클립에 붙입니다. 메뉴 스토리지 메뉴 클립의 존재 이유는 심볼 레이어를 유지하기 위해서입니다. 생성되었다면 가시성을 참으로 설정한 다음 게임을 일시정지시킵니다.

메인 메뉴가 열리면 두 가지 옵션이 있습니다. 게임으로 돌아가거나 게임을 나가거나죠. 플레이어가 게임으로 돌아온다면, 게임 일시정지를 해제하고 메인 메뉴를 숨깁니다. 플레이어가 게임을 나가고자 한다면 HUD 를 먼저 닫은 다음 콘솔에서 exit 명령을 호출합니다.

밤 낮 무비 클립

밤 낮 (day night) 무비 클립은 UDKMOBAGFxHUD::ConfigHUD() 에 캐시되며, UDKMOBAGFxHUD::Tick() 에서 호출되는 UDKMOBAGFxHUD::UpdateGameTimer() 와 UDKMOBAGFxHUD::UpdateDayNightCycle() 에서 업데이트됩니다. UDKMOBAGFxHUD::UpdateGameTimer() 는 밤 낮 텍스트 필드를 업데이트합니다. UDKMOBAGFxHUD::UpdateDayNightCycle() 는 재생할 애니메이션을 계산한 다음 밤 낮 인디케이터 무비 클립더러 적합한 애니메이션을 재생하라 이릅니다.

킬 / 데쓰 / 어시스트 스탯

이 텍스트 필드들은 UDKMOBAGFxHUD::ConfigHUD() 에 캐시됩니다. UDKMOBAGFxHUD::UpdateStats() 는 UDKMOBAGFxHUD::Tick() 를 통해 호출되며, 플레이어의 PRI 값을 검사한 다음 텍스트 필드를 적합한 값으로 설정합니다.