51 lines
2.7 KiB
Markdown
51 lines
2.7 KiB
Markdown
# 40. UI Update Summary (Risky Attack Visual Effects)
|
|
|
|
39번 (Luck System) 이후 작업된 UI 및 시각 효과 관련 변경 사항 정리입니다.
|
|
|
|
## 1. Attack Animation & Visual Effects
|
|
|
|
공격 유형(Risk Level)에 따라 차별화된 애니메이션과 시각 효과를 구현했습니다.
|
|
|
|
### BattleAnimationWidget (`lib/widgets/battle/battle_animation_widget.dart`)
|
|
|
|
`animateAttack` 메서드가 `RiskLevel`을 인자로 받아 각기 다른 동작을 수행합니다.
|
|
|
|
- **Safe Attack**:
|
|
- **동작**: 제자리에서 좌우로 살짝 흔들리는(Wobble) 애니메이션.
|
|
- **느낌**: 신중함, 머뭇거림.
|
|
- **구현**: `Curves.elasticIn`을 사용한 짧은 X축 이동 (200ms).
|
|
- **Normal Attack**:
|
|
- **동작**: 적에게 다가가서 가볍게 부딪히는(Dash) 애니메이션.
|
|
- **느낌**: 일반적인 타격.
|
|
- **구현**: 확대(Scale Up) 없이 `Curves.easeOutQuad`로 이동 후 복귀 (400ms).
|
|
- **Risky Attack**:
|
|
- **동작**: 몸을 크게 부풀린 후(Scale Up) 강하게 돌진(Heavy Dash).
|
|
- **느낌**: 강력한 한 방, 높은 리스크.
|
|
- **구현**: 1.2배 확대(600ms) -> `Curves.easeInExpo` 가속 돌진(500ms) -> 타격 -> 복귀.
|
|
|
|
### ExplosionWidget (`lib/widgets/battle/explosion_widget.dart`) [NEW]
|
|
|
|
- **기능**: 타격 지점에서 파편(Particle)이 사방으로 튀는 효과.
|
|
- **구현**: `CustomPainter`를 사용하여 다수의 파티클을 효율적으로 렌더링.
|
|
- **트리거**: **Risky Attack** 적중 시에만 발동.
|
|
|
|
### ShakeWidget (`lib/widgets/battle/shake_widget.dart`)
|
|
|
|
- **기능**: 화면(또는 위젯)을 흔드는 효과.
|
|
- **적용**: **Risky Attack** 타격 시에만 발동.
|
|
|
|
## 2. BattleScreen Integration (`lib/screens/battle_screen.dart`)
|
|
|
|
- `BattleAnimationWidget`, `ExplosionWidget`, `ShakeWidget`을 조합하여 전투 연출 구성.
|
|
- `_addFloatingEffect`에서 공격 이벤트 수신 시 `RiskLevel`에 따라 적절한 애니메이션 메서드 호출.
|
|
- **Risky Attack**의 경우: `Scale Up` -> `Dash` -> `Impact` (Shake + Explosion) -> `Return`의 시퀀스로 동작.
|
|
- **Timing Sync**: 데미지 텍스트 표시 타이밍을 애니메이션 타격 시점(Safe: 200ms, Normal: 400ms, Risky: 1100ms)에 맞게 조정.
|
|
- **Icon-Only Animation**: 공격 시 전체 카드가 아닌 **캐릭터 아이콘만** 적에게 날아가도록 변경.
|
|
- **Hide Stats**: 공격 애니메이션 진행 중에는 HP, Armor 등 스탯 정보를 숨겨 시각적 혼란 방지.
|
|
|
|
## 3. 기타 UI 개선
|
|
|
|
- **Floating Effects**: 데미지 텍스트 및 이펙트 아이콘 위치 조정.
|
|
- **Risk Level Selection**: 다이얼로그 UI 개선.
|
|
- **CharacterStatusCard**: 애니메이션 키(`animationKey`)와 스탯 숨김(`hideStats`) 속성 추가.
|