부대지정 만들기

Sharlotte ·2022년 11월 25일
0

Mindustry

목록 보기
1/2

0. 기획

Mindustry는 7.0에 RTS 장르의 유닛 컨트롤 시스템을 추가했음에도 불구하고 부대지정이 없는 등 지원이 개판이다. 부대지정이 없는 RTS는 악몽과 같은 장르이므로 부대지정을 만들어서 편의성을 향상시켜보자.

  • 좌측 windows 탭과 부대지정 탭 전환시키도록 탭 switch 시스템 구현
  • 스타크래프트2의 부대지정 UI를 오른쪽으로 돌려 총 10개의 탭UI 추가
  • 해당 부대지정이 비어있으면 visible: false
  • 부대지정 선택: shift + <부대지정 index> 키 down / 부태지정 탭UI 클릭
  • 부대지정 업데이트: 유닛을 선택하면 업데이트 버튼을 눌러 원하는 부대지정을 선택해 업데이트 가능
    • 유닛 파괴 이벤트가 발생 시 모든 부대지정 업데이트
    • 업데이트될 때 수가 줄어들면 빨간색, 늘어나면 파란색으로 폰트 색 점멸

1. 구현

A. 탭 switch 시스템

부대지정 UI는 사이드에 넣는게 적절하지만 이미 windows 탭이 그 자리를 차지하고 있으므로 전환 기능을 추가 해야 한다.
탭 전환 버튼을 부모로 삼고 부대지정 탭과 windows 탭을 자식으로 삼아 제어하도록 만들자.

아래는 여러 사이드바들의 스위치(변경)을 관리할 SidebarSwitcher 클래스의 초기화 메서드다.

hudGroup는 화면 전체를 채우는 HUD ui 그룹이므로 그걸 가득 채우는 엘리먼트를 새로 만들어 사이드바가 사이드에 위치하도록 중앙 왼쪽 정렬을 한다. 사이드바와 전환 버튼을 생성할 body 테이블을 만들고, 그 안에서 전환 버튼의 세부 동작과 사이드바를 모두 생성한 후 보여질 사이드바 외엔 모두 숨긴다.
전환 도중 다시 누르면 Action이 꼬여서 동작이 망가지므로 Action 도중에 전환시키지 않도록 disable를 통해 버튼을 차단시킨 후 Action이 끝나면 차단을 해제시켜 다시 전환시킬 수 있도록 만들었다.

SidebarSwitcher는 위와 같이 Element들을 나머지 매개변수로 받아 Seq에 담는데, 이제보니 그냥 배열로 바꿔도 괜찮을 것 같다. showIndex는 현재 보여줄 사이드바의 인덱스이며, 전환 버튼을 누를때마다 1씩 증가한다. 원래는 아래와 같이 조건부로 값을 나눴는데,
showIndex = showIndex >= childrens.size - 1 ? 0 : showIndex + 1;
나머지 연산자를 사용하면...
showIndex = (showIndex + 1) % children.size;
showIndexchildrens.size를 반복한다는 마인드를 가져보니 나머지 연산자가 떠올랐고, 덕분에 조건부로 길어진 코드가 짧아지고 읽기 쉬워졌다. 괄호를 통해 의도치 않은 연산자 우선순위 발생을 막았다.


Arc는 libGDX의 경량화 & 개조 버전이다. libGDX조차 마이너해서 문서와 풀이 열악한데 그걸 개조까지 해놔서 그나마 남은 자료들조차 안전성이 박탈되어 알맞은 정보를 찾기가 정말 어려웠다.
이번 Action같은 경우가 딱 이 경우였는데, 그나마 엔진의 소스코드에 있던 주석은 상세한 설명이 없어서 대체 Action을 어떻게 실행하는지 몰라서 어려움을 겪었다. 소스코드를 보자마자 act() 할 때 action들이 사라지는걸 못봤더라면 시간이 더 끌렸을 것이다.

https://stackoverflow.com/questions/9131554/actions-of-actors-in-libgdx/9142896#9142896
하지만 StackOverflow엔 나와 비슷하게 Action 실행에 어려움을 겪은 질문이 있었고 그 답변에서 Action 종류의 분류, 설명, 실행 방법과 Interp 부가설명까지 알 수 있어서 매우 큰 도움이 되었다.

매우 유의할 점이 있는데, Action은 꼭 그 소스코드를 확인해야 한다. 대충 넘겨짚을려해도 대부분의 Action의 필드들은 기본값으로 초기화되지 않았다.
가령 위의 SizeToAction같은 경우에도, setWidth를 통해 너비만 설정하면 height0이 되어 원치 않은 높이 축소까지 당하게 되어버린다. 그래서 현재 값과 동일하게 설정하여 변화가 일어나지 않도록 하는 방법밖에 없다.
actions(...action)는 엑션 시퀀스를 생성하여 해당 엘리먼트에 설정한다. 추가가 아님에 유의하자.
act(delta)는 엘리먼트에 있는 엑션 시퀀스를 실행한다. 각 엑션은 실행 시 엘리먼트에서 제거된다. delta는 이전 프레임과의 초 단위 시간차(== 프레임 전환 속도)이며 Core.graphics.getDeltaTime()으로 얻을 수 있다.

결과적으로 아래와 같이 사이드바 스위칭에 성공하였다.

A.ex1 UI 개선

위 gif를 보면 전환 버튼과 사이드바 UI의 호응이 너무 부합하지 않다. 차라리 SidebarSwitcher에서 사이드바 백그라운드까지 제어하는게 나을 것 같다.
흡족

A.ex2 UI 셈플 뷰어 만들기

이 게임 모딩에서 스타일링 미리보기는 필요한 부분이라고 생각한다. 웹개발과 달리 핫 리로드가 안되기 때문에 매번 컴파일하고 실행하여 테스트해야 하기 때문이다. 이 방법 아니면 일일이 리소스 파일 열어서 UI 이름 찾아가봐야 하는데 그건 너무 노가다를 요구해서 생산성을 저하시키므로 오늘과 내일을 위해서라도 부대지정은 잠시 내려두고 샘플 뷰어를 만들어야 한다.
자바 리플랙션으로 긁어오니 생각보다 비주얼이 괜찮아서 흡족스러웠다.

어째 본전도 안뽑았는데 사이드 메뉴가 이렇게 열광적이라니...

B. 부대지정 탭 구현

오른쪽으로 튀어나온 버튼 최대 10개가 나열된 모습을 찾고 있다.

profile
샤르르르

0개의 댓글