如何在Pygame中实现平滑显示的电池电量计？

你可以通过单张电池外壳图 + 单张电量填充图的组合，配合PyGame的区域裁剪功能来实现平滑的电量变化显示，具体步骤和代码如下：

核心思路 #

放弃原来的三档固定图片，改用两张图：

• 一张是空电池外壳（仅显示电池的轮廓，无电量填充）
• 一张是电量填充图（比如绿色长条，尺寸刚好匹配外壳内部的电量区域）

通过计算当前电量的百分比，动态裁剪填充图的显示宽度，就能实现从0%到100%的平滑过渡。

修改后的代码 #

import pygame

# 初始化PyGame
pygame.init()
display = pygame.display.set_mode((200, 100))
WHITE = (255, 255, 255)

# 加载图片：空电池外壳 + 电量填充图
battery_empty = pygame.image.load("battery_empty.png").convert_alpha()
battery_fill = pygame.image.load("battery_fill.png").convert_alpha()

battery = 100.0
clock = pygame.time.Clock()  # 控制帧率，避免电量掉得过快

running = True
while running:
    # 控制电量消耗速度（每秒掉1%，可按需调整）
    battery = max(0, battery - 0.01)
    
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
    
    display.fill(WHITE)
    
    # 计算电量比例（确保在0-1区间）
    charge_ratio = battery / 100
    # 计算填充图需要显示的宽度
    fill_width = int(battery_fill.get_width() * charge_ratio)
    
    # 裁剪填充图：仅保留左侧fill_width宽度的区域
    if fill_width > 0:
        fill_surface = battery_fill.subsurface((0, 0, fill_width, battery_fill.get_height()))
        # 绘制填充图（位置需与外壳的电量区域对齐）
        display.blit(fill_surface, (10, 10))
    
    # 绘制电池外壳（放在填充图上方，显示轮廓）
    display.blit(battery_empty, (0, 0))
    
    pygame.display.flip()
    clock.tick(100)  # 固定帧率，保证动画平滑
    
pygame.quit()

关键细节说明 #

1. 图片适配：确保填充图的高度与外壳内部电量区域高度完全一致，宽度对应100%电量状态。
2. subsurface高效裁剪：该方法创建原Surface的子区域引用，不额外占用内存，性能优异。当电量为0时，不绘制填充图即可。
3. 电量边界控制：用max(0, ...)避免电量出现负数，防止逻辑错误。
4. 帧率控制：clock.tick()限制循环执行速度，让电量消耗节奏更可控。

如果不想额外准备图片，也可以用PyGame原生绘图函数直接绘制电量条，无需图片也能实现完全平滑的效果：

# 纯代码绘制替代方案
display.fill(WHITE)

# 绘制电池外壳（灰色边框）
pygame.draw.rect(display, (100,100,100), (0,0,180,80), 2)
# 绘制电池顶部小凸起
pygame.draw.rect(display, (100,100,100), (180,25,10,30))

# 绘制电量填充（绿色，按比例调整宽度）
charge_width = int(170 * charge_ratio)  # 170为外壳内部可用宽度
pygame.draw.rect(display, (0,200,0), (5,5, charge_width,70))

pygame.display.flip()

内容的提问来源于stack exchange，提问作者Benjamin Ecker