KANA 픽셀 토끼 궁수

Prompt

로그인 후 복사

순수 JavaScript와 Canvas 2D를 사용하여 픽셀 아트 토끼 궁수 캐릭터의 애니메이션을 렌더링하는 독립형 HTML 파일 하나를 만드세요. 첨부한 KANA 토끼 캐릭터를 시각적 참고 자료로 사용하세요. - 흰 토끼 - 안쪽에 청록색/파란색 발광 디테일이 있는 크고 곧게 선 귀 - 정상적인 파란 눈 하나 - 빨간 사이버네틱 기계 눈 하나 - “KANA”가 적힌 노란 후드티 - 짙은 파란색 장갑과 바지 - 노란색/파란색 SF 기계식 다리 갑옷 - 귀여운 SD 캐릭터 비율 - 미래적인 활과 화살 - 등에 멘 작은 화살통 외부 에셋, 라이브러리, 이미지, 글꼴 또는 네트워크 요청을 사용하지 마세요. 모든 요소는 코드로 절차적으로 그려야 합니다. 렌더링 - 먼저 논리 해상도 160x120으로 고정한 오프스크린 캔버스에 모든 것을 렌더링하세요. - 브라우저 창에 맞는 가장 큰 정수 배율로 전체 화면 표시용 캔버스에 확대하세요. - 캔버스를 가운데 배치하세요. - imageSmoothingEnabled = false로 설정하세요. - CSS image-rendering: pixelated를 사용하세요. - 모든 좌표를 정수에 맞추세요. - 그라디언트, 흐림, 안티앨리어싱, shadowBlur, 서브픽셀 렌더링은 금지합니다. - 약 28색의 고정 팔레트를 사용하세요. 어두운 남색 배경, 흰색/회색 털, 노란 후드티, 파란 옷, 빨간 기계 눈, 청록색 귀 조명, 노란색/주황색 활과 화살 효과를 포함하세요. 캐릭터 픽셀 사각형, 다각형처럼 배열한 픽셀, 픽셀로 근사한 원, 단순한 블록 형태로 토끼를 절차적으로 구성하세요. 캐릭터 크기는 가로 약 28–34픽셀, 세로 약 40–48픽셀입니다. 큰 토끼 귀, 둥글고 복슬복슬한 머리, 작은 몸, 빨간 기계 눈, 노란 후드티, 기계 다리, 활, 화살, 화살통이 실루엣에서 분명히 드러나야 합니다. 귀, 머리, 팔, 다리, 후드티, 활, 화살, 몸통을 각각 따로 애니메이션 처리하세요. 메인 루프는 60fps로 렌더링하되, 포즈를 양자화하여 시각적으로는 정교한 8–12fps 스프라이트 애니메이션처럼 느껴지게 하세요. 동작 다음 8개 동작을 반복하는 애니메이션 쇼케이스를 만드세요. 1. 대기(IDLE) - 준비 자세로 서 있는 토끼 - 몸이 살짝 위아래로 움직임 - 귀가 미세하게 움직임 - 후드티와 화살통이 흔들림 - 기계 눈이 부드럽게 맥동하며 빛남 - 활을 몸 옆에서 편하게 들고 있음 2. 달리기(RUN) - 빠르게 앞으로 달림 - 다리가 힘차게 교대로 움직임 - 팔로 균형을 잡음 - 한 손에 활을 듦 - 화살통이 튀어 오름 - 귀가 약간 뒤로 날림 - 발밑에 작은 먼지 픽셀이 나타남 3. 조준(AIM) - 두 발을 단단히 디딤 - 활을 들어 올림 - 화살통에서 화살을 꺼냄 - 화살을 시위에 걸음 - 시위를 뒤로 당김 - 한쪽 눈으로 목표에 집중함 - 기계 눈이 더 밝아짐 - 몸을 사격 방향으로 약간 기울임 4. 발사(SHOOT) - 시위를 놓음 - 화살이 화면을 빠르게 가로지름 - 활에 약한 반동이 생김 - 팔이 자연스럽게 후속 동작을 이어 감 - 화살 뒤로 밝은 노란 에너지 궤적이 생김 - 화면이 1–2픽셀 정도 작게 흔들림 - 기계 눈이 빨갛게 번쩍임 - 활에서 총구 섬광 같은 빛이 잠깐 터짐 5. 점프(JUMP) - 웅크림 - 위로 뛰어오름 - 다리를 몸 아래로 접음 - 귀가 뒤늦게 반응함 - 활을 몸 가까이에 듦 - 도약할 때 작은 먼지 구름이 터짐 - 픽셀을 깨뜨리지 않는 정수 변환으로 약한 스쿼시 앤 스트레치를 적용함 6. 회피 / 구르기(DODGE) - 빠르게 몸을 숙임 - 옆으로 구름 - 활을 몸 가까이 유지함 - 귀를 뒤로 눕힘 - 작은 먼지 입자와 움직임을 나타내는 픽셀이 생김 - 낮은 전투 준비 자세로 마무리함 7. 부상 / 피격(HURT) - 뒤로 약간 밀려남 - 머리가 갑자기 뒤로 젖혀짐 - 귀가 크게 반응함 - 기계 눈이 깜박거림 - 작은 픽셀 별이나 충격 불꽃이 나타남 - 활이 내려가거나 거의 손에서 떨어질 듯함 - 잠깐의 지연 후 회복함 8. 승리(VICTORY) - 활을 머리 위로 들어 올림 - 기쁜 표정 - 한쪽 귀가 장난스럽게 기울어짐 - 기계 눈이 밝게 빛남 - 작은 노란 축하 입자가 나타남 - 짧게 승리의 점프를 함 - 마지막 자세는 귀엽고 영웅적이어야 함 상태 머신 IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE 순서로 반복하세요. 각 동작은 시각적으로 명확히 파악할 수 있을 만큼 충분히 길어야 합니다. 포즈 전환에는 이징 함수를 사용하세요. 상태 사이에 짧은 전환 애니메이션을 넣어 포즈가 갑자기 바뀌지 않고 루프가 연속적으로 이어지게 하세요. 활과 화살 - 미래적인 곡선형 활 - 흰색 / 짙은 남색 본체 - 노랗게 빛나는 기계 관절 - 가늘고 밝은 시위 - 밝은 노란색 화살촉 - SHOOT 중 화살 궤적은 잠깐만 남음 - 화살통 안에 여러 화살이 보임 입자 실행 중 메모리 할당이 없는 풀 기반 입자 시스템을 구현하세요. 애니메이션 루프 전에 모든 입자를 미리 할당하세요. 입자 종류: 발밑 먼지, 화살 궤적, 활의 에너지 불꽃, 기계 눈의 불꽃, 피격 시 별, 승리 입자. 각 입자는 시간이 지나면서 팔레트 내 색상을 바꿉니다. 메인 루프 안에서 새 객체를 할당하지 마세요. 장면 어두운 밤하늘, 몇 개의 1픽셀 별, 큰 달, 단순한 돌 또는 미래적인 플랫폼, 아주 희미한 먼 배경 실루엣으로 최소한의 픽셀 아트 환경을 만드세요. 토끼의 실루엣이 항상 잘 보이도록 배경은 단순하게 유지하세요. AIM과 SHOOT 중에는 기계 눈에서 나오는 은은한 청록색/빨간색 림 라이트와 활에서 나오는 노란 림 라이트를 추가하세요. 기술 요구 사항 - HTML 파일 하나 - 순수 JavaScript만 사용 - Canvas 2D만 사용 - 라이브러리, SVG, 외부 이미지, 에셋, 네트워크 요청 금지 - 고정 60Hz 타임스텝 - requestAnimationFrame으로 렌더링 - 메인 애니메이션 루프에서 객체 할당 0회 - 안정적인 60fps - 반응형 전체 화면 확대/축소 - 선명한 정수 배율 픽셀 품질 기준 완성도 높은 16비트 액션 게임 주인공의 스프라이트 애니메이션처럼 보여야 합니다. 단순한 기하학 도형을 조합한 모습은 피하세요. 토끼는 표정이 풍부하고 귀여우며 빠르고 전투 능력이 있어 보여야 합니다. 8개 동작은 모두 분명히 다른 실루엣을 가져야 합니다. 모든 애니메이션 상태에서 캐릭터 디자인을 일관되게 유지하세요. 최종 결과는 실제 픽셀 아트 액션 게임에 사용할 수 있는 수준이어야 합니다.