[📜일지] 피그말리온 #10 : 인 게임 연출(1)

[team_ca..(teamcandle)]

안녕하세요 팀 캔들입니다. 

벌써 5월이네요! 원래 시작했을 땐 개발일지를 매일 올리자고 다짐했지만 실상은 한 주에 한번 올리는 것도 빠듯...꾸준히 개발일지 쓰시는 분들 모두 리스펙합니다...!

모두 개발 화이팅하시길!

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

메인 스토리도 어느 정도 완성됐고 컨셉도 잡혔겠다, 이번엔 인게임 퍼즐의 UI를 만들기로 했다. 

(프로토타입 인게임 UI)

기존 프로토타입의 UI는 그냥 퍼즐과 제한 횟수만 써놨기 때문에 심플하다면 심플했지만, 컨셉과 연결되는 느낌은 전혀 없었다. 

그래서 메인 UI를 청사진 컨셉으로 했던 것 처럼 퍼즐판 역시 로봇을 설계한다는 컨셉에 맞는 UI로 짜기 위해 고민해봤다.(메인 UI는 #4화 참조)

(실제 회로)

(회로도 그림, 출처 : kor.pngtree.com)

결과적으로 우리가 선택한 건 회로도였다.

(격자랑 회로도를 바탕으로 한 UI)

가운데에 격자 형식으로 퍼즐 판을 만들고 주변에 회로를 그려서 퍼즐을 푸는 행위를 로봇을 설계한다는 느낌을 줄 수 있게 한번 만들어봤다.

만들고 나니 확실히 프로토타입때 보다 풍성하고 컨셉에 맞는 화면이 나온 것 같아 뿌듯...

(풀버전)

밖의 회로는 멀티해상도에 대응하기 위해 보이지 않는 부분까지 꼼꼼히 처리했다.

픽셀그래픽만 아니였으면 이미지 확대 축소로 대응이 가능하지만 픽셀 하나하나가 왜곡 없이 일치해야 한다는 쓸데없는 완벽주의 때문에 손수 다 그려 넣었다.

막상 보면 징그러워 보이지만 사실상 정상적인 플레이를 할 때는 저 정도 까지는 안 보이는 것을 확인했다.  

이후 퍼즐 외에도 실제 쓰일 색깔 블록과 여러가지 버튼을 넣어봤다. 

(인게임 UI 구성)

버튼은 위에서부터 차례대로  

나가기

스테이지 다시 시작

한 회 전으로 되돌리기

버튼을 배치했다.

마지막으로 구석 양쪽에는 퍼즐 블록의 이동 제한 횟수를 적었다. 

횟수는 블록을 움직일 때마다 줄어들 예정이며 UI와 어울리게 디지털 숫자로 적어봤다. 

이후 편의성을 위해 이전 스테이지와 다음 스테이지로 넘어가는 버튼을 만들어 배치했다.

마지막으로 나가기, 다시 시작, 되돌리기 버튼을 아이콘화 해봤다.

(버튼을 아이콘화 시킨 화면)

버튼은 되도록 유저들이 휴대폰을 들었을 때 손가락이 닿지 않도록 위쪽에 배치해봤다.

언어 번역과 픽셀 문제로 이런 간단한 버튼은 아이콘화 했지만 어느 쪽이 더 직관적일까? 

이 부분은 사실 조금 애매한 것 같아 나중에 설문을 하든지 해서 다시 결론을 내려봐야 할 것 같다. 

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

원본 블로그 : https://blog.naver.com/team_candle/222719806611