[📜일지] 피그말리온 #7 : 스테이지(1)

[team_ca..(teamcandle)]

안녕하세요 팀 캔들입니다! 오늘은 스테이지 제작 일지를 들고 왔습니다.

날씨가 오락가락하네요. 개발자분들 모두 아프지 마시고 건강 잘 챙기세요 :)

이전 편 : https://gall.dcinside.com/mgallery/board/view/?id=game_dev&no=91240&s_type=search_subject_memo&s_keyword=%ED%94%BC%EA%B7%B8&page=1

인 게임 프로토타입을 제작한 후, 

미리 제작했던 메인 화면 UI를 프로토타입에 적용한 뒤 태블릿에서 실행해봤다. 

(메인 화면 애니메이션은 일지 5화 참조) 

태블릿 적용한 사진

적용 완료. 다행히 애니메이션도 잘 나오는 걸 확인했다.

이후 스토리 제작과 동시에 스테이지 구성에 대해 고민해봤다. 

피그말리온은 퍼즐에 쓰이는 색(Color)과 감정이라는 키워드를 연결했다.(일지 3화 참조)

예를 들면 분노라는 감정은 빨간색, 기쁨은 노란 색 등등...

결정한 컨셉을 바탕으로 우리는 현재 크게 3개의 에피소드를 구상해봤고, 

각 에피소드가 다르다는 느낌을 줄 수 있게  에피소드별로 다른 스테이지 연출을 쓸 예정이다.

첫 번째 에피소드는 감정의 습득에 대한 이야기로, 

에피소드 : 1의 스테이지 역시 해당 컨셉에 맞게 각 색깔에 매칭되는 감정을 큰 챕터로 두고 그 안에 퍼즐 스테이지를 배정했다. 

그 결과 스테이지 구성은

에피소드 : 1  ▶  색깔 챕터 (예: 빨강 = 분노) ▶  색깔 챕터 내 각각의 퍼즐 스테이지

...이런 식으로 구성 완료했다.

초기 스테이지 구성

초기 스테이지 구성은 이렇게 기존 청사진 컨셉과 픽셀 버튼 컨셉은 유지하면서 ui 디자인을 해봤다.

큰 마름모는 색깔 챕터, 작은 마름모 는  퍼즐 스테이지다.

일단 미 클리어 스테이지를 검은 색으로 하고,

퍼즐을 클리어할 경우 각 챕터의 색(위 예시 챕터는 빨간색 챕터이니 빨간색)으로 칠하는 방식으로 적용해봤다.

퍼즐 스테이지를 클리어하면 일정 분량의 스토리가 조금씩 해금되는데, 초기 버전에선 따로 도트를 찍어둔게 없어서 하얀색으로 통일했다.

이후 각 챕터 내 스토리 진행도에 따라 아래에 있는 바(bar)가 점점 채워지게 표시하려고 생각했었다. 

이런 구상을 바탕으로 다시 좀 더 디테일하게 구성을 짜봤는데, 

결과적으로 이런 식으로 챕터를 구성 완료했다.

빨간색 챕터의 경우 튜토리얼 격 챕터여서 퍼즐 스테이지가 5개지만, 다른 색깔의 경우  공통적으로 15개의 퍼즐 스테이지가 있다.

또 각 챕터마다 스토리를 3화씩 나눠서 볼 수 있게 배정했다. (스토리 구성은 일지 다른 편에 자세히 적어보도록 해야겠다.)

미해금 스테이지와 스토리는  자물쇠를 만들어서 배치했고,  챕터는 거기에 더해  쇠사슬로 잠겨있다는 느낌을 더 주게 구성했다.

잠금이 풀리는 연출은 애니메이션을 통해 좀 더 자연스럽게 만들어 볼 예정이다. 

또한 클리어 정도에 따라 챕터의 색(예시에선 빨강)이 점점 차올라 모든 스테이지를 클리어하면 챕터 버튼이 해당 챕터의 색으로 가득 차게 만들어볼까 한다.

스테이지 구성을 마친후, 챕터가 펼처지는 연출을 하기 위해 프로그래밍 준비도 했다.

위와 같이 버튼을 터치하면 버튼이 이동하고 퍼즐 스테이지가 펼쳐지게 연출해볼 예정이다. 

이 기능 역시 태블릿에서 실행해봐서 극단적으로 가로화면이나 세로화면이 긴 장치에서도 알맞은 사이즈로 나오는지 확인해봤다.

이제 남은 건  스테이지 연출이다. 

어떤식으로 해야 스테이지를 더 깔끔하게 연출할 수 있을지, 

유저들이 스토리와 스테이지가  해금, 클리어됐다고 느낄 수 있을지 고민하면서 일지를 마무리해본다. 

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

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