JS 헥스 전투 엔진: 스프라이트와 애니메이션

자바스크립트로 구현한 정사각형 전술 전투 엔진: 스프라이트와 애니메이션 포함

이 자바스크립트 기반 스프라이트 엔진은 평탄한 점상 위 방향 정육각 그리드(짝수-행 오프셋)에서 유닛의 부드러운 애니메이션, 이동 및 상호작용을 제공합니다. 화면 크기 조정 시 동적 리사이징을 지원하며, 모바일 장치에서는 회전도 자동 처리됩니다. 고수준 API를 통해 목표 정육각으로 이동하거나 적을 공격하는 명령을 간단히 실행할 수 있으며, 하위 레벨 로직에 깊이 몰입할 필요가 없습니다.

하위 레벨에서는 스프라이트 애니메이션 전환, 객체의 부드러운 이동, 유닛 배치, 경로 탐색 기능을 제공합니다. 알고리즘은 이동 및 공격 가능한 타일을 강조 표시합니다. 애니메이션은 걷기, 공격, 피해 입기, 사망 등 다양한 상태를 포함하며, 사망한 유닛은 전장에 그대로 남아 있습니다.

애니메이션 속도는 상황에 따라 자동 조절됩니다: 정지 상태는 느리게, 공격과 같은 활동적인 행동은 빠르게 재생됩니다.

데스크톱 및 모바일 컨트롤

이동: 목표 정육각을 클릭하면 경로가 강조되며, 고전적인 '헤로즈' 스타일 게임처럼 작동합니다. 마우스 커서 없이 모바일에서 사용 시, 정육각을 두 번 터치하여 확정합니다.

공격: 적이 있는 정육각을 클릭하면 가능한 공격 위치가 표시됩니다. 두 번째 클릭으로 공격을 시작하고, 다른 곳을 클릭하면 선택을 취소합니다. 여러 정육각을 차지하는 유닛의 경우 각 정육각을 영역으로 나누어 혼란을 방지합니다. 최적화 팁: 적 정육각을 두 번 터치하면 가장 가까운 유효한 타일에서 공격이 시작됩니다.

공격 시에는 50% 확률로 즉사 효과가 발생합니다.

AI 생성 스프라이트

스프라이트는 챗GPT(무료 및 유료 버전 모두 동일한 품질)를 활용해 생성되었습니다. 배경은 완전히 프롬프트 기반이며, 스프라이트는 후처리가 필수적입니다: 배경 제거, 중심 정렬, 수동 애니메이션 보정.

흔한 문제:

• 걷기 사이클에서 다리 교차 움직임 부족 → 수동 수정 필요.
• 무기 손 바꾸기 (예: 엘프 기사).
• 궁수 애니메이션 오류: 활 없는 화살 또는 실이 없는 활.
• 기사 사망 애니메이션에서 판타지적 왜곡.
• 이미지 위에 불필요한 텍스트 오버레이.

수정 프롬프트는 효과 없음; 새로운 생성 세션 필요. 후처리 작업은 요소 분리, 조각 회전, 접합부 자연스럽게 합성 포함.

미래 개발 로드맵

다음 단계:

• 유닛 통계(공격력, 방어력, 체력), 피해 공식, 순서 시스템(속도와 별개로 균형 유지 — 예: 포탑).
• 직사각형 그룹화된 유닛 + 체력 막대(문서 객체 모델 기반 진행률 바).
• 마우스 호버 시 유닛 정보 툴팁.
• 원거리 유닛의 발사체 애니메이션(화살, 돌, 빛줄기).
• 다른 유닛 위를 날아가는 비행 유닛.
• 싱글 플레이 전투용 AI.
• 클라이언트-서버 기반 네트워크 PvP 아키텍처.
• 두 정육각 동시 공격(용, 사이클롭스 등).

주요 특징

• 경로 탐색 및 배치 알고리즘이 내장된 점상 위 방향 짝수-행 정육각 그리드.
• 변수 속도와 반응형 스케일링을 지원하는 적응형 애니메이션.
• 데스크톱과 모바일 모두에서 클릭/터치 기반의 크로스플랫폼 컨트롤.
• 필수 후처리가 필요한 AI 생성 스프라이트.
• 전술 명령을 위한 고수준 API.

데모는 Netlify와 itch.io에서 확인 가능. 프로젝트는 전체 캠페인 모드 없이 전술 전투에 집중합니다.

— Editorial Team