2D 파티클 이펙트 라이브 에디터 (2D Particle Studio)는 웹 브라우저 환경에서 게임 제작에 필요한 화염, 폭발, 마법 가루, 연기, 비, 눈, 포탈 소용돌이, 검기 슬래시, 독성 버블, 운석 낙하 등 20종의 풍부한 파티클 템플릿 프리셋을 제공하며, 이를 실시간으로 조작하여 게임 엔진에 즉시 주입 가능한 스프라이트 시트(Sprite Sheet PNG) 및 프로젝트 JSON 파일로 내보낼 수 있는 2D 게임 개발 도구입니다.

모든 시뮬레이션과 렌더링은 클라이언트 측 HTML5 Canvas 하드웨어 가속 기반으로 처리되어 외부 서버 업로드 없이 빠른 성능과 안전한 개발 환경을 선사합니다. 차분하고 눈이 편안한 세이지 그린 & 크림 라이트 UI 테마로 데스크톱과 모바일 디바이스 어디서나 유연하게 작업하실 수 있습니다.

🌟 핵심 주요 기능

🎨 20종의 테마별 파티클 템플릿 프리셋 (4개 범주):
- 🌿 원소 & 자연: 🔥 화염 (Fire), 🐉 드래곤 브레스 (Dragon Breath), 💨 연기 (Smoke), 🌧️ 빗줄기 (Rain), ❄️ 눈송이 (Snowfall), 🌸 벚꽃 잎 (Cherry Blossoms), 🧪 독성 버블 (Toxic Bubbles), 🫧 수중 물방울 (Underwater Bubbles)
- 🔮 마법 & 아케인: ✨ 마법 가루 (Magic Dust), 🔮 포탈 소용돌이 (Vortex), ⚡ 전기 아우라 (Electric), 💖 치유의 아우라 (Healing Hearts), 🛡️ 신성한 방패 (Holy Shield), 🌌 코스믹 은하 (Cosmic Galaxy)
- ⚔️ 전투 & 액션: 💥 폭발 (Explosion), 🗡️ 검기 슬래시 (Slash Wave), ☄️ 운석 낙하 (Meteor Trail), 🩸 피스플래시 (Blood Splatter), 💥 충격파 링 (Shockwave Pulse)
- 👾 레트로 & 축제: 👾 픽셀 분진 (Retro Pixel Dust), 🎆 불꽃놀이 (Fireworks)
🎛️ 정밀하고 유연한 파티클 매개변수 제어:
- 방사체(Emitter) 설정: 초당 방사 입자 수(Rate), 최대 입자 수, 최소/최대 수명, 방사체 모양(점, 원형, 직사각형, 선분), 영역 크기 설정.
- 속도 & 물리(Motion & Physics): 방사 각도, 퍼짐 각도, 최소/최대 초기 속도, X/Y 중력, 방사 가속도(Radial), 접선 가속도(Tangential), 난류(Turbulence) 조작.
- Visual & Color: 시작/종료 크기, 회전 속도 및 무작위 변위, 시작/종료 RGB Color Picker, 알파 투명도 제어.
- 렌더링 모드: 10가지 입자 모양 (원형, 사각형, 별형, 반짝이, 도넛 링, 구름, 벚꽃잎, 하트, 다이아몬드, 물방울) 및 4가지 Blend Mode (lighter 발광, source-over 기본, screen, multiply), 발광 블러(Glow Blur) 효과 지원.
🖼️ 스프라이트 시트 (Sprite Sheet PNG) 내보내기:
- 4x4 (16프레임), 6x6 (36프레임), 8x8 (64프레임) 등의 다양한 프레임 격자 배치 지원.
- 프레임 당 32px, 64px, 128px, 256px 해상도 및 캡처 FPS 지정.
- 알파 투명도(Alpha Channel)가 완벽 보존된 PNG 다운로드 기능 제공 (Unity, Godot, Unreal, Phaser, PixiJS 등 주요 게임 엔진 완벽 호환).
💾 프로젝트 파일 저장 & 불러오기 (JSON):
- 현재 구성된 파티클 수치와 색상 옵션을 JSON 세이브 파일로 로컬 저장.
- 기존 세이브 파일을 드래그 앤 드롭하거나 파일 선택으로 불러와 연속 작업 가능.
📱 모바일 & 데스크톱 반응형 뷰포트:
- 캔버스 뷰포트 내 마우스/터치 드래그로 방사체 위치를 자유롭게 이동.
- 터치 디바이스 호환성 및 다크/크림/세이지/체커보드 투명 배경 가이드 뷰 전환.

🛠️ 사용 방법 (How to Use)

프리셋 선택 또는 신규 제작:
- 상단 헤더의 ‘프리셋 (20종)’ 드롭다운에서 원하는 카테고리의 이펙트(예: 검기 슬래시, 드래곤 브레스, 치유의 아우라 등)를 선택하여 시작해봅니다.
파티클 파라미터 조작:
- 우측(모바일은 하단) 인스펙터 패널의 탭 메뉴를 통해 파티클 수치(속도, 중력, 크기, 색상, 입자 모양 등)를 슬라이더로 실시간 조정합니다.
캔버스 상호작용 및 테스트:
- 캔버스 위를 마우스로 드래그하거나 터치하여 방사체의 위치를 이동시켜 봅니다.
- 상단 툴바의 ‘버스트 발사’ 버튼이나 캔버스 클릭을 통해 순간 폭발 파티클을 테스트합니다.
스프라이트 시트 출력:
- 상단 헤더의 ‘시트 Export’ 버튼을 클릭합니다.
- 팝업 모달에서 원하는 프레임 격자(예: 6x6)와 프레임 해상도를 지정한 후 ‘PNG 파일로 내보내기’를 누르면 알파 투명 배경의 스프라이트 시트를 저장할 수 있습니다.
프로젝트 저장:
- 언제든 ‘저장’ 버튼을 통해 설정값을 JSON 파일로 내보내거나 ‘불러오기’로 작업 내용을 복구할 수 있습니다.

💬 자주 묻는 질문 (FAQ)

Q1. 생성된 스프라이트 시트는 어떤 게임 엔진에서 사용할 수 있나요?
- A. 내보내진 PNG 파일은 표준 32비트 RGBA 투명 배경 스프라이트 시트입니다. Unity, Godot Engine, Unreal Engine, Cocos2d, Phaser.js, Pixi.js, GameMaker 등 스프라이트 시트 애니메이션을 지원하는 모든 2D/3D 게임 엔진에서 즉시 활용할 수 있습니다.
Q2. 발광 효과(Glow Blur)는 스프라이트 시트에도 정상 적용되나요?
- A. 네! Canvas 2D 하드웨어 블렌딩 모드(lighter)와 shadowBlur 설정이 각 프레임에 픽셀 단위로 정확히 렌더링되어 투명 PNG 파일에 그대로 반영됩니다.
Q3. 모바일 기기에서도 원활하게 동작하나요?
- A. 본 에디터는 모바일 웹 브라우저 환경을 고려하여 반응형 터치 이벤트 제어 및 가벼운 렌더링 루프로 구현되었습니다. 스마트폰이나 태블릿에서도 자유롭게 파티클을 튜닝하고 내보낼 수 있습니다.