如何在pygame中为精灵或图像绘制边框？

Question

我想在一张图片周围绘制一个红色边框，但是不知道该怎么做。

我尝试了对Hero精灵的图像进行填充，并将颜色键设置为红色self.image.set_colorkey(red)，但这使得图像变得不可见。

在图像上绘制红色矩形只会完全填充它：pygame.draw.rect(self.image, red, [0, 0, width, height])。

我只想要一个红色边框，以便于未来的碰撞检测。

main.py中的代码：

import pygame
from pygame import *
import sprites
from sprites import *
pygame.init()

width = 640
height = 480
color = (255, 255, 255) #white
x = 0
y = 0
speed = 3

screen = pygame.display.set_mode((width, height))
pygame.display.set_caption("Mushroom")
icon = pygame.image.load('icon.bmp')
pygame.display.set_icon(icon)
sprites_list = pygame.sprite.Group()

hero = Hero('mushroom.png', 48, 48)
hero.rect.x = 200;
hero.rect.y = 300;

sprites_list.add(hero)

running = True
clock = pygame.time.Clock()
while running:
    sprites_list.update()
    screen.fill((color))
    sprites_list.draw(screen)
    hero.draw(screen)
    pygame.display.flip()
    pygame.display.update()

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    key = pygame.key.get_pressed()
    if key[pygame.K_LEFT]:
       hero.left(speed)
    if key[pygame.K_RIGHT]:
       hero.right(speed)
    if key[pygame.K_UP]:
       hero.up(speed)
    if key[pygame.K_DOWN]:
       hero.down(speed)

    clock.tick(60)

sprites.py中的代码：

import pygame
from pygame import *

red = (255, 0, 0)

class Hero(pygame.sprite.Sprite):
    def __init__(self, color, width, height):

        super().__init__()

        self.image = pygame.image.load('mushroom.png')
        self.image = pygame.Surface((width, height))
        self.image.fill(red)
        self.image.set_colorkey(red)

        pygame.draw.rect(self.image, red, [0, 0, width, height])
        self.rect = self.image.get_rect()

    def draw(self, screen):
        screen.blit(self.image, self.rect)

    def right(self, pixels):
        self.rect.x += pixels
    def left(self, pixels):
        self.rect.x -= pixels
    def up(self, pixels):
        self.rect.y -= pixels
    def down(self, pixels):
        self.rect.y += pixels

- Yeoha I

---

你想做什么并不是很清楚。为什么要填充图像 self.image.fill(red) 然后设置颜色键 self.image.set_colorkey(red)？这会使图像变得不可见。你是想让 'mushroom.png' 图像的背景透明吗？还是想在图像周围画一个红色边框？ - skrx

是的，我想在图像周围绘制一个红色边框，以便将来进行碰撞检查。图像不会显示，但会显示一个红色矩形。 - Yeoha I

你能给我们展示一下你的mushroom.png文件吗？另外，如果你想让你的精灵始终有一个红色的矩形框，就不需要用新的pygame.Surface替换self.image，并且失去你刚刚加载的所有图像数据。 - CodeSurgeon

@YeohaI，我已经重新措辞问题以帮助未来的读者。如果看起来可以，请告诉我。 - skrx

Answer 1

你可以通过传递 width 参数给 pygame.draw.rect() 函数来实现。

修改行：

pygame.draw.rect(self.image, red, [0, 0, width, height])

为了

pygame.draw.rect(self.image, red, [0, 0, width, height], 1)

我希望这篇文章能够解决你所寻找的问题！

编辑：我知道这篇文章已经有些年头了，但我曾经遇到过同样的问题，而目前排名第一的答案并没有帮到我。我找到了这个解决方案，希望它也能帮助到其他人！

- MTurek

Answer 2

你有两个选择：

1. 在蘑菇图像/表面上绘制一个红色的非填充矩形。
2. 在draw方法中每帧绘制矩形。

如果你想要一个非填充矩形，你需要将一个整数作为最后一个参数（即线条width）传递给pygame.draw.rect函数。

import pygame


pygame.init()

white = (255, 255, 255)
red = (255, 0, 0)

# The original
hero_img = pygame.Surface((48, 48), pygame.SRCALPHA)
pygame.draw.circle(hero_img, (30, 90, 170), (24, 24), 20)
# ---Solution 1---
# You could create a copy of the original image and
# then draw the rect onto it.
hero_img_with_border = hero_img.copy()
# Draw the red border. Pass an int as the last argument (width)
# to draw a non-filled rect. For 2 pixel linewidth the rect has
# to be one pixel smaller.
pygame.draw.rect(hero_img_with_border, red, (0, 0, 47, 47), 2)


class Hero(pygame.sprite.Sprite):

    def __init__(self, position):
        super().__init__()
        self.image = hero_img
        self.rect = self.image.get_rect(center=position)
        self.speed = 3

    def draw(self, screen):
        # ---Solution 2---
        # Just draw the non-filled rect here.
        pygame.draw.rect(screen, red, self.rect, 2)

    def right(self):
        self.rect.x += self.speed
    def left(self):
        self.rect.x -= self.speed
    def up(self):
        self.rect.y -= self.speed
    def down(self):
        self.rect.y += self.speed


screen = pygame.display.set_mode((640, 480))

sprites_list = pygame.sprite.Group()
# You can pass the coords and change the rect in the __init__ method.
hero = Hero((200, 300))
sprites_list.add(hero)

running = True
clock = pygame.time.Clock()

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    key = pygame.key.get_pressed()
    if key[pygame.K_LEFT]:
       hero.left()
    if key[pygame.K_RIGHT]:
       hero.right()
    if key[pygame.K_UP]:
       hero.up()
    if key[pygame.K_DOWN]:
       hero.down()

    sprites_list.update()

    screen.fill(white)
    sprites_list.draw(screen)
    # If you use solution 1, you don't need the draw method, since
    # sprites_list.draw blits the image already.
    hero.draw(screen)
    screen.blit(hero_img, (100, 100))

    pygame.display.flip()
    clock.tick(60)

---

我已经做了一些修改：精灵的速度可以成为一个属性，你可以在__init__方法中传递一个元组来表示坐标，然后将其作为center或topleft参数传递给get_rect。

self.image.get_rect(center=position)

- skrx