어떤 웹사이트든 파괴하는 스틱맨 게임 제작기
요약
이 글은 웹사이트 URL을 입력하면 해당 페이지를 레벨로 변환하여 파괴하는 스틱맨 샌드박스 게임 제작 과정을 공유합니다. 개발자는 TS와 Canvas 2D를 사용하여 엔진 및 렌더러를 구축했으며, Cloudflare DOs와 Workers를 활용해 멀티플레이어 기능을 구현했습니다.
핵심 포인트
- 웹사이트 URL을 레벨로 변환하는 파괴 샌드박스 게임 제작
- TS와 Canvas 2D를 이용한 커스텀 엔진 및 렌더러 구축
- Cloudflare DOs/Workers를 활용한 저렴하고 빠른 멀티플레이어 구현
최종 게임 프로젝트입니다. 지난 주말 동안 제가 꿈꾸던 스틱맨 샌드박스 게임을 만들었습니다 (Animator Vs. Animation의 큰 팬입니다). 이 게임은 기본적으로 파괴 샌드박스로, 웹사이트 URL을 입력하면 해당 페이지를 레벨로 변환할 수 있습니다. 그런 다음 무기를 이용해 모든 것을 파괴하기만 하면 됩니다 :D
기술 스택:
- 언어: 저는 TS 개발자라... 간단한 Canvas 2D를 사용하여 raw 엔진 및 렌더러를 TS로 구축했습니다.
- 멀티플레이어 (네!): Cloudflare DOs를 사용했습니다. 이전에 Cloudflare DOs로 빌드해 본 경험이 있어 방(rooms)과 게임 상태 동기화(game state syncs)에 적합하다고 생각했습니다.
- 호스팅: Cloudflare Workers. 매우 저렴하고 빠릅니다. 또한, 일반적으로 NPM 패키지와의 호환성 문제가 있을 수 있지만, 여기서는 많이 사용하지 않았고 Worker 런타임에서 잘 작동합니다. 다른 세부 정보가 필요하면 알려주세요. 픽셀 아트 렌더링, FX 등에도 몇 가지 트릭을 적용했습니다!
Claude Opus 5.5를 활용한 방법:
- 아키텍처 및 기술적 타협점 브레인스토밍: 처음부터 비교적 명확한 아이디어가 있었고, Claude의 도움으로 이를 구현 계획으로 바꿀 수 있었습니다.
- 디자인 패턴 일관성 유지를 위한 구현: Opus 5.5를 예상보다 더 많이 이끌어야 했지만, 여전히 큰 도움이 되었습니다.
- 예술적 결정에 대한 실행: 제가 원하는 대로 FX와 파티클을 미세 조정하기 위해 Claude를 사용했습니다.
제출자 /u/HugoDzz [링크] [댓글]
AI 자동 생성 콘텐츠
본 콘텐츠는 r/ClaudeAI (top/week)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기