SuperAPI AI 工具集

gaming-ui-state-management

通用与其它

查看项目

更新于 10-16 01:14

技能介绍

用途:为游戏化界面提供状态驱动的视觉模式,覆盖生命条、经验条、法力条等游戏指标,适合构建 RPG 或复古游戏风格的 UI 组件。

主要能力:基于 Progress 组件扩展出游戏专用变体,通过 variant="retro" 与 progressBg 指定颜色(红=生命、蓝=法力、黄=经验、绿=体力)。支持升级提示:当经验值达到 100 时显示闪烁的 LEVEL UP 文本并叠加 animate-pulse。支持条件动画,例如生命值低于阈值时切换颜色与脉冲效果。提供紧凑的敌人血量显示,含数值与百分比。

使用方式:从 "@/components/ui/8bit/progress" 导入 Progress,封装 HealthBar、ManaBar、XpBar 等组件,传入 value 与 progressBg。升级提示用绝对定位叠加文本,配合 .retro 类与 text-shadow 保证可读性。条件样式用 cn 组合类名。

参考组件:components/ui/8bit/health-bar.tsx、xp-bar.tsx、mana-bar.tsx。

限制:资料未提供安装命令、依赖版本、平台与收费信息,暂未提供。