피카츄 배구 소스 코드 - pikachyu baegu soseu kodeu

피카츄 배구

English | ✓ Korean(한국어)

피카츄 배구(対戦ぴかちゅ～ ﾋﾞｰﾁﾊﾞﾚｰ編)는 "(C) SACHI SOFT / SAWAYAKAN Programmers"와 "(C) Satoshi Takenouchi"가 1997년에 만든 윈도우용 게임입니다. 여기에 있는 소스 코드는 이 원조 피카츄 배구 게임의 머신 코드 주요 부분(물리 엔진과 AI 등)을 리버스 엔지니어링하여 자바스크립트로 구현한 것입니다.

https://gorisanson.github.io/pikachu-volleyball/ko/ 에서 이 피카츄 배구를 플레이할 수 있습니다.

로컬 환경에서 실행하는 방법

1. 본 저장소를 클론하고 해당 디렉토리로 들어갑니다.

git clone https://github.com/gorisanson/pikachu-volleyball.git
cd pikachu-volleyball

1. 의존하는 패키지를 설치합니다. (오류가 발생한다면, node v16와 npm v8을 사용해보세요.)

1. 코드를 번들링 합니다.

1. 로컬 웹 서버를 실행합니다.

1. 웹 브라우저에서 로컬 웹 서버로 접속합니다. (대부분의 경우, 서버에 접속하기 위한 URL은 http://localhost:8080 입니다. 정확한 URL은 터미널에 출력된 메시지에서 확인할 수 있습니다.)

게임 구조

• 물리 엔진: 공과 플레이어(피카츄)의 위치를 계산하는 물리 엔진은 src/resources/js/physics.js 파일에 담겨 있습니다. (플레이어가 컴퓨터와 대전 시 컴퓨터의 키보드 입력을 결정하는 AI도 동일한 파일에 담겨 있습니다.) 이 소스 코드 파일은 원조 게임의 머신 코드 00403dd0 주소에 위치한 함수를 리버스 엔지니어링하여 작성한 것입니다.

• 렌더링: PixiJS 라이브러리를 사용하였습니다.

더 자세한 사항은 src/resources/js/main.js 파일에 있는 주석에서 볼 수 있습니다.

사용한 리버스 엔지니어링 방법

다음 프로그램들을 사용했습니다.

• Ghidra
• Cheat Engine
• OllyDbg
• Resource Hacker

Ghidra는 머신 코드를 C 코드로 디컴파일할 때 사용했습니다. 디컴파일된 C 코드를 처음 봤을 때는 막막했습니다. 한 가지 이유는 변수들의 이름과 함수들의 이름이 iVar1, iVar2, FUN_00402dc0, FUN_00403070, ... 이런 식이라 이게 어떤 변수이고 어떤 역할을 하는 함수인지 알 수 없었기 때문입니다. 공의 좌표 변수가 머신 코드 어느 지점에서 엑세스 되는지 한번 알아나보자는 생각으로 Cheat Engine을 사용하여 해당 위치를 알아내었고, 거기서부터 디컴파일된 C 코드를 읽어내려가니 코드가 해석이 되기 시작했습니다. OllyDbg는 머신 코드의 일부분을 바꾸는데 사용했습니다. 예를 들어, 새 라운드가 시작할 때 "Ready?" 메시지가 깜빡 거리는데 이 때 재생되는 프레임 수가 몇 개인지 세기위해 게임 속도를 느리게 만들 때 사용했습니다. Resource Hacker는 게임 리소스(스프라이트, 소리)를 추출할 때 사용했습니다.

원조 게임과 일부러 다르게 한 사항

키보드 입력이 없는 경우, 얼마의 시간이 지나면 AI 대 AI 경기가 시작됩니다. 원조 게임에서는 이 경기가 약 40초간만 진행됩니다. 이 자바스크립트 버전에서는 이 AI 대 AI 경기의 제한 시간이 없으므로, 마음 놓고 원하는 만큼 관전할 수 있습니다.

피카츄 배구 P2P 온라인

English | ✓ Korean(한국어)

피카츄 배구(対戦ぴかちゅ～ ﾋﾞｰﾁﾊﾞﾚｰ編)는 "(C) SACHI SOFT / SAWAYAKAN Programmers"와 "(C) Satoshi Takenouchi"가 1997년에 만든 윈도우용 게임입니다.

피카츄 배구 P2P 온라인은 이 피카츄 배구 게임의 P2P (peer-to-peer) 온라인 버전입니다. 인터넷을 통해 다른 사람과 함께 플레이할 수 있습니다. 원조 게임을 리버스 엔지니어링해서 만든 피카츄 배구 오프라인 웹 버전에 WebRTC data channels을 결합하여 개발했습니다.

https://gorisanson.github.io/pikachu-volleyball-p2p-online/ko/ 에서 피카츄 배구 P2P 온라인을 플레이할 수 있습니다.

구조

• 오프라인 버전: 오프라인 웹 버전의 소스 코드 파일이 모두 src/resources/js/offline_version_js/에 담겨 있습니다. https://github.com/gorisanson/pikachu-volleyball/tree/main/src/resources/js 에 있는 소스 코드 파일과 동일한 것입니다. 이를 기반으로 온라인 버전을 만들었습니다.

• WebRTC data channels: WebRTC data channels를 이용한 P2P 온라인 핵심 기능들이 src/resources/js/data_channel/data_channel.js에 담겨 있습니다. (WebRTC로 P2P 연결을 맺기 위한 매개 수단으로 Firebase Cloud Firestore를 사용합니다. 방장이 방장의 친구에게 보내는 방 ID가 서로 공유하는 Cloud Firestore document의 ID입니다. Firebase + WebRTC Codelab 및 https://github.com/webrtc/FirebaseRTC에서 사용한 방식을 거의 그대로 이용한 것입니다.)

• 퀵 매치: 퀵 매치 서버와 통신하는 기능이 src/resources/js/quick_match/quick_match.js에 담겨 있습니다. (퀵 매치 서버로는 Google App Engine을 사용합니다. 퀵 매치 서버는 퀵 매치를 위해 현재 대기하고 있는 사람의 방 ID를 새로 들어온 사람에게 보내주는 역할을 합니다.)

게임에서 사용되는 RNG (random number generator) 부분만을 제외하면 게임 상태는 오로지 사용자의 (키보드) 입력에 의해 결정됩니다. 따라서 네트워크 양편에 있는 두 사용자가 사용하는 RNG가 같다면, 사용자의 입력을 서로 주고 받는 것만으로도 두 사용자의 게임 상태를 동일하게 유지할 수 있습니다. 이 P2P 온라인 버전은 data channel open event가 발생할 때 이 두 사용자의 RNG를 같게 만들고 그 후 사용자의 입력을 네트워크를 통해 서로 주고 받습니다.

더 자세한 사항은 src/resources/js/main_online.js 파일에 있는 주석에서 볼 수 있습니다.