🙂 계기
최근에 목적의식과 방향을 잃은 채로 계속 있다 보니 무엇을 어떻게 해야 할지를 몰라서 많이 해이해졌었습니다. 그러다가 흥미를 갖고 다시 시작하려면 재미있는 것을 하려고 생각하다가 예전부터 한 번쯤은 만들어보고 싶었던 웹 게임을 한번 만들어보면 좋겠다고 생각해서 시작했습니다.
🤔 구상
실제 게임을 출시할 것도 아니고 캐릭터를 직접 만들 정도의 수준도 아니기 때문에 이미 만들어진 게임 중에서 고르자고 마음먹고 슈퍼 마리오 월드를 선택했습니다. 마리오도 버전이 많아서 그중에서 캐릭터 화질이 안 좋아 보이는 것으로 골랐습니다. 또한 JavaScript 보다는 TypeScript를 이용하는 것이 더 이점이 많다고 생각해서 TypeScript를 선택했고, 이미지도 하나하나 따로 로드하는 것보다는 이미지 스프라이트를 이용하는 것이 더 효율적인 것으로 알고 있어서 이미지 스프라이트를 찾아서 사용했습니다.
현재 구한 이미지 스프라이트가 캐릭터 간의 빈 여백도 많고, 반복된 이미지도 있고, 여러 줄로 나뉘어 있기 때문에 사용하기 불편해서 추후에 이미지 편집 툴을 이용해서 수정할 예정입니다.
1. 기본적으로 구현할 기능들
- 마리오 좌/우 이동 및 점프
- 자동으로 생성되어 움직이는 굼바
- 코인 및 점수
- 지형 및 장애물
- 맵 이동
- 적 밟기
2. 추가적으로 구현할 기능들
- 특정 상황에 맞는 효과음
- 캐릭터 상태 변경 ( 버섯, 꽃 등 )
- 거북이 및 등껍질 차기
😏 배경 및 캐릭터 좌/우 이동 구현
1. 배경 구현
기본적으로 웹에서 게임과 같이 그래픽적인 요소를 많이 사용한다면 canvas를 이용하는 것이 좋다는 것은 알고 있었습니다. 따라서 canvas를 웹 페이지 전체를 차지하도록 지정하고 canvas크기에 맞게 배경 화면을 가득 채워주도록 코드를 작성해서 배경 화면을 구현했습니다.
중요하지 않은 부분이라 코드를 생략하겠습니다.
2. 캐릭터 좌/우 이동 구현
사용한
codepen예시들은 실제로 사용한 코드를 간단화한 예시용 코드입니다.
초기에는 캐릭터를 움직이기 위해서는 keydown이벤트를 이용해서 방향키를 입력받는 시점에 캐릭터에게 행동 모션을 주면서 좌표를 이동시키면 될거라고 생각했습니다.
처음에는 위의 방식대로 코드를 작성했습니다. 하지만 동작에서 한 가지 문제와 이후에 발생할 한 가지 문제를 찾았습니다. 일단 동작에서 발생하는 문제는 키를 꾹 누른 경우 잠시 멈췄다가 계속 실행되는 문제입니다. 이후에 발생할 문제는 캐릭터에 관한 입력이 수행되지 않는 경우에는 모든 과정이 멈추는 것입니다. 캐릭터와 굼바 혹은 캐릭터와 배경 이펙트 같은 경우는 서로 독립적으로 실행되어야 하는데 이렇게 코드를 구성하면 캐릭터의 입력이 없다면 다른 동작이 멈추는 경우가 발생할 거로 생각해서 해당 코드는 폐기하고 다른 방법을 찾아봤습니다.
이후 찾은 방법이 requestAnimationFrame()을 사용하는 방법입니다. 60FPS를 목적으로 코드를 반복적으로 수행하며, 성능적으로도 최대한 문제가 없도록 동작하는 함수로 알고 있습니다.
이후에 구현한 방법은 keydown이벤트에서 입력받은 키를 따로 변수에 저장하고 / keyup을 이용해서 저장한 키를 제거하고 requestAnimationFrame()을 통해서 동작을 수행하도록 만들었습니다.
이미지 스프라이트 사용, 가속도, 캐릭터 위치에 대한 설명은 생략하겠습니다.