[개발] #03 richText(+@) 업데이트

richText

<Fig. 01>

<Fig. 02>

richText 표현 구현 완료했습니다.

기존에는 색깔만 변경하고, 등록이 안된 태그가 많았었는데,

이번엔 인게임 데이터를 이용해 모든 태그를 등록했고, 클릭시 이벤트도 추가하였습니다.

뿐만 아니라, 클릭시 나오는 SnackBar에서 또 누를경우 그 효과 역시 확인 가능합니다.

 

 

richText

richText란, <> 과 같은 태그를 이용하여 문자열 중간에 특수한 텍스트가 삽입된 문자열을 의미합니다.

예로 들어 <Fig. 02>의 냉기 하단의 richText의 원본 문자열은 다음과 같습니다

 

 공격 속도 30 감소, 지속 시간 동안 냉기 효과를 추가로 받을 경우 <$ba.frozen>빙결</> 상태로 변경

 

 

소스 데이터

인 게임 데이터 중 gamedata_const.json의 데이터를 참조했습니다.

 

 

구현 방법

우선 해당 태그로 둘러싸인 문자열와 나머지 문자열을 구분지어야 합니다.

이를 위해 다음과 같은 정규 표현식을 이용해 문자열을 추출합니다. (Chat GPT에게 감사를,,)

 

RegExp separator = RegExp(r"<[^<>]*[@$\/][^<>]*>");

<@ ... >, <$ ... >, </ ... > 와 같은 태그를 검사합니다

 

분리된 태그를 이용하여 문자열을 split합니다.

위의 예시로 든 냉기 하단의 richText로 예로들면 문자열이 다음과 같이 분할됩니다.

 

공격 속도 30 감소, 지속 시간 동안 냉기 효과를 추가로 받을 경우
<$ba.frozen>
빙결
</>
상태로 변경

 

다음은 stack 자료구조를 이용하여 태그 안쪽에 있는 문자열에 효과를 입힙니다.

stack을 이용하는 이유는, 태그가 중첩되어 씌여있는 경우가 존재하기 때문입니다.

 

stack을 사용하지 않을 경우 <tag1><tag2>A</>B</>와 같은 문자열에 효과를 입힐 경우,

B에 tag1에 해당하는 효과를 입히는 것이 매우 어려워집니다.

 

stack의 기능인 push, pop, peek 기능을 적절히 활용하여 A, B에 해당하는 문자에

tag1, tag2에 해당하는 효과를 입혀 하나의 Text 위젯으로 만들어줍니다.

 

• <@ ... > 형태의 태그는 색깔만 입혀주어 Text 위젯으로 만듭니다.

 

• <$ ... > 형태의 태그는 description의 데이터를 보여줘야 하기 때문에(위의 '냉기'와 같음)
  GestureDectactor를 씌우고 클릭시 richText를 분석하는 이 위젯을 재귀 호출.

 

• </> 태그는 stack에서 pop 해주는 역할

 

마지막엔 모든 Text 위젯을 Wrap 위젯으로 묶어주면 끝!

 

 

TroubleShooting

stack구조를 생각 못했을 땐 막막했는데,

자기 전에 딱 떠오른 방법을 정리하고 일어나자마자 구현하니 잘 되었습니다...

stack의 올바른 사용방법을 스스로 깨우쳐서 정말 소름돋았고, 배운게 많았습니다.

 

 

 

육성 재료

<Fig. 03>

오퍼레이터 육성 재료화면 구현하였습니다.

정예화, 스킬 강화, 모듈 강화에 필요한 재료가 모두 보여집니다.

 

또한 구현하면서 화면간 유동적인 연결 또한 구현하였습니다.

이제, 아이템 아이콘을 누르면 아이템 정보 화면으로 이동하고,

아이템 정보 화면에서 스테이지를 누르면 스테이지 정보 화면으로 이동하고,,,

 

모든 화면은 stack으로 쌓여 유기적으로 연결됩니다.

 

 

 

사정거리

<Fig. 04>

사정거리 정보 업데이트 완료했습니다.

다만, 현재 오퍼레이터의 정예화에 따른 사정거리만 구현하였으며,

스킬의 사정거리는 추후에 업데이트 하도록 하겠습니다.

(현재는 출시가 우선시, 개강 전에 출시가 목표입니다)