본문으로 건너뛰기
OpenGame

제작자 리소스 / 픽셀 아트

PixelFX 생성기: 게임용 픽셀 아트 효과

Patch의 PixelFX는 불꽃, 마법, 아이템 획득 등을 코드로 그리는 애니메이션 라이브러리입니다. 확인한 버전의 공식 목록에는 효과 244개가 있습니다. 수정 가능한 JavaScript라 AI가 코드를 바꾸고 렌더링한 뒤 개선하기 좋습니다. PixelFX는 시각적 피드백을 제공하며 게임 규칙은 프로젝트에서 관리합니다.

스프라이트 시트 생성 ↓전체 효과 보기 ↗공식 소스 ZIP 다운로드 ↓

출처 확인: 2026년 11월 5일 · 리비전 a841596

JavaScriptCanvasPNG + JSONMIT
PIXELFX / LIVE CANVAS

실제 PixelFX 효과 세 가지 체험

원본 코드를 브라우저 안에서 실행합니다. 색상과 속도를 조절하고 재생을 누르세요. 단발 효과는 완료되면 멈춥니다. 캐릭터 동작 연출은 포함하지 않습니다.

원본 픽셀 크기와 20 FPS로 선택한 색상과 속도를 반영합니다. 두 파일을 함께 받으세요. JSON에는 시간, 기준점, MIT 고지가 포함되며 캐릭터 동작은 없습니다.

PixelFX 효과 생성기: 재사용할 스프라이트 시트 만들기

세 효과 중 하나를 고르고 색상과 속도를 정하면 브라우저에서 투명 시트와 메타데이터를 생성합니다. 계정이나 크레딧이 필요 없습니다. 기존 코드를 렌더링하는 도구이므로 새 효과는 소스를 수정하고, 완성된 게임은 Studio에서 만드세요.

스프라이트 시트 생성 ↑Studio에서 게임 기획 →

게임에서의 역할로 PixelFX 선택하기

플레이어에게 전달할 이벤트부터 정하세요. 화려한 효과가 적이나 보상을 가릴 수 있습니다. 다음 세 용도를 실제 배경과 캐릭터 크기에 맞춰 비교하세요.

fire/campfire

분위기: 모닥불과 환경 반복

모닥불은 야영지, 체크포인트, 안전 구역에 적합합니다. 중요한 타격 효과보다 밝기를 낮추고 비활성 장면에서는 갱신을 중지하세요. 다른 날씨와 환경 효과는 공식 목록에서 확인할 수 있습니다.

ice/frost-nova

전투: 서리 폭발과 스킬

스킬 발동, 피해 적용, 회복 종료 시점을 먼저 정하세요. 보이는 얼음 고리가 충돌 범위, 피해, 재사용 시간을 구현하지는 않습니다. 게임 로직에서 애니메이션과 맞춰야 합니다.

pickups/collect-burst

보상: 획득 섬광

아이템 획득이 확인된 뒤 해당 위치에 collect burst를 재생하세요. 점수는 한 번만 주고 끝난 효과는 제거합니다. 동시 획득 섬광이 플레이어를 가리면 동시 효과 수나 밝기를 줄이세요.

네 단계로 PixelFX를 게임에 적용하기

  1. 작은 반복 구조를 정하세요. 방에서 이동하고 수정 다섯 개를 모아 승리 후 다시 시작하는 식입니다. 키보드나 터치 조작을 먼저 정합니다.

  2. 효과를 실제 이벤트에 연결하세요. 모닥불은 환경, 섬광은 획득, 서리 폭발은 스킬입니다. 분위기, 성공, 위험 신호를 구분합니다.

  3. Studio에서 기획하거나 자신의 프로젝트에 예제를 적용하세요. 소스나 내보낸 파일을 제공해야 합니다. 링크만으로 도우미가 라이브러리를 가져왔다고 볼 수 없습니다.

  4. 한 판 전체, 반복 획득, 재시작을 확인하세요. 밝고 어두운 배경의 투명 가장자리, 기준점, 휴대폰 가독성을 확인하고 수정 전에 작동하는 버전을 보존하세요.

01 / JAVASCRIPT

브라우저 게임에 PixelFX 사용하기

Vite 같은 ESM 번들러를 쓰는 JavaScript 프로젝트에 설치하세요. 예제는 Canvas를 만들며 클릭하거나 터치하면 효과가 재생됩니다. 기존 게임에서는 투명 레이어에 그리고 실제 게임 이벤트로 실행하세요. 피해, 충돌, 점수는 게임 로직에 유지합니다.

npm
npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24e
JavaScript / Canvas
JavaScript
import { createFrame, clearFrame, createFx, composite } from 'pixelfx';
import * as burst from 'pixelfx/fx/pickups/collect-burst';

const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 180;
canvas.style.cssText = 'width:640px;max-width:100%;image-rendering:pixelated;background:#111';
document.body.append(canvas);
const ctx = canvas.getContext('2d');
const frame = createFrame(320, 180);
const pixels = ctx.createImageData(320, 180);
let fx;
canvas.addEventListener('pointerdown', () => {
  fx = createFx(burst, { x: 160, y: 120, seed: 3 });
});
let previous;
function tick(now) {
  const dt = previous === undefined ? 0 : Math.min((now - previous) / 1000, 0.05);
  previous = now;
  clearFrame(frame);
  if (fx) {
    fx.update(dt);
    fx.draw(frame);
    if (fx.done()) fx = undefined;
  }
  composite(frame, pixels.data);
  ctx.putImageData(pixels, 0, 0);
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
02 / PNG + JSON

PixelFX 스프라이트 시트 내보내기

저장소를 복제하고 도구를 설치한 뒤 효과를 렌더링하세요. 투명 PNG 아틀라스와 프레임 시간 및 기준점을 담은 Aseprite 형식 JSON이 생성됩니다. 호환되는 임포터를 사용하세요. PNG만 가져오면 시간과 기준점이 적용되지 않습니다. 도구의 실행 조건은 공식 제작 가이드를 확인하세요.

Terminal
git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheet
03 / AI

AI로 PixelFX 수정하기

공식 저장소에는 Claude Code 플러그인이 있습니다. Claude Code 안에서 아래 두 명령을 실행하세요. 다른 도우미에는 선택한 소스와 아래 요청을 전달하세요. 이 페이지는 Studio에 플러그인을 설치하거나 GitHub 자동 가져오기를 보장하지 않습니다.

Claude Code
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx
AI로 PixelFX 수정하기

기존 브라우저 게임에 PixelFX collect-burst 효과를 추가해 주세요. 조작, 점수, 충돌 규칙은 유지하세요. 아이템 획득 시 한 번만 실행하고 고정 시드와 파란 팔레트를 사용하세요. 투명 레이어에 그리고 완료되면 제거하며 재시작 시 효과를 비우세요. MIT 고지를 유지하세요. 변경 파일과 반복 재생, 동시 획득, 모바일 성능 확인법을 보여 주세요. 소스가 없으면 API를 지어내지 말고 파일을 요청하세요.

Studio에서 게임 기획 →

게임 안에서 효과 확인하기

배경에 맞춰 색상을, 타격 시점에 맞춰 속도를 조정하세요. 고정 시드로 비교하고 동시 효과, 재시작 정리, 작은 화면의 가독성을 확인하세요. 동작 줄이기 설정도 고려하세요. 보기 좋은 미리보기가 게임 적합성과 성능을 증명하지는 않습니다.

PixelFX 생성기 자주 묻는 질문

AI 픽셀 아트 생성기인가요?

기존의 절차적 효과 세 개를 렌더링합니다. 이미지 모델을 호출하거나 텍스트로 새 애니메이션을 만들지는 않습니다. PixelFX에는 별도의 Claude Code skill이 있고, Studio는 사이트의 AI 게임 생성기입니다.

PNG와 JSON은 어떻게 쓰나요?

같은 폴더에 저장하세요. PNG는 프레임 격자이며 JSON은 영역, 시간, 기준점을 정의합니다. 호환 임포터나 직접 만든 코드로 읽으세요. 텍스처 보간을 끄고 기준점 위치를 확인하세요.

빛이나 어두운 테두리가 달라지는 이유는 무엇인가요?

PixelFX는 색상과 가산 광원을 합성합니다. 투명 PNG는 결과를 RGBA로 굳혀 저장하므로 장면의 실시간 가산 렌더링과 달라질 수 있습니다. 실제 배경에서 비교한 뒤 혼합 방식을 선택하세요. 캐릭터 포즈는 포함하지 않습니다.

완전한 게임도 만들 수 있나요?

이 도구는 시각 자료를 내보냅니다. 게임은 Studio에서 목표와 조작을 설명하고 기획안을 확인하세요. 로그인 후 기획은 무료이며 생성과 수정에는 Studio Credits가 필요합니다. PixelFX 자동 설치나 모든 엔진에서의 검증을 보장하지 않습니다.

PixelFX 라이선스와 출처 표기

코드와 효과는 MIT 라이선스입니다. 재배포 시 저작권과 허가 고지 및 해당하는 Hugo Duprez와 Hollow Crown 고지를 유지하세요. gallery/fonts의 Patch Pixel 글꼴은 제외되며 여기서 사용하지 않습니다. PixelFX는 Patch가 관리하고 이 페이지는 독립적인 적용 안내입니다.

공식 출처

OpenGame / 출처 확인: 2026년 11월 5일 · 리비전 a841596