본문으로 건너뛰기

메뉴를 열어도 게임 장면이 흐리게 이어지게 했습니다

거짓말 탐정 · 26-10-24 · 커밋 30 · day 08 ·
현장을 살피고 사진을 찍고 인물에게 직접 질문하며 사건을 푸는 모바일 추리 게임입니다.이 프로젝트 소개 →

뭘 했다

메뉴를 열어도 게임 장면이 흐리게 보이게 했습니다. 이 게임에서 가장 오래 머무는 곳은 인물과 대화하는 인터뷰 화면입니다. 인물 그림을 크게 띄워 두고 그 인물에게 질문을 입력합니다. 이 글에서는 이 화면을 메인 화면이라고 부르겠습니다. 이제 메인 화면 옆에서 메뉴를 꺼내도 뒤의 장면이 흐려진 채로 보입니다. 맨 위 제목 줄도 메인 화면과 같은 자리에 있습니다. 메뉴 모양은 수첩, 색인, 서류 파일 느낌의 세 가지 시안을 같은 기능으로 만들어 비교했습니다. 메뉴에서 다른 화면으로 들어갔을 때는 버튼이 둘입니다. 닫기를 누르면 메인 화면으로 바로 돌아오고, 뒤로를 누르면 직전 메뉴로 갑니다. 화면을 오가도 인물마다 입력하던 질문과 첨부한 것이 사라지지 않습니다.

메뉴 속 화면닫기뒤로메인 화면직전 메뉴
닫기는 메인 화면으로 바로, 뒤로는 한 칸만

왜

전에는 글자를 읽기 쉽게 하려고 화면 위아래에 불투명한 띠를 깔았습니다. 그 띠가 인물 그림을 가렸습니다. 메뉴 안에서 설정 같은 창을 하나 더 열면, 앞 창이 닫히지 않고 그 위에 겹쳐 쌓였습니다. 메인 화면으로 돌아가려면 여러 번 눌러야 했습니다.

전띠가 그림을 가림지금흐려도 보임
띠가 가리던 인물이 이제는 흐린 채로 보입니다

삽질 포인트

처음에는 글자 뒤에 짙은 색을 깔고 흐림을 더했습니다. 그런데 그 색이 결국 배경을 또 가렸습니다. 색을 빼고 장면만 흐리게 했더니, 이번에는 흐림이 시작되는 경계가 눈에 띄었습니다. 흐림을 약하게 하고 천천히 옅어지게 해서 풀었습니다. 색인 시안에서는 제목 줄과 목록이 같이 움직이면서 글자가 겹쳤습니다. 두 영역을 따로 떼어 냈습니다.

짙은 색 + 흐림배경을 또 가림흐림만경계가 눈에 띔약하게, 천천히 옅게풀림
흐림을 고친 순서: 가림 → 경계 → 풀림

다음 할 것

메뉴 다음은 배경 그림입니다. 이 게임에는 장소를 둘러보는 화면과 인터뷰 화면이 있습니다. 둘러볼 때 본 방과 인터뷰 때 인물 뒤에 보이는 방이 달라 보이면 안 됩니다. 그래서 장소마다 두 배경을 한 쌍으로 그리기로 정했고, 그 순서대로 만들겠습니다.

그 밖의 소식

증거를 살펴보는 화면에 책상 배경이 생겼습니다. 증거를 같은 공간에서 살펴보는 느낌을 주려고 넣었고, 확대하면 배경만 흐려지고 증거는 또렷하게 남습니다. 커밋 3개

대화 중인 인물이 가만히 숨 쉬고 눈을 깜빡이는 반복 영상을 만들고 있습니다. 실제 배경 위에서 반복 재생해 보는 휴대폰 검토 화면도 같이 만들었습니다. 커밋 5개

원료 · git log

99d6299docs: 공간별 인터뷰 배경을 탐색 배경과 함께 설계
5a74714docs: 의뢰 창구와 시리즈 협력 조연의 관계를 보강
e75e3d5docs: 공간 제작 단계별 통과 조건과 증빙을 명시
4f798b2docs: 에피소드 공간과 탐색 배경의 제작 순서 정리
fe898e5feat: 대화 기록과 즐겨찾기를 장면 메뉴에 연결
a8a2683fix: 메뉴 종료 동작과 메인 복귀 흐름을 통일
c086a6adesign: 메인 장면과 이어지는 메뉴와 공통 헤더 적용
a43d846fix: 메뉴 중첩을 없애고 색인 화면의 색상을 정돈
4a3c73dfix: 색인 메뉴의 가독성과 스크롤 겹침 개선
6f952f5design: 드로워와 파생 메뉴의 세 가지 시안 제공

최근 데브로그

전체 →
거짓말 탐정의 다른 날 →