julian/asciinevrdie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): HP/MP 바 개선 및 전투 시스템 UI 업데이트

Browse Source 
- HP/MP 변화 시 플래시 효과 및 변화량 표시 추가
- 전투 중 몬스터 HP 바 표시 기능 추가
- 몬스터 HP 바 Row 오버플로우 버그 수정 (Flexible 적용)
- 전투 상태 및 이벤트 모델 개선
- 캐릭터 애니메이션 및 전투 컴포저 업데이트
This commit is contained in:
JiWoong Sul
2025-12-18 18:10:22 +09:00
parent 45147da5ec
commit cf8fdaecde
14 changed files with 1220 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
lib/src/features/game/widgets/hp_mp_bar.dart
View File

@@ -1,8 +1,10 @@
import 'package:flutter/material.dart';
/// HP/MP 바 위젯 (Phase 8: 사망 위험 시 깜빡임)
/// HP/MP 바 위젯 (Phase 8: 변화 시 시각 효과)
///
/// HP가 20% 미만일 때 빨간색 깜빡임 효과 표시
/// - HP가 20% 미만일 때 빨간색 깜빡임
/// - HP/MP 변화 시 색상 플래시 + 변화량 표시
/// - 전투 중 몬스터 HP 바 표시
class HpMpBar extends StatefulWidget {
const HpMpBar({
super.key,
@@ -10,6 +12,9 @@ class HpMpBar extends StatefulWidget {
required this.hpMax,
required this.mpCurrent,
required this.mpMax,
this.monsterHpCurrent,
this.monsterHpMax,
this.monsterName,
});
final int hpCurrent;
@@ -17,40 +22,111 @@ class HpMpBar extends StatefulWidget {
final int mpCurrent;
final int mpMax;
/// 전투 중 몬스터 HP (null이면 비전투)
final int? monsterHpCurrent;
final int? monsterHpMax;
final String? monsterName;
@override
State<HpMpBar> createState() => _HpMpBarState();
}
class _HpMpBarState extends State<HpMpBar> with SingleTickerProviderStateMixin {
class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
late AnimationController _blinkController;
late Animation<double> _blinkAnimation;
// HP/MP 변화 애니메이션
late AnimationController _hpFlashController;
late AnimationController _mpFlashController;
late Animation<double> _hpFlashAnimation;
late Animation<double> _mpFlashAnimation;
// 변화량 표시용
int _hpChange = 0;
int _mpChange = 0;
bool _hpDamage = false;
bool _mpDamage = false;
// 몬스터 HP 변화 애니메이션
late AnimationController _monsterFlashController;
late Animation<double> _monsterFlashAnimation;
int _monsterHpChange = 0;
@override
void initState() {
super.initState();
// 위험 깜빡임
_blinkController = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
_blinkAnimation = Tween<double>(begin: 1.0, end: 0.3).animate(
CurvedAnimation(parent: _blinkController, curve: Curves.easeInOut),
);
// HP 플래시
_hpFlashController = AnimationController(
duration: const Duration(milliseconds: 400),
vsync: this,
);
_hpFlashAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _hpFlashController, curve: Curves.easeOut),
);
// MP 플래시
_mpFlashController = AnimationController(
duration: const Duration(milliseconds: 400),
vsync: this,
);
_mpFlashAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _mpFlashController, curve: Curves.easeOut),
);
// 몬스터 HP 플래시
_monsterFlashController = AnimationController(
duration: const Duration(milliseconds: 400),
vsync: this,
);
_monsterFlashAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _monsterFlashController, curve: Curves.easeOut),
);
_updateBlinkState();
}
@override
void didUpdateWidget(HpMpBar oldWidget) {
super.didUpdateWidget(oldWidget);
// HP 변화 감지
if (oldWidget.hpCurrent != widget.hpCurrent) {
_hpChange = widget.hpCurrent - oldWidget.hpCurrent;
_hpDamage = _hpChange < 0;
_hpFlashController.forward(from: 0.0);
}
// MP 변화 감지
if (oldWidget.mpCurrent != widget.mpCurrent) {
_mpChange = widget.mpCurrent - oldWidget.mpCurrent;
_mpDamage = _mpChange < 0;
_mpFlashController.forward(from: 0.0);
}
// 몬스터 HP 변화 감지
if (oldWidget.monsterHpCurrent != widget.monsterHpCurrent &&
widget.monsterHpCurrent != null &&
oldWidget.monsterHpCurrent != null) {
_monsterHpChange = widget.monsterHpCurrent! - oldWidget.monsterHpCurrent!;
_monsterFlashController.forward(from: 0.0);
}
_updateBlinkState();
}
void _updateBlinkState() {
final hpRatio = widget.hpMax > 0 ? widget.hpCurrent / widget.hpMax : 1.0;
// HP < 20% 시 깜박임 시작
if (hpRatio < 0.2 && hpRatio > 0) {
if (!_blinkController.isAnimating) {
_blinkController.repeat(reverse: true);
@@ -64,6 +140,9 @@ class _HpMpBarState extends State<HpMpBar> with SingleTickerProviderStateMixin {
@override
void dispose() {
_blinkController.dispose();
_hpFlashController.dispose();
_mpFlashController.dispose();
_monsterFlashController.dispose();
super.dispose();
}
@@ -72,44 +151,126 @@ class _HpMpBarState extends State<HpMpBar> with SingleTickerProviderStateMixin {
final hpRatio = widget.hpMax > 0 ? widget.hpCurrent / widget.hpMax : 0.0;
final mpRatio = widget.mpMax > 0 ? widget.mpCurrent / widget.mpMax : 0.0;
final hasMonster = widget.monsterHpCurrent != null &&
widget.monsterHpMax != null &&
widget.monsterHpMax! > 0;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// HP 바
_buildBar(
// HP 바 (플래시 효과 포함)
_buildAnimatedBar(
label: 'HP',
current: widget.hpCurrent,
max: widget.hpMax,
ratio: hpRatio,
color: Colors.red,
isLow: hpRatio < 0.2 && hpRatio > 0,
flashController: _hpFlashAnimation,
change: _hpChange,
isDamage: _hpDamage,
),
const SizedBox(height: 4),
// MP 바
_buildBar(
// MP 바 (플래시 효과 포함)
_buildAnimatedBar(
label: 'MP',
current: widget.mpCurrent,
max: widget.mpMax,
ratio: mpRatio,
color: Colors.blue,
isLow: false,
flashController: _mpFlashAnimation,
change: _mpChange,
isDamage: _mpDamage,
),
// 몬스터 HP 바 (전투 중일 때만)
if (hasMonster) ...[
const SizedBox(height: 8),
_buildMonsterBar(),
],
],
),
);
}
Widget _buildAnimatedBar({
required String label,
required int current,
required int max,
required double ratio,
required Color color,
required bool isLow,
required Animation<double> flashController,
required int change,
required bool isDamage,
}) {
return AnimatedBuilder(
animation: Listenable.merge([_blinkAnimation, flashController]),
builder: (context, child) {
// 플래시 색상 (데미지=빨강, 회복=녹색)
final flashColor = isDamage
? Colors.red.withValues(alpha: flashController.value * 0.4)
: Colors.green.withValues(alpha: flashController.value * 0.4);
// 위험 깜빡임 배경
final lowBgColor = isLow
? Colors.red.withValues(alpha: (1 - _blinkAnimation.value) * 0.3)
: Colors.transparent;
return Container(
decoration: BoxDecoration(
color: flashController.value > 0.1 ? flashColor : lowBgColor,
borderRadius: BorderRadius.circular(4),
),
child: Stack(
children: [
_buildBar(label: label, current: current, max: max, ratio: ratio, color: color),
// 플로팅 변화량 텍스트 (위로 떠오르며 사라짐)
if (change != 0 && flashController.value > 0.05)
Positioned(
right: 70,
top: 0,
bottom: 0,
child: Transform.translate(
// 위로 떠오르는 애니메이션 (최대 15픽셀 위로)
offset: Offset(0, -15 * (1 - flashController.value)),
child: Opacity(
opacity: flashController.value,
child: Text(
change > 0 ? '+$change' : '$change',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: isDamage ? Colors.red : Colors.green,
shadows: const [
Shadow(color: Colors.black, blurRadius: 3),
Shadow(color: Colors.black, blurRadius: 6),
],
),
),
),
),
),
],
),
);
},
);
}
Widget _buildBar({
required String label,
required int current,
required int max,
required double ratio,
required Color color,
required bool isLow,
}) {
final bar = Row(
return Row(
children: [
SizedBox(
width: 24,
@@ -140,24 +301,115 @@ class _HpMpBarState extends State<HpMpBar> with SingleTickerProviderStateMixin {
),
],
);
}
// HP < 20% 시 깜박임 효과 적용
if (isLow) {
return AnimatedBuilder(
animation: _blinkAnimation,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
color: Colors.red.withValues(alpha: (1 - _blinkAnimation.value) * 0.3),
borderRadius: BorderRadius.circular(4),
),
child: child,
);
},
child: bar,
);
}
/// 몬스터 HP 바
Widget _buildMonsterBar() {
final current = widget.monsterHpCurrent!;
final max = widget.monsterHpMax!;
final ratio = max > 0 ? current / max : 0.0;
final name = widget.monsterName ?? 'Enemy';
return bar;
return AnimatedBuilder(
animation: _monsterFlashAnimation,
builder: (context, child) {
// 데미지 플래시 (몬스터는 항상 데미지를 받음)
final flashColor = Colors.yellow.withValues(
alpha: _monsterFlashAnimation.value * 0.3,
);
return Container(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
decoration: BoxDecoration(
color: _monsterFlashAnimation.value > 0.1
? flashColor
: Colors.orange.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
border: Border.all(color: Colors.orange.withValues(alpha: 0.3)),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Row(
children: [
// 몬스터 아이콘
const Icon(Icons.pest_control, size: 14, color: Colors.orange),
const SizedBox(width: 4),
// 이름 (Flexible로 공간 부족 시 축소)
Flexible(
flex: 0,
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 50),
child: Text(
name.length > 8 ? '${name.substring(0, 6)}...' : name,
style: const TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
color: Colors.orange,
),
overflow: TextOverflow.ellipsis,
),
),
),
const SizedBox(width: 4),
// HP 바
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.circular(2),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: Colors.orange.withValues(alpha: 0.2),
valueColor:
const AlwaysStoppedAnimation<Color>(Colors.orange),
minHeight: 8,
),
),
),
const SizedBox(width: 4),
// HP 숫자
Text(
'$current/$max',
style: const TextStyle(fontSize: 8, color: Colors.orange),
textAlign: TextAlign.right,
),
],
),
// 플로팅 데미지 텍스트
if (_monsterHpChange != 0 && _monsterFlashAnimation.value > 0.05)
Positioned(
right: 60,
top: -5,
child: Transform.translate(
offset: Offset(0, -12 * (1 - _monsterFlashAnimation.value)),
child: Opacity(
opacity: _monsterFlashAnimation.value,
child: Text(
_monsterHpChange > 0
? '+$_monsterHpChange'
: '$_monsterHpChange',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
color: _monsterHpChange < 0
? Colors.yellow
: Colors.green,
shadows: const [
Shadow(color: Colors.black, blurRadius: 3),
Shadow(color: Colors.black, blurRadius: 6),
],
),
),
),
),
),
],
),
);
},
);
}
}