📝 오늘 한 일: 최종 완성

오늘은 게임의 마지막 퍼즐 조각인 엔딩 시퀀스를 완성하고, 게임의 시작을 알리는 인트로 팝업 기능을 추가하여 최종 버전을 완성했다. 수많은 아이디어를 실험하며 게임의 완성도를 극적으로 끌어올린 하루였다.

✨ 주요 작업 내용

1. 엔딩 시퀀스 상세 구현

  • ‘긴 복도’ 컨셉 도입: 마지막 스테이지를 클리어하면, 플레이어가 나아갈 길만 남았음을 암시하는 아주 긴 단일 복도가 생성되도록 구현했다.
  • 사용자 경험(UX) 개선:
    • 긴 복도 진입 시, 플레이어의 등 뒤에 벽이 보이지 않도록 시작점 뒤쪽으로 충분한 여유 공간(buffer)을 추가하여 자연스러운 느낌을 더했다.
    • 복도에 진입할 때 플레이어의 위치가 중앙으로 초기화되지 않고, 출구를 통과할 때의 X 또는 Y축 위치를 그대로 유지하도록 하여 움직임이 끊기지 않고 부드럽게 이어지도록 수정했다.
  • ‘색상 반전’ 연출 추가:
    • 엔딩의 시작을 알리는 1초간의 ‘파란색 점멸’ 효과를 추가했다.
    • 점멸 효과가 절정에 달했을 때, 게임 세계의 모든 색상(배경, 복도, 플레이어, 별 등)이 반전되는 colorScheme 시스템을 도입하여 극적인 연출을 구현했다.
  • ‘신비로운 벽’ 연출 추가:
    • 색상 반전 후, 플레이어가 걷는 긴 복도의 양옆 벽(배경) 공간에 별들이 나타나도록 starfield 효과를 추가했다. 이를 통해 우주 공간을 유영하는 듯한 신비로운 분위기를 연출했다.
  • 최종 엔딩 문구 논의: “Final Time”이라는 표현 대신, 게임의 서사를 담을 수 있는 “인고의 시간”, “갇혀있던 시간” 등 다양한 표현을 논의하고 최종적으로 결정했다.

2. 인트로 스토리 팝업 기능 추가

  • 팝업 구현: 게임 시작 시, 개발자의 메시지가 담긴 팝업창이 먼저 나타나도록 HTML/CSS/JS 코드를 추가했다.
  • 게임 시작 로직 변경: 페이지 로딩 시 바로 게임이 시작되지 않고, 팝업창의 “Start Game” 버튼을 클릭해야만 게임 루프가 시작되도록 수정했다.
  • 스토리 작성 및 적용: “이 게임은, 원래 더 큰 이야기의 일부였습니다…“로 시작하는, 개발자의 의도와 심정을 담은 최종 인트로 스토리를 작성하고 코드에 적용했다.

💡 새롭게 배운 점

  • 연출의 깊이: 단순한 기능의 나열이 아닌, ‘파란색 점멸 -> 색상 반전 -> 별 등장’과 같이 여러 효과를 단계적으로 결합하고 타이밍을 조절하는 것이 플레이어의 경험을 극적으로 향상시킨다는 것을 깨달았다.
  • 상태 관리의 중요성: 엔딩 시퀀스가 복잡해지면서, endingState 변수를 0(플레이) 1(점멸) 2(반전 걷기) 3(최종 페이드아웃) 등으로 세분화하여 관리하는 것이 코드의 안정성과 명확성을 위해 필수적임을 다시 한번 확인했다.

🚀 최종 소감

수많은 우여곡절 끝에, 단순한 데모 게임이 여러 연출과 이야기가 담긴 하나의 완성된 작품으로 거듭났다. 이제 이 게임을 세상에 선보일 준비가 모두 끝났다.