탁구 게임 소스코드: Sunset Rally 파일별 해설
브라우저용 3D 탁구 게임을 파일 단위로 살펴봅니다. 물리, 점수, 캠페인, 장소가 어디에 있는지, 무엇부터 바꾸면 좋은지 정리했습니다.
직접 호스팅하고 수정할 수 있는 탁구 게임 소스코드가 필요하다면, Sunset Rally는 이미 완성된 브라우저용 3D 탁구 게임입니다. 9경기로 이루어진 캠페인, 컴퓨터가 조종하는 상대 3명, 공방(워크숍), 그리고 TypeScript 프로젝트 전체가 정가 $39에 포함됩니다. 게임 폴더는 이미 빌드되어 있고 압축(minify)되지 않았기 때문에, 먼저 올려 두고 코드는 나중에 천천히 읽어도 됩니다.
스포츠 게임은 보기보다 수정하기 어렵습니다. 재미가 메뉴가 아니라 물리와 조작감에서 나오기 때문입니다. 이 글에서는 Sunset Rally 프로젝트에서 각 요소가 어디에 있는지, 안전하게 바꿀 수 있는 것은 무엇인지, 이번 에디션에 빠져 있는 것은 무엇인지 설명합니다.
게임 플레이 방식
경기는 컴퓨터 상대와 7점을 먼저 내는 쪽이 이깁니다. 포인터를 움직이거나 드래그해서 라켓을 조종하고, 타격은 자동으로 이루어집니다. 위로 밀면 힘이 실리고, 옆으로 움직이면 공의 방향이 정해지며, 아래로 당기면 드롭샷이 됩니다. 높이 뜬 공은 스매시하면 됩니다.
경기 중에 켜고 끌 수 있는 보조 기능이 라켓을 공 높이에 맞춰 줍니다. 공개 사이트에서는 이 점이 중요합니다. 휴대폰으로 처음 해 보는 사람도 공을 받아넘길 수 있기 때문입니다.
컴퓨터 상대는 각자 스타일이 다른 세 명입니다. 침착한 Capi, 장난기 많은 Nori, 정확한 Miso가 있고, 각각 쉬움·보통·어려움 난이도로 상대할 수 있습니다. 연습 모드에서는 모든 공을 받아 주는 파트너와 칠 수 있습니다. 경기가 끝나면 리플레이로 결정적인 득점 장면을 다시 보여 줍니다.
탁구 게임 소스코드 패키지 구성
- 바로 호스팅할 수 있는 game/ 폴더(빌드 완료, 압축되지 않음).
- Vite 설정과 게임 에셋이 포함된 개발자용 TypeScript 소스(source/ 폴더).
- 실제 스크린샷이 들어간 영어·포르투갈어 그림 매뉴얼.
- 게임에 포함된 폰트와 오디오 파일.
- 서드파티 라이선스 고지와 변경 이력(changelog).
기술 스택은 TypeScript, Three.js r184, Vite, WebGL2입니다. 파일 형식은 HTML, CSS, JavaScript, TypeScript, JSON입니다. 인터페이스는 영어, 포르투갈어, 스페인어, 프랑스어, 독일어, 이탈리아어, 네덜란드어, 폴란드어, 튀르키예어, 러시아어, 인도네시아어, 일본어, 한국어, 중국어 간체 등 14개 언어를 지원합니다. 매뉴얼은 영어와 포르투갈어로만 제공됩니다.
경기 외의 콘텐츠도 패키지에 들어 있습니다. 3개 스테이지 9경기로 이루어진 Sunset Circuit, 아침·오후·밤·비 오는 날로 바뀌는 세 장소(노을 정원, 벚꽃 정원, 바닷가 카페), 그리고 승리로 모은 코인으로 라켓 색상, 러버, 모양, 손잡이, 목재, 엣지 테이프, 스티커, 공과 탁구대 스타일을 구입하는 공방이 있습니다.
코드에서 각 요소의 위치
매뉴얼은 게임의 각 부분이 어느 파일에 있는지 알려 줍니다. 작업하는 동안 열어 두면 좋은 목록입니다.
- Campaign.ts: 캠페인 9경기와 별 획득 목표.
- Places.ts: 각 장소의 모습.
- physics.ts: 공과 라켓의 물리.
- match.ts: 점수와 경기 규칙.
- i18n.ts: 영어·포르투갈어 인터페이스 텍스트. 나머지 언어는 locales 폴더에 있습니다.
- styles.css: 메뉴와 화면 스타일.
캠페인 경기마다 별을 최대 3개 받을 수 있습니다. 이기기, 코너 세 곳 맞히기, 10구 이상 랠리하기입니다. 모두 합하면 별 27개이고, 장소를 하나 클리어할 때마다 공방 보상을 받습니다. 별 조건이 캠페인 파일 하나에 모여 있어서, 코드를 뒤지지 않고도 캠페인 난이도를 조절할 수 있습니다.
탁구 게임 템플릿에서 먼저 바꿀 것
위험이 낮은 것부터 높은 것 순으로 이 순서를 권합니다.
- 인터페이스 텍스트와 게임 이름: i18n.ts와 locales 폴더.
- 색상과 화면: styles.css.
- 라켓, 공, 탁구대의 공방 스타일: 장비에 브랜드를 입힐 수 있습니다.
- 장소 그래픽: Places.ts.
- 캠페인 경기와 별 목표: Campaign.ts.
- 물리와 점수: physics.ts와 match.ts. 타구감을 바꿔야 할 때만 수정하세요.
매뉴얼에는 지켜야 할 규칙이 세 가지 더 있습니다. 잠금 해제 ID, 아이템 ID, 저장 키는 바꾸지 마세요. 바꾸면 플레이어가 모은 것을 잃습니다. 작업 전에 백업하세요. 기능은 한 번에 하나씩 바꿔야 어떤 수정이 어떤 결과를 냈는지 알 수 있습니다.
화이트 라벨이 허용됩니다. 저희 이름과 로고 대신 귀사나 고객사의 이름과 로고를 넣을 수 있습니다.
다시 빌드하기, 호스팅, 페이지에 넣기
플레이만 할 거라면 빌드할 필요가 없습니다. 정적 파일을 제공하는 HTTP(S) 호스팅이라면 어디든 game/ 폴더의 내용을 올리고, 상대 경로를 유지한 채 주소를 열면 됩니다. PHP, 데이터베이스, 계정은 필요 없습니다.
소스를 수정하려면 Node.js(24 LTS 권장)와 npm이 필요합니다. TypeScript를 수정하고 Vite로 다시 빌드한 다음, 호스팅 중인 game/ 폴더를 새 결과물로 바꾸세요.
브라우저는 JavaScript, ES 모듈, WebGL2를 지원해야 합니다. 터치와 마우스를 모두 지원하며, 조작은 화면 크기에 맞게 바뀝니다. 성능은 브라우저와 기기에 따라 다르므로 플레이어들이 쓰는 휴대폰에서 꼭 테스트하세요.
- 호스팅의 테스트 폴더에 game/을 올립니다.
- 데스크톱 브라우저와 휴대폰에서 각각 한 경기씩 해 봅니다.
- source/에서 텍스트와 스타일을 수정하고 다시 빌드합니다.
- 테스트 폴더 전체를 교체하고 다시 플레이합니다.
- 최종 주소로 옮깁니다.
이번 에디션에 포함되지 않는 것
이번 에디션은 컴퓨터와 대전합니다. 캠페인, 자유 경기, 연습 모드가 있습니다. 온라인 멀티플레이, 온라인 방, 온라인 랭킹, 클라우드 계정은 패키지에 없고, 2인 플레이 모드도 없습니다. 광고 SDK나 광고 계정도 없으며, 네이티브 앱과 호스팅은 포함되지 않습니다.
진행 상황은 플레이어의 브라우저에 저장됩니다. 캠페인 별, 경기 결과, 통계, 리플레이, 공방 아이템이 모두 그렇습니다. 서버나 계정을 쓰지 않으므로 출시 후 따로 관리할 것이 없습니다.
온라인 모드, 포털 SDK, 앱 스토어 버전, 귀사 서버 설치가 필요하다면 별도 서비스로, 프로젝트별로 견적을 드립니다.
라이선스, 지원, 가격 요약
한 번 구매하면 최종 제품 하나(귀사 또는 고객사 한 곳)에 대한 영구·비독점 라이선스를 받습니다. 플레이어는 이 제품을 무료로, 또는 광고 수익화와 함께 이용할 수 있습니다. 그 제품 안에서는 코드, 그래픽, 오디오를 수정할 수 있지만, 템플릿이나 소스코드, 에셋 자체를 따로 재판매하거나 공유할 수는 없습니다. 지원 기간은 6개월이며, 결제할 때 연장을 추가하면 12개월입니다. 파일 설치와 사용, 재현 가능한 결함 수정이 지원 범위이고, 커스터마이징, 호스팅, SDK나 포털 연동은 별도 견적입니다. 정가는 $39입니다. 2026년 11월 30일까지는 블랙프라이데이 프로모션으로 모든 템플릿이 15% 할인되어 Sunset Rally는 $33.15이며, 12월 1일부터는 정가로 돌아갑니다.
자주 묻는 질문
이 탁구 게임을 쓰려면 빌드를 해야 하나요?
아니요. game/ 폴더는 이미 빌드되어 있습니다. 정적 웹 호스팅에 내용을 올리고 주소를 열면 됩니다. Node.js와 npm은 TypeScript를 수정해서 다시 빌드할 때만 필요합니다.
2인 모드나 온라인 모드가 있나요?
아니요. 이번 에디션은 캠페인, 자유 경기, 연습 모드에서 컴퓨터와 대전합니다.
캠페인과 별 목표를 바꿀 수 있나요?
네. 경기와 별 조건은 Campaign.ts에 있습니다. 수정 후 Node.js로 다시 빌드하세요.
공의 움직임을 바꿀 수 있나요?
네. 물리는 physics.ts에, 점수 규칙은 match.ts에 있습니다. 한 번에 하나씩 바꾸고 모든 상대와 테스트하세요.
휴대폰에서도 되나요?
네. 화면에 맞춰 바뀌는 터치 조작을 지원합니다. WebGL2가 필요하고 성능은 기기에 따라 다르므로, 대상으로 하는 휴대폰에서 테스트하세요.
진행 상황은 어디에 저장되나요?
플레이어의 브라우저에 저장됩니다. 서버나 계정은 사용하지 않습니다.
함께 비교할 만한 스포츠 템플릿
사이트에 스포츠 게임 코너를 만든다면 Sunset Rally와 잘 어울리는 템플릿이 두 개 더 있습니다. Velvet Pool은 컴퓨터 상대와 로컬 2인 플레이를 지원하는 8볼 당구 게임으로, WebGL2와 순수 JavaScript로 만들었으며 정가 $39입니다. Puttide는 30홀 3D 미니골프 게임으로, Three.js와 Rapier 기반이며 정가 $39입니다. 둘 다 인터페이스가 14개 언어를 지원합니다.
Sunset Rally는 짧은 경기의 스포츠 게임을 원하는 포털과 사이트, 고객 한 곳에 브랜드 게임을 납품하는 스튜디오, 읽기 쉬운 TypeScript·Three.js 프로젝트로 공부하거나 확장하고 싶은 개발자에게 잘 맞습니다. 한 기기에서 두 사람이 함께 해야 한다면, 그 모드는 Velvet Pool에 있고 Sunset Rally에는 없습니다.
한 주문에서 템플릿을 두 개 이상 사면 라이선스당 가격이 내려갑니다. 2개는 5%, 3개는 10%, 4개는 15%, 5개 이상은 20% 할인됩니다.