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

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

@@ -285,7 +285,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
); );
} }
/// 컴팩트 HP 바 /// 컴팩트 HP 바 (숫자 오버레이)
Widget _buildCompactHpBar() { Widget _buildCompactHpBar() {
final ratio = _currentHpMax > 0 ? _currentHp / _currentHpMax : 0.0; final ratio = _currentHpMax > 0 ? _currentHp / _currentHpMax : 0.0;
final isLow = ratio < 0.2 && ratio > 0; final isLow = ratio < 0.2 && ratio > 0;
@@ -320,9 +320,13 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
), ),
), ),
), ),
// 프로그레스 // 프로그레스 바 + 숫자 오버레이
Expanded( Expanded(
child: ClipRRect( child: Stack(
alignment: Alignment.center,
children: [
// 프로그레스 바
ClipRRect(
borderRadius: const BorderRadius.horizontal( borderRadius: const BorderRadius.horizontal(
right: Radius.circular(3), right: Radius.circular(3),
), ),
@@ -335,14 +339,23 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
minHeight: 20, minHeight: 20,
), ),
), ),
), // 숫자 오버레이 (바 중앙)
// 수치 Text(
Container(
width: 56,
alignment: Alignment.center,
child: Text(
'$_currentHp/$_currentHpMax', '$_currentHp/$_currentHpMax',
style: const TextStyle(fontSize: 11, color: Colors.white), 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) if (_hpChange != 0 && _hpFlashAnimation.value > 0.05)
Positioned( Positioned(
right: 50, right: 20,
top: -8, top: -8,
child: Transform.translate( child: Transform.translate(
offset: Offset(0, -10 * (1 - _hpFlashAnimation.value)), offset: Offset(0, -10 * (1 - _hpFlashAnimation.value)),
@@ -378,7 +391,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
); );
} }
/// 컴팩트 MP 바 /// 컴팩트 MP 바 (숫자 오버레이)
Widget _buildCompactMpBar() { Widget _buildCompactMpBar() {
final ratio = _currentMpMax > 0 ? _currentMp / _currentMpMax : 0.0; final ratio = _currentMpMax > 0 ? _currentMp / _currentMpMax : 0.0;
@@ -408,8 +421,13 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
), ),
), ),
), ),
// 프로그레스 바 + 숫자 오버레이
Expanded( Expanded(
child: ClipRRect( child: Stack(
alignment: Alignment.center,
children: [
// 프로그레스 바
ClipRRect(
borderRadius: const BorderRadius.horizontal( borderRadius: const BorderRadius.horizontal(
right: Radius.circular(3), right: Radius.circular(3),
), ),
@@ -422,13 +440,23 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
minHeight: 20, minHeight: 20,
), ),
), ),
), // 숫자 오버레이 (바 중앙)
Container( Text(
width: 56,
alignment: Alignment.center,
child: Text(
'$_currentMp/$_currentMpMax', '$_currentMp/$_currentMpMax',
style: const TextStyle(fontSize: 11, color: Colors.white), 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) if (_mpChange != 0 && _mpFlashAnimation.value > 0.05)
Positioned( Positioned(
right: 50, right: 20,
top: -8, top: -8,
child: Transform.translate( child: Transform.translate(
offset: Offset(0, -10 * (1 - _mpFlashAnimation.value)), offset: Offset(0, -10 * (1 - _mpFlashAnimation.value)),

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

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