Repolode
제출하기
patch-gg

patch-gg/pixelfx

232개의 픽셀 아트 효과(불, 폭발, 마법, 날씨, UI 등)를 작은 JavaScript 모듈로 제공하는 라이브러리로, 새 효과 제작을 돕는 Claude Code 스킬도 포함합니다.

GitHub에서 보기웹사이트
스타
5,563
포크
734
열린 이슈
0
마지막 커밋
7일 전

어떤 프로젝트인가요?

pixelfx는 각각 작은 JavaScript 코드로 작성된 픽셀 아트 효과와 애니메이션 232개를 모아 둔 프로젝트입니다. 불, 폭발, 물, 얼음, 번개, 마법, 날씨, 근접 공격, 아이템 획득, 상태 효과, UI 피드백 등의 카테고리가 있습니다. 라이브 갤러리에서 효과를 미리 보고, 사용자 지정 팔레트로 색상을 바꾸거나 좌우 반전 및 회전할 수 있습니다.

효과는 두 가지 방식으로 사용할 수 있습니다. canvas, Phaser, PixiJS 등을 기반으로 한 브라우저 게임에서는 의존성 없이 코드를 직접 가져와 사용합니다. Godot, Unity, GameMaker, Defold, LÖVE, Bevy 같은 다른 엔진에서는 프레임 타이밍, 루프 설정, 피벗 정보가 포함된 Aseprite 스타일의 JSON 메타데이터와 투명 PNG 스프라이트 시트를 내보낼 수 있습니다.

저장소에는 효과 검색, 사용, 내보내기, 제작을 돕는 Claude Code 스킬과 콘택트 시트, GIF, MP4 렌더링 및 일반적인 품질 문제 확인 도구도 포함되어 있습니다. 효과는 결정론적으로 동작합니다. 난수는 효과별 시드에서 생성하며, 시뮬레이션 효과는 고정된 120 Hz로 진행됩니다.

핵심 기능

  • 01불, 얼음, 날씨, UI 등을 포함한 20개 카테고리에서 효과 232개를 제공합니다.
  • 02의존성 없이 브라우저 게임에서 바로 실행할 수 있습니다.
  • 03다른 엔진에서 사용할 수 있도록 Aseprite 스타일의 JSON이 포함된 투명 스프라이트 시트를 내보냅니다.
  • 04코드를 수정하지 않고 사용자 지정 색상 팔레트를 적용해 효과의 색을 바꿀 수 있습니다.
  • 05효과를 검색하고 내보내고 제작할 수 있는 Claude Code 스킬을 제공합니다.
  • 06시드 기반 난수로 결정론적인 프레임을 생성합니다.

활용 사례

  • 2D 브라우저 게임에 피격, 주문 또는 아이템 획득 효과를 추가합니다.
  • 폭발이나 불 애니메이션을 스프라이트 시트로 내보내 Godot 또는 Unity에서 사용합니다.
  • Claude Code에서 AI 어시스턴트의 도움을 받아 새 픽셀 아트 효과를 프로토타이핑합니다.
  • 다른 캐릭터나 테마에 맞춰 기존 효과의 색을 바꿉니다. 예를 들어 불을 파란 불꽃으로 바꿀 수 있습니다.

빠른 시작

  1. 1

    GitHub에서 프로젝트에 설치하기

    npm i github:patch-gg/pixelfx
  2. 2

    효과의 스프라이트 시트 렌더링하기

    node tools/render.mjs ice/frost-nova --sheet

사용 전 알아둘 점

  • JavaScript 캔버스와 브라우저 게임용입니다. 다른 엔진에서는 내보낸 스프라이트 시트가 필요합니다.
  • gallery/fonts에 있는 Patch Pixel 폰트는 MIT 라이선스가 적용되지 않습니다.

포함된 컬렉션

Claude Code 도구·스킬·플러그인AI 에이전트 스킬 라이브러리

토픽

#pixel-art#game-dev#animation#sprite-sheet#canvas#vfx#javascript#claude-code#agent-skills#claude-code-plugin

자주 묻는 질문

pixelfx은(는) 무엇인가요?
232개의 픽셀 아트 효과(불, 폭발, 마법, 날씨, UI 등)를 작은 JavaScript 모듈로 제공하는 라이브러리로, 새 효과 제작을 돕는 Claude Code 스킬도 포함합니다. pixelfx는 각각 작은 JavaScript 코드로 작성된 픽셀 아트 효과와 애니메이션 232개를 모아 둔 프로젝트입니다. 불, 폭발, 물, 얼음, 번개, 마법, 날씨, 근접 공격, 아이템 획득, 상태 효과, UI 피드백 등의 카테고리가 있습니다. 라이브 갤러리에서 효과를 미리 보고, 사용자 지정 팔레트로 색상을 바꾸거나 좌우 반전 및 회전할 수 있습니다.
pixelfx은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
pixelfx은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
pixelfx은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. pixelfx의 마지막 커밋은 2026년 10월 31일입니다.
pixelfx은(는) 어디에 사용할 수 있나요?
2D 브라우저 게임에 피격, 주문 또는 아이템 획득 효과를 추가합니다. 폭발이나 불 애니메이션을 스프라이트 시트로 내보내 Godot 또는 Unity에서 사용합니다. Claude Code에서 AI 어시스턴트의 도움을 받아 새 픽셀 아트 효과를 프로토타이핑합니다. 다른 캐릭터나 테마에 맞춰 기존 효과의 색을 바꿉니다. 예를 들어 불을 파란 불꽃으로 바꿀 수 있습니다.
pixelfx는 어떻게 설치하나요?
GitHub에서 프로젝트에 설치하기: npm i github:patch-gg/pixelfx 효과의 스프라이트 시트 렌더링하기: node tools/render.mjs ice/frost-nova --sheet
pixelfx은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/patch-gg/pixelfx

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트