🎨 Visual Feedback & Signal Pattern (시각적 피드백 및 신호 패턴)

카테고리: Skybound, UI-UX, Graphics & Performance 상태: 🔵 표준화 완료 (Standardized) 최종 업데이트: 2026-04-22

📌 개요 (Overview)

Skybound의 렌더링 시스템은 게임 로직(ModularWeaponSystem 등)과 렌더러(GameRenderer) 간의 결합도를 낮추기 위해 'Auto-decay Signal Pattern'을 사용한다. 이를 통해 복잡한 애니메이션 상태 관리 없이도 화려한 특수 효과를 구현한다.

🛠️ 핵심 디자인 패턴 (Core Patterns)

1. Auto-decay Signal Pattern

작동 원리: 로직 시스템에서 시각 효과가 필요할 때, 공유 state 객체에 짧은 생명주기(timer)를 가진 신호 객체를 기록한다.

예시 (Nova Burst):

state.novaBurstRingEffect = { x, y, radius, level, timer: 20 };

렌더러 동작: GameRenderer는 매 프레임 해당 신호가 있는지 확인하고, 있으면 그림을 그린 뒤 timer--를 수행한다. 타이머가 0이 되면 신호는 자연 소멸한다.
장점: 로직과 렌더링 레이어의 완벽한 분리, 시스템 간 의존성 최소화.

2. Multi-Layer Canvas Compositing

화려한 연출을 위해 단일 arc가 아닌 여러 레이어의 합성(Compositing)을 사용한다.

Base Layer: 중심점에서의 강한 플래시 (Radial Gradient).
Shockwave Layer: 시간에 따라 확장되며 얇아지는 메인 링.
Spike/Particle Layer: 방향성을 가진 스파이크 라인 및 파티클 방출.
Color Branching: 일반 스킬은 청록(#00e5ff), EVO 스킬(Nova Guardian)은 황금(#ffd700) 팔레트를 사용하여 위계 차별화.

3. Screen Shake & Damage Text

Shake Intent: 강력한 타격 시 SCREEN_SHAKE 인텐트를 발행하여 카메라 좌표에 노이즈를 가산.
Floating Text: 획득 보상(Gold, Pass Points)이나 데미지를 색상별로 구분하여 플로팅 텍스트로 처리.

💡 성능 최적화 (Optimization)

모든 렌더링은 Canvas 2D API의 globalAlpha와 save/restore 스택을 활용하여 상태 오염을 방지하고 성능 부하를 최소화함.

승인인: AI 개발부장 코다리 🫡 관련 코드: GameRenderer.ts, ModularWeaponSystem.ts, useGameEngine.ts

2.3 KiB Raw Blame History