게임 창 시작 화면

시작 메뉴

시작 메뉴 구성

처음 기본 페이지에서 전체화면 모드 또는 창 모드를 클릭해 게임 창으로 이동하면 나오는 화면이다.

메뉴 구성은 다음과 같다.

1. 해상도 설정
   • 16:9
   • 4:3
   • 16:10
2. 효과음 & 배경음
3. 시작 버튼
4. 랭킹 보드

해상도 설정

일단은 FPS 게임에 본질을 두고 있으니 모든 해상도는 아니더라도 가장 많이 쓰이는 해상도 설정 몇 가지 정도는 구현할 필요성을 느꼈다.

여기서 어려웠던 건 타겟 컨테이너, 즉 맵의 빨간 박스를 위 이미지처럼 맵의 벽면 부분에 정확히 위치시켜야 했는데 화면 크기가 변동될 때도 컨테이너가 똑같이 변경되어야 한다는 점이다. 맵의 정중앙에 컨테이너가 있었다면 간편했을 지 모르겠는데, 디자인 상 조금 위가 자연스러워서 그렇게 했더니 설정하기가 참 어려웠다.

그래서 결국 기본인 16:9일 때 기준으로 세부 설정값을 맞추고, 나머지 4:3이나 16:10일때도 각각 설정을 직접 0.001단위로 조절해가며 맵과 일치시켰다. 이 역할을 구현한 게 이전 글에서 한 번 보였던 getDefaultConfig 함수이다.

export const getDefaultConfig = (resolution: number): ContainerConfig => {
  if (resolution === 16 / 9) {
    return {
      mapAspectRatio: 16 / 9,
      targetAreaRatio: 1,
      verticalOffsetRatio: 0.246,
      widthScaleRatio: 2.438,
      heightScaleRatio: 4.124,
    };
  } else if (resolution === 16 / 10) {
    return {
      mapAspectRatio: 16 / 10,
      targetAreaRatio: 1,
      verticalOffsetRatio: 0.26,
      widthScaleRatio: 2.326,
      heightScaleRatio: 4.364,
    };
  } else {
    return {
      mapAspectRatio: 4 / 3,
      targetAreaRatio: 1,
      verticalOffsetRatio: 0.3,
      widthScaleRatio: 2.33,
      heightScaleRatio: 5.26,
    };
  }
};

설정을 해두고는 화면 너비가 변경될 때 가로 세로 비율이 달라지지 않게 해서 설정을 유지할 수 있었다.

효과음 및 배경음

효과음과 배경음은 게임을 쉽게 지루하게 만들지 않기 위해 꼭 필요한 요소였다. 애초에 단발성 게임이지만 그럼에도 소리가 있는 것과 없는 것은 차원이 다르다고 생각했다.

구현 자체에 큰 어려움은 없었는데, 원하는 소리를 찾는 데는 조금 오래 걸렸다.!!

velog에 소리 넣는 법을 찾아봤는데 아무래도 없는 것 같다ㅜ

BGM은 여기서 무료 다운로드 할 수 있었다.

BGM / 니아 / SellBuyMusic
https://sellbuymusic.com/md/mqqtckh-dffhnkh

랭킹 보드

시작 버튼은 그냥 시작버튼이고, 랭킹 보드는 말 그대로 랭킹 보드가 열린다. 여기서의 랭킹보드는 처음으로 백엔드 서버를 직접 만들어서 프로젝트에 넣어봤다. 다음 게시글에서 따로 정리하는 게 좋을 것 같다.

결과 메뉴

결과 메뉴 구성은 다음과 같다.

1. Score : 최종 점수
2. Accuracy : 타겟을 히트시킨 클릭 수 / 전체 클릭 수 * 100
3. Time : 플레이 시간
4. Rank : 점수를 기록할 시의 예상 등수

Rank

일반적으로 보면 점수, 플레이타임 정도면 충분하다고 생각할 수도 있다. 그런데 여기서 나는 예상 등수, RANK를 추가하기로 했다. 이유는 이런 단순한 점수제 형식의 게임은 등수를 올려가는데 의의를 두고 플레이하는 사용자가 많고, 이 때 단순 점수가 아니라 매 판 내가 몇 등 정도 했는지를 알고 더 열심히 하도록 유도하는 역할을 할 수 있다고 생각했기 때문이다.

예상 랭킹은 결과가 생성되면 해당 결과를 가지고 DB에서의 예상 등수를 반환하는 api를 통해 출력할 수 있도록 했다. 요청 지연시간에 대비해 각 결과 상태들에 애니메이션을 추가했다.

두 메뉴는 그리 특별한 기능은 없이 평범하게 구현했다.
다음은 랭킹보드의 백엔드, DB 구축 내용을 다루면 될 것 같다.