Super Stick Hero 소개

Super Stick Hero는 HTML5 Canvas 위에서 처음부터 만들어진 브라우저 기반 2D 격투 게임입니다. 다운로드도, 플러그인도, 계정도 필요 없습니다 — 탭 하나만 열면 바로 아레나에 입장합니다. 이 페이지에서는 이 프로젝트가 무엇인지, 왜 존재하는지, 어떻게 만들어졌는지, 그리고 앞으로 어디로 향하는지를 설명합니다.

비전

현대의 격투 게임은 화려해졌지만 무거워졌습니다. AAA 타이틀은 50기가바이트에 달하는 용량으로 출시되고, 콤보를 복잡한 시즌 패스 뒤에 가두며, 첫 라운드를 시작하기도 전에 전용 런처와 채팅 클라이언트를 설치하라고 요구합니다. 빠르게 진입할 방법이 없습니다. 스토어에서 구할 수 있는 고전 2D 격투 게임조차 주먹 한 번 내지르기 전에 10분에 달하는 다운로드와 업데이트, 계정 설정을 거쳐야 하는 경우가 많습니다.

Super Stick Hero는 그 반대 방향으로 스윙을 날리기 위해 존재합니다. 목표는 3초 안에 로딩되고, 5년 된 노트북에서도 초당 60프레임으로 구동되며, 플레이어의 시간을 존중하는 집중력 있고 메커니즘적으로 깊이 있는 격투 게임입니다. 플레이에 필요한 모든 것 — 캐릭터, 스테이지, 음악, 효과음 — 이 1메가바이트에 한참 못 미치는 코드와 단 하나의 다운로드 애셋 없이 담겨 있습니다. 8비트 사운드트랙은 브라우저에서 실시간으로 합성됩니다. 스프라이트는 이미지 파일에서 불러오는 것이 아니라 2D 캔버스 위에 실시간으로 그려집니다. 그 결과가 바로 웹 페이지 하나 안에 담긴 완결된 격투 게임입니다.

디자인 철학

세 가지 원칙이 게임의 모든 시스템을 형성합니다.

1. 연출보다 메커니즘 우선. 전투 시스템은 고전 Tekken(철권)에서 영감을 받은 4버튼 커맨드 문법을 중심으로 설계되었습니다 — 홈 로우에 배치된 펀치와 킥, 맥락을 더하는 방향 입력, 그리고 특수기를 여는 순차 및 동시 입력 코드로 구성됩니다. 모든 기술은 레지스트리에 담긴 데이터이므로, 새로운 기술을 추가하는 일은 새 클래스 계층을 만드는 것이 아니라 항목 하나를 추가하는 것으로 끝납니다.
2. 첫 스테이지에서 배울 수 있게. Stage 1에는 일반 적 하나만 등장합니다. 스테이지 5의 첫 보스에 도달할 무렵이면 여러분은 런처(launch), 저글(juggle), 가드 브레이크(guard-break), 잡기(throw)를 할 줄 알게 됩니다 — 튜토리얼이 알려줘서가 아니라, 난이도 곡선이 각 기술을 스스로 발견하도록 이끌었기 때문입니다. 적 AI는 아키타입(Normal, Fast, Heavy, Aggressive)에 따라 역할을 바꿔 매치업별 읽기를 가르칩니다.
3. 시험으로서의 보스전. 각 보스는 HP 임계값(100%, 66%, 33%)에 연동된 세 단계의 점진적 AI 페이즈를 가집니다. 페이즈 전환은 새로운 시그니처 무브를 추가하고, 반응 속도를 높이며, 잡기에 대한 취약성을 낮춥니다. 여러분은 단순히 패턴을 외우는 것이 아니라, 보스전에 이르기까지 스테이지에서 쌓아온 근육 기억을 스트레스 테스트하는 것입니다.

어떻게 만들어졌나

Super Stick Hero는 TypeScript로 작성되고 Vite로 번들링된 단일 페이지 React 애플리케이션입니다. 전체 게임 루프는 requestAnimationFrame을 통해 하나의 캔버스 엘리먼트 안에서 실행되며, React 트리는 주변 사이트 크롬(헤더, 푸터, 콘텐츠 페이지)만 처리합니다.

전투 엔진은 밑바탕부터 데이터 기반으로 설계되었습니다. 무브, 적 아키타입, 보스 페이즈, 스테이지 구성, 무기 무브셋이 모두 전용 모듈 안에 순수한 객체로 정의되어 있습니다. 렌더러는 무브마다 포즈 키프레임 사이를 보간하므로, 손으로 그린 스프라이트 시트가 아니라 프레임 데이터에 맞춰 애니메이션이 확장됩니다.

사운드와 음악은 전부 Web Audio API를 통해 런타임에 합성됩니다. BGM 엔진은 룩어헤드 스케줄링과 스테이지별 테마를 갖춘 커스텀 4채널 시퀀서(멜로디, 베이스, 아르페지오, 퍼커션)입니다. 서른다섯 개의 효과음 — 모든 타격, 블록, 점프, 대시, Ki 블래스트, 마무리 일격 — 은 샘플링된 오디오 파일이 아니라 즉석에서 생성되는 톤 형태의 엔벨로프입니다.

지금 여러분이 읽고 있는 이 사이트는 작은 Vite SSR 파이프라인을 사용해 빌드 시점에 정적으로 사전 렌더링됩니다. 그래서 각 페이지가 JavaScript로 채워야 하는 빈 컨테이너 대신 이미 텍스트가 담긴 HTML로 로딩되는 것입니다. 게임 자체는 React lazy import를 사용해 별도의 라우트(/play)로 로딩되므로, 마케팅 페이지는 가볍게 유지됩니다.

지금 게임에 담긴 것

• 서로 다른 HP, 속도, 크기, Ki 재생 특성을 가진 네 명의 플레이 가능한 파이터.
• 마흔 개가 넘는 맨손 무브에 더해 검, 봉, 쌍절곤 각각의 무기 전용 무브셋.
• 여섯 가지 Ki 특수기 — Ki Blast, Power Blast, Energy Dash, Ki Burst, Super Beam, Dragon Fist — 전투 중에 충전하는 게이지에 의해 개방됩니다.
• 열 명의 고유 보스로 마무리되는 열여덟 개의 수제 스테이지, 그리고 스테이지 19 이후의 절차적 무한 모드.
• 날씨 파티클을 갖춘 여덟 가지 배경 테마, 세 가지 보스 전용 BGM 트랙, 타격 이펙트 VFX, 그리고 마무리 일격 슬로모션 피니셔.
• 콤보 배율 점수(1.0× → 3.0×), 스테이지별 클리어 보너스, 그리고 로컬 상위 5위 하이스코어 테이블.
• 완전한 모바일 지원: 터치 오버레이(D-pad + 6개 액션 버튼 + 점프/대시), 반응형 캔버스 스케일링, 전체화면 토글.

다음에 올 것

이 프로젝트는 활발히 개발 중입니다. 다음으로 계획된 기능들은 다음과 같습니다:

• 난이도 선택, 볼륨 믹서, 키 리매핑을 갖춘 설정 메뉴.
• 트레이닝 모드 — 콤보 카운터와 화면 내 무브 리스트 오버레이를 갖춘 무한 더미 적.
• 분할 키보드 조작과 3전 2선승제를 갖춘 로컬 2인 대전.
• 캐릭터 커스터마이징: 개방 가능한 컬러 팔레트와 대체 스킨.
• 클리어한 스테이지를 다시 플레이하며 스테이지별 최고 점수를 추적하는 스테이지 셀렉트.
• 브라우저 로컬 스토리지에 저장되는 영구 세이브 데이터(개방 요소, 총 클리어 스테이지 수, 최장 콤보).

출시된 변경 사항의 패치 노트는 Updates 페이지에서 확인할 수 있습니다.

기술 스택

• 런타임: React 19 + TypeScript, Vite 7로 번들링.
• 렌더링: HTML5 Canvas 2D 컨텍스트, 800×400 네이티브 해상도로 소프트웨어 래스터라이즈되며 더 큰 디스플레이에서는 CSS 업스케일 적용. image-rendering: pixelated를 통해 픽셀 아트 렌더링을 보존합니다.
• 오디오: Web Audio API. SFX와 BGM 모두 엔진 내부에서 합성됩니다 — 외부 오디오 파일이 없습니다.
• 라우팅: 콘텐츠 페이지에 대한 정적 사전 렌더링을 갖춘 React Router 7 (빌드 시점에 HTML로 서버 사이드 렌더링되고, 클라이언트에서 하이드레이션).
• 호스팅: Vercel, 매 푸시마다 main 브랜치에서 배포.
• 영속성: 브라우저 localStorage — 현재는 하이스코어에 사용되며, 개방 요소와 진행도를 위한 세이브 시스템이 계획되어 있습니다.

프로젝트 현황 & 연락처

Super Stick Hero는 한 세대의 플레이어에게 "기본기"가 무엇인지 가르쳐 준 아케이드 격투 게임 시대에 바치는 연애편지로서 개발된 개인 프로젝트입니다. 이 게임은 무료로 플레이할 수 있고, 앞으로도 무료로 유지되며, 전적으로 클라이언트 사이드에서 구동됩니다 — 서버 비용도, 텔레메트리 파이프라인도, 설계에 얽매일 마이크로트랜잭션도 없습니다.

버그 신고, 기능 아이디어, 밸런스 피드백은 모두 Contact 페이지를 통해 환영합니다. 어떤 무브가 고장 난 것처럼 느껴지거나 보스가 불공평하게 느껴진다면 알려 주세요 — 작은 프로젝트이기에 직접적인 피드백이 그 무엇보다도 다음 패치를 더 크게 좌우합니다.

들러 주셔서 감사합니다. 이제 ▶ Play를 눌러 Iron Fist의 가드를 부수러 가 보세요.