휴대폰 게임 화면을 그림이 크게 보이는 구조로 바꿨습니다. 이 게임의 중심은 현장 그림과 인물 그림을 보면서 인물에게 질문을 써 넣는 화면입니다. 지난 글에서는 이 화면을 어떤 모양으로 할지 시안 세 가지를 그렸습니다. 오늘은 그림을 크게 보여 주는 쪽으로 정했습니다. 그리고 그 모양대로 회색 와이어프레임 페이지를 만들어 직접 눌러 봤습니다. 아래쪽 메뉴를 없앴습니다. 장소 이동과 기록은 위에서 내려오는 메뉴에 모았습니다. 현장과 인물 그림은 화면 전체에 깔았습니다. 대사와 질문 입력창은 그 위에 얇게 겹쳤습니다. 키보드가 올라와도 그림 크기는 그대로이고, 입력창만 올라옵니다.
휴대폰 게임 화면에서 그림을 가리던 버튼을 위로 치웠습니다
현장을 살피고 사진을 찍고 인물에게 직접 질문하며 사건을 푸는 모바일 추리 게임입니다.이 프로젝트 소개 →뭘 했다
왜
현장과 인물 그림이 아래쪽 버튼에 눌려 작아졌습니다. 그림을 보면서 단서를 찾는 게임이라, 그림이 작으면 볼 것이 없습니다. 같은 곳으로 가는 버튼도 여러 군데 있었습니다. 입력창을 누르면 높이가 바뀌어 화면이 흔들렸습니다. 이동하는 길은 하나로 합치고, 입력창 높이는 고정했습니다.
삽질 포인트
브라우저는 한 번 받은 파일을 저장해 두었다가 다시 씁니다. 그래서 화면을 고치고 다시 열어도 고치기 전 모양이 뜰 수 있었습니다. 그러면 지금 보는 화면이 수정본인지 알 수 없습니다. 그래서 파일 내용이 바뀌면 파일에 붙는 버전 번호도 바뀌게 했습니다. 번호가 달라지면 브라우저가 새 파일을 받아 옵니다. 지금 어느 수정본이 열렸는지도 화면에 띄웠습니다. 화면을 새로 불러오는 버튼도 넣었는데, 이때 쓰던 질문은 지워지지 않게 했습니다.
다음 할 것
실제 휴대폰에서 키보드가 올라올 때 화면이 어떻게 보이는지 확인하겠습니다. 그다음 이 구조로 실제 화면 그림을 만들겠습니다.
그 밖의 소식
게임에서 이리저리 돌려 보며 단서를 찾는 물건 중 첫 번째를 3D 모델로 만들었습니다. AI가 자동으로 만든 모델은 모양이 원래 그림과 어긋났고, 살펴봐야 할 자국이 표시처럼 튀어 보여서 직접 다듬고 인물 그림과 같은 화풍으로 그려지게 했습니다. 커밋 6개
원료 · git log
6d28024docs: 조사 소품의 입체 제작과 화풍 검수 절차 정리
c1617e3asset: 조사 소품의 표면 표현과 모바일 셀 렌더 완성
ca4208casset: 조사 소품의 입체 모델과 화풍 렌더 원본 보관
e1a8b7aasset: 웹 모델 제작용 입력 패키지와 검수 안내 추가
099e541asset: 조사 소품 방향별 원본과 렌더 검수 기록 보관
05dc868docs: 조사 소품의 육면 관찰과 렌더 제작 명세 보완
d00a0a0docs: 채택 UI 구조와 투명 헤더 구현 방향 기록
5c2fd32fix: UI 수정본의 캐시 식별과 화자 인덱스 표시 개선
c72d611docs: 탱글 타워를 중심으로 UI 참고 기준 구체화
fb62469fix: 모바일 대화의 중복 이동과 입력 크기 변화 수정