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

style(ui): HP/MP 바 숫자 오버레이 표시

Browse Source 
- 웹: hp_mp_bar.dart 숫자를 바 중앙에 오버레이
- 모바일: enhanced_animation_panel.dart 동일 적용
- 텍스트 그림자 추가로 가독성 향상
This commit is contained in:
JiWoong Sul
2026-01-15 23:23:02 +09:00
parent c41d15405f
commit 9599a33a8f
2 changed files with 126 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
lib/src/features/game/widgets/enhanced_animation_panel.dart
View File

@@ -285,7 +285,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
);
}
/// 컴팩트 HP 바
/// 컴팩트 HP 바 (숫자 오버레이)
Widget _buildCompactHpBar() {
final ratio = _currentHpMax > 0 ? _currentHp / _currentHpMax : 0.0;
final isLow = ratio < 0.2 && ratio > 0;
@@ -320,29 +320,42 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
),
),
),
// 프로그레스
// 프로그레스 바 + 숫자 오버레이
Expanded(
child: ClipRRect(
borderRadius: const BorderRadius.horizontal(
right: Radius.circular(3),
),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: Colors.red.withValues(alpha: 0.2),
valueColor: AlwaysStoppedAnimation(
isLow ? Colors.red : Colors.red.shade600,
child: Stack(
alignment: Alignment.center,
children: [
// 프로그레스 바
ClipRRect(
borderRadius: const BorderRadius.horizontal(
right: Radius.circular(3),
),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: Colors.red.withValues(alpha: 0.2),
valueColor: AlwaysStoppedAnimation(
isLow ? Colors.red : Colors.red.shade600,
),
minHeight: 20,
),
),
minHeight: 20,
),
),
),
// 수치
Container(
width: 56,
alignment: Alignment.center,
child: Text(
'$_currentHp/$_currentHpMax',
style: const TextStyle(fontSize: 11, color: Colors.white),
// 숫자 오버레이 (바 중앙)
Text(
'$_currentHp/$_currentHpMax',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black.withValues(alpha: 0.9),
blurRadius: 2,
),
const Shadow(color: Colors.black, blurRadius: 4),
],
),
),
],
),
),
],
@@ -352,7 +365,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
// 플로팅 변화량
if (_hpChange != 0 && _hpFlashAnimation.value > 0.05)
Positioned(
right: 50,
right: 20,
top: -8,
child: Transform.translate(
offset: Offset(0, -10 * (1 - _hpFlashAnimation.value)),
@@ -378,7 +391,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
);
}
/// 컴팩트 MP 바
/// 컴팩트 MP 바 (숫자 오버레이)
Widget _buildCompactMpBar() {
final ratio = _currentMpMax > 0 ? _currentMp / _currentMpMax : 0.0;
@@ -408,27 +421,42 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
),
),
),
// 프로그레스 바 + 숫자 오버레이
Expanded(
child: ClipRRect(
borderRadius: const BorderRadius.horizontal(
right: Radius.circular(3),
),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: Colors.blue.withValues(alpha: 0.2),
valueColor: AlwaysStoppedAnimation(
Colors.blue.shade600,
child: Stack(
alignment: Alignment.center,
children: [
// 프로그레스 바
ClipRRect(
borderRadius: const BorderRadius.horizontal(
right: Radius.circular(3),
),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: Colors.blue.withValues(alpha: 0.2),
valueColor: AlwaysStoppedAnimation(
Colors.blue.shade600,
),
minHeight: 20,
),
),
minHeight: 20,
),
),
),
Container(
width: 56,
alignment: Alignment.center,
child: Text(
'$_currentMp/$_currentMpMax',
style: const TextStyle(fontSize: 11, color: Colors.white),
// 숫자 오버레이 (바 중앙)
Text(
'$_currentMp/$_currentMpMax',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black.withValues(alpha: 0.9),
blurRadius: 2,
),
const Shadow(color: Colors.black, blurRadius: 4),
],
),
),
],
),
),
],
@@ -437,7 +465,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
if (_mpChange != 0 && _mpFlashAnimation.value > 0.05)
Positioned(
right: 50,
right: 20,
top: -8,
child: Transform.translate(
offset: Offset(0, -10 * (1 - _mpFlashAnimation.value)),

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

@@ -288,7 +288,7 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
);
}
/// 레트로 스타일 세그먼트 바
/// 레트로 스타일 세그먼트 바 (숫자 바 위 오버레이)
Widget _buildRetroBar({
required String label,
required int current,
@@ -316,53 +316,62 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
),
),
),
// 세그먼트 바
// 세그먼트 바 (숫자 오버레이)
Expanded(
child: Container(
height: 12,
decoration: BoxDecoration(
color: emptyColor.withValues(alpha: 0.3),
border: Border.all(color: RetroColors.panelBorderOuter, width: 1),
),
child: Row(
children: List.generate(segmentCount, (index) {
final isFilled = index < filledSegments;
return Expanded(
child: Container(
decoration: BoxDecoration(
color: isFilled
? fillColor.withValues(alpha: blinkOpacity)
: emptyColor.withValues(alpha: 0.2),
border: Border(
right: index < segmentCount - 1
? BorderSide(
color: RetroColors.panelBorderOuter.withValues(
alpha: 0.3,
),
width: 1,
)
: BorderSide.none,
child: Stack(
alignment: Alignment.center,
children: [
// 세그먼트 바
Container(
height: 14,
decoration: BoxDecoration(
color: emptyColor.withValues(alpha: 0.3),
border:
Border.all(color: RetroColors.panelBorderOuter, width: 1),
),
child: Row(
children: List.generate(segmentCount, (index) {
final isFilled = index < filledSegments;
return Expanded(
child: Container(
decoration: BoxDecoration(
color: isFilled
? fillColor.withValues(alpha: blinkOpacity)
: emptyColor.withValues(alpha: 0.2),
border: Border(
right: index < segmentCount - 1
? BorderSide(
color:
RetroColors.panelBorderOuter.withValues(
alpha: 0.3,
),
width: 1,
)
: BorderSide.none,
),
),
),
);
}),
),
),
// 숫자 오버레이 (바 중앙)
Text(
'$current/$max',
style: TextStyle(
fontFamily: 'PressStart2P',
fontSize: 12,
color: RetroColors.textLight.withValues(alpha: blinkOpacity),
shadows: [
Shadow(
color: Colors.black.withValues(alpha: 0.9),
blurRadius: 2,
),
),
);
}),
),
),
),
const SizedBox(width: 6),
// 수치 표시
SizedBox(
width: 60,
child: Text(
'$current/$max',
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 13,
color: RetroColors.textLight,
),
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
const Shadow(color: Colors.black, blurRadius: 4),
],
),
),
],
),
),
],