[📜일지] 피그말리온 #14 : 텍스트 효과

날이 덥네요....오늘은 텍스트 효과 개발 일지 투척하고 쉬러 가야겠습니다.

이전 화 : https://gall.dcinside.com/mgallery/board/view/?id=game_dev&no=99159&s_type=search_subject_memo&s_keyword=%ED%94%BC%EA%B7%B8%EB%A7%90%EB%A6%AC%EC%98%A8&page=1

오늘은 스토리 씬에 들어갈 대사창 구현 작업에 들어갔다.

지난 일지에도 적었지만, 피그말리온은 스토리 연출을 비주얼 노벨 형식으로 진행할 예정이다.

18b3c42ff1de3da220afd8b236ef203e2776b76b5ea8e94a

위키에서 비주얼노벨을 검색하면 나오는 예시 이미지.

7ff3c028e2f206a26d81f6e247847c68

#12 일지에 올렸었던 스토리 씬 컨셉 예시 구도

비주얼 노벨 형식의 스토리 진행은 장점도 많겠지만, 반대로 텍스트의 비중이 높기 때문에 생기는 단점도 있다고 생각한다.

대표적으로 번역 비용이 올라갈 것이고, 텍스트가 적은 게임에 익숙한 유저들에게는 매력 포인트로 다가가기 힘들다는 점에서 스토리 텍스트가 투자 대비 효율이 안 나올 수 도 있지 않을까 하는 걱정도 있다.

현재 적어둔 스토리 분량은 A4 200장 가량…대사만으로 진행되는데도 이 정도인데, 그냥 소설 한 권을 썼다 해도 무방한 것 같다.

이렇듯 텍스트 분량이 많으면 베이스가 되는 스토리가 좋아야한다는 건 당연한 이야기이고, 그만큼 유저의 피로도를 줄이는 노력도 필요하다고 생각했다.

예를 들어 단순히 화면에서 그래픽 변화 없이 대사만 주르륵 바뀐다면 단조롭기 마련이고, 유저 입장에 스토리에 대한 흥미도가 많이 떨어질 것이다.

이를 줄이기 위해 다른 게임들 같이 모션 그래픽이나 캐릭터에 다양한 자세를 넣으면 좋겠지만, 우리 팀에 상황상 조금 어려운 부분이 있었다.

그래서 다른 레퍼런스들을 계속 찾아봤고, 궁여지책으로 생각한 것 중 하나가 바로 텍스트 효과다.

7ef3c028e2f206a26d81f6e440837d654547

게임 ‘쓰르라미 울 적에’

가령 게임 ‘쓰르라미 울 적에’ 에서는 화자의 심리 상태 변화를 텍스트 색으로 표현했고,

79f3c028e2f206a26d81f6ec4584716ea8

게임 ‘괭이 갈매기 울 적에’

스포일러가 포함되니 스크린 샷을 올리지 않겠지만 그 후속작 ‘괭이 갈매기 울 적에’ 2챕터 역시 마지막 장면에서 텍스트 효과와 사운드, 극적인 화면 전환을 적절히 잘 활용하면서 적은 리소스 대비 효율 좋고 가슴이 웅장해지는 연출을 만들어냈다.

그래픽 변화가 많지 않다면 위 예시와 같이 다른 효과와 연출을 최대한 활용해서 단조로움을 줄여야하지 않을까하는 생각으로 여러 시도를 해봤다.

우선 대사창에 들어갈 텍스트 구현부터 시작해봤는데, 대사창에 문자 표현이 UTF-8 방식이라 조금 힘들었다.

특히 한글은 어쩔 땐 3byte를 차지하고 어쩔 땐 2byte를 차지하는데, 한글자씩 출력하는 과정에서 3byte를 한꺼번에 출력하면 2byte 문자가 깨진 후 그 다음 문자가 줄줄이 깨지는 현상이 발생해서 골치가 아팠다.

cocos2d-x 의 엔진의 문구는 이미지로 표현되어서 1칸씩 햘당되기에 한글인지 영어인지 매칭을 시키는 과정이 필요해 두번째로 애를 먹었다.

결과적으로 어떻게 다 해결해서 한글자씩 출력뿐만 아니라 명령어 적용과 이펙트 적용도 수월하게 할 수 있도록 만들었다.

28a7d72fe39f6ceb6fe782ec1783716d86513d125fcd5e008edf05bcaefdbefc395e

글자 색깔과 투명도 효과를 적용된 예시 파일

다행히 이후부터 잘 구현돼서 투명도와 색깔도 원하는 대로 바꿀 수 있다.

28a7d72fe39f6beb3ce6d3b71382213cbf8251e993b751d778d6f797c88f97f1af30

글자 이펙트 효과 적용 예시 파일

글자 흔들림 효과와 떨림 기능을 예시로 해봤는데 그 외에도 해당 효과의 흔들림 정도라던지 출력 속도 조절, 깜빡 거리는 효과 등등을 넣을 수 있다.

28a7d72fe39f6beb39ea80e640d5776cb103014281a29e96591dfd11dafa35fe6bb8

이후 글자 TSV파일을 로드해서 최종 적용됨을 확인했다.

문제는 TSV를 불러오는 과정에서 (개행문자)를 인식을 못하고 문자 그대로 출력한다는 것인데… 해당 문자는 치환작업을 통해서 해결했다.

결과적으론 엑셀에서 대사 텍스트 파일을 만들면 읽어서 화면에 적용을 할 수 있게 되었다.

모바일 환경에서 이상이 없는 것을 확인하고 텍스트 효과 작업은 마무리.

해보니까 생각보다 디테일적으로 챙겨야 할 요소도 많고, 다른 아이디어도 떠올라서 캐릭터와 배경을 넣은 실제 적용 버전은 이후 다른 일지에서 한번 적어볼 예정이다.

다음 화에 계속...

캔들은 항상 열려있습니다.

원본 블로그 링크 : https://blog.naver.com/team_candle/222803615310

[📜일지] 피그말리온 #14 : 텍스트 효과

댓글 6

다른 게시글