python - 来自几张图像的动画精灵

Question

我一直在寻找一些关于使用 Pygame 从 Python 中的少量图像制作简单精灵动画的好教程。我还没有找到我要找的东西。

我的问题很简单：如何从几张图像制作动画精灵（例如：制作几张尺寸为 20x20px 的爆炸图像作为一个但动画）

有什么好主意吗？

Answer 1

有两种类型的动画：frame-dependent和time-dependent。两者都以类似的方式工作。

---

在主循环之前

1. 将所有图像加载到列表中。
2. 创建三个变量：
   1. index，跟踪图像列表的当前索引。
   2. current_time或者current_frame自上次索引切换以来跟踪当前时间或当前帧。
   3. animation_time或者animation_frames定义在切换图像之前应该经过多少秒或帧。

---

在主循环期间

1. 增加current_time自我们上次增加它以来经过的秒数，或增加current_frame1。
2. 检查是否current_time >= animation_time或current_frame >= animation_frame。如果为真，请继续 3-5。
3. 重置current_time = 0或current_frame = 0。
4. 增加索引，除非它等于或大于图像的数量。在这种情况下，重置index = 0.
5. 相应地更改精灵的图像。

---

一个完整的工作示例

import os
import pygame
pygame.init()

SIZE = WIDTH, HEIGHT = 720, 480
BACKGROUND_COLOR = pygame.Color('black')
FPS = 60

screen = pygame.display.set_mode(SIZE)
clock = pygame.time.Clock()


def load_images(path):
    """
    Loads all images in directory. The directory must only contain images.

    Args:
        path: The relative or absolute path to the directory to load images from.

    Returns:
        List of images.
    """
    images = []
    for file_name in os.listdir(path):
        image = pygame.image.load(path + os.sep + file_name).convert()
        images.append(image)
    return images


class AnimatedSprite(pygame.sprite.Sprite):

    def __init__(self, position, images):
        """
        Animated sprite object.

        Args:
            position: x, y coordinate on the screen to place the AnimatedSprite.
            images: Images to use in the animation.
        """
        super(AnimatedSprite, self).__init__()

        size = (32, 32)  # This should match the size of the images.

        self.rect = pygame.Rect(position, size)
        self.images = images
        self.images_right = images
        self.images_left = [pygame.transform.flip(image, True, False) for image in images]  # Flipping every image.
        self.index = 0
        self.image = images[self.index]  # 'image' is the current image of the animation.

        self.velocity = pygame.math.Vector2(0, 0)

        self.animation_time = 0.1
        self.current_time = 0

        self.animation_frames = 6
        self.current_frame = 0

    def update_time_dependent(self, dt):
        """
        Updates the image of Sprite approximately every 0.1 second.

        Args:
            dt: Time elapsed between each frame.
        """
        if self.velocity.x > 0:  # Use the right images if sprite is moving right.
            self.images = self.images_right
        elif self.velocity.x < 0:
            self.images = self.images_left

        self.current_time += dt
        if self.current_time >= self.animation_time:
            self.current_time = 0
            self.index = (self.index + 1) % len(self.images)
            self.image = self.images[self.index]

        self.rect.move_ip(*self.velocity)

    def update_frame_dependent(self):
        """
        Updates the image of Sprite every 6 frame (approximately every 0.1 second if frame rate is 60).
        """
        if self.velocity.x > 0:  # Use the right images if sprite is moving right.
            self.images = self.images_right
        elif self.velocity.x < 0:
            self.images = self.images_left

        self.current_frame += 1
        if self.current_frame >= self.animation_frames:
            self.current_frame = 0
            self.index = (self.index + 1) % len(self.images)
            self.image = self.images[self.index]

        self.rect.move_ip(*self.velocity)

    def update(self, dt):
        """This is the method that's being called when 'all_sprites.update(dt)' is called."""
        # Switch between the two update methods by commenting/uncommenting.
        self.update_time_dependent(dt)
        # self.update_frame_dependent()


def main():
    images = load_images(path='temp')  # Make sure to provide the relative or full path to the images directory.
    player = AnimatedSprite(position=(100, 100), images=images)
    all_sprites = pygame.sprite.Group(player)  # Creates a sprite group and adds 'player' to it.

    running = True
    while running:

        dt = clock.tick(FPS) / 1000  # Amount of seconds between each loop.

        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                running = False
            elif event.type == pygame.KEYDOWN:
                if event.key == pygame.K_RIGHT:
                    player.velocity.x = 4
                elif event.key == pygame.K_LEFT:
                    player.velocity.x = -4
                elif event.key == pygame.K_DOWN:
                    player.velocity.y = 4
                elif event.key == pygame.K_UP:
                    player.velocity.y = -4
            elif event.type == pygame.KEYUP:
                if event.key == pygame.K_RIGHT or event.key == pygame.K_LEFT:
                    player.velocity.x = 0
                elif event.key == pygame.K_DOWN or event.key == pygame.K_UP:
                    player.velocity.y = 0

        all_sprites.update(dt)  # Calls the 'update' method on all sprites in the list (currently just the player).

        screen.fill(BACKGROUND_COLOR)
        all_sprites.draw(screen)
        pygame.display.update()


if __name__ == '__main__':
    main()

---

什么时候选哪个

时间相关动画允许您以相同的速度播放动画，无论帧速率有多慢/快或您的计算机有多慢/快。这允许您的程序在不影响动画的情况下自由更改帧率，即使计算机无法跟上帧率，它也将保持一致。如果程序滞后，动画将赶上它本应处于的状态，就好像没有发生滞后一样。

虽然，动画周期可能与帧速率不同步，使动画周期看起来不规则。例如，假设我们每 0.05 秒更新一次帧，每 0.075 秒更新一次动画切换图像，那么循环将是：

1. 第一帧；0.00 秒；图 1
2. 第 2 帧；0.05 秒；图 1
3. 第 3 帧；0.10 秒；图 2
4. 第 4 帧；0.15 秒；图 1
5. 第 5 帧；0.20 秒；图 1
6. 第 6 帧；0.25 秒；图 2

等等...

如果您的计算机能够始终如一地处理帧速率，则取决于帧的看起来会更流畅。如果发生延迟，它将在当前状态下暂停并在延迟停止时重新启动，这使得延迟更加明显。这种替代方案更容易实现，因为您只需要current_frame在每次调用时递增 1，而不是处理增量时间 ( dt) 并将其传递给每个对象。

精灵

结果

Answer 2

您可以尝试修改您的精灵，以便将其图像换成内部的不同图像update。这样，当精灵被渲染时，它会看起来是动画的。

编辑：

这是我绘制的一个简单示例：

import pygame
import sys

def load_image(name):
    image = pygame.image.load(name)
    return image

class TestSprite(pygame.sprite.Sprite):
    def __init__(self):
        super(TestSprite, self).__init__()
        self.images = []
        self.images.append(load_image('image1.png'))
        self.images.append(load_image('image2.png'))
        # assuming both images are 64x64 pixels

        self.index = 0
        self.image = self.images[self.index]
        self.rect = pygame.Rect(5, 5, 64, 64)

    def update(self):
        '''This method iterates through the elements inside self.images and 
        displays the next one each tick. For a slower animation, you may want to 
        consider using a timer of some sort so it updates slower.'''
        self.index += 1
        if self.index >= len(self.images):
            self.index = 0
        self.image = self.images[self.index]

def main():
    pygame.init()
    screen = pygame.display.set_mode((250, 250))

    my_sprite = TestSprite()
    my_group = pygame.sprite.Group(my_sprite)

    while True:
        event = pygame.event.poll()
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit(0)

        # Calling the 'my_group.update' function calls the 'update' function of all 
        # its member sprites. Calling the 'my_group.draw' function uses the 'image'
        # and 'rect' attributes of its member sprites to draw the sprite.
        my_group.update()
        my_group.draw(screen)
        pygame.display.flip()

if __name__ == '__main__':
    main()

它假定您调用了两个图像image1.png，并且image2.png在代码所在的同一文件夹中。

Answer 3

您应该将所有精灵动画放在一个大“画布”上，因此对于 3 个 20x20 的爆炸精灵帧，您将拥有 60x20 的图像。现在您可以通过加载图像的一个区域来获得正确的帧。

在你的精灵类中，很可能在更新方法中你应该有这样的东西（为了简单起见，我更喜欢有单独的类来负责选择正确的动画帧）。self.f = 0上__init__。

def update(self):
    images = [[0, 0], [20, 0], [40, 0]]
    self.f += 1 if self.f < len(images) else 0
    self.image = your_function_to_get_image_by_coordinates(images[i])

Answer 4

对于动画Spritepygame.Surface ，必须生成图像（对象）列表。列表的不同图片显示在每一帧中，就像电影图片一样。这给出了动画对象的外观。
获取图像列表的一种方法是加载动画GIF（图形交换格式）。不幸的是，PyGame 不提供加载动画 GIF 帧的功能。但是，有几个 Stack Overflow 答案可以解决这个问题：

• 如何加载动画 GIF 并获取 PyGame 中的所有单独帧？
• 如何在pygame中将精灵制作为gif？
• Pygame 和 Numpy 动画

一种方法是使用流行的Pillow库（pip install Pillow）。以下函数加载动画GIF的帧并生成pygame.Surface对象列表：

from PIL import Image, ImageSequence

def loadGIF(filename):
    pilImage = Image.open(filename)
    frames = []
    for frame in ImageSequence.Iterator(pilImage):
        frame = frame.convert('RGBA')
        pygameImage = pygame.image.fromstring(
            frame.tobytes(), frame.size, frame.mode).convert_alpha()
        frames.append(pygameImage)
    return frames

创建一个pygame.sprite.Sprite维护图像列表的类。实现一个更新方法，在每一帧中选择不同的图像。
将图像列表传递给类构造函数。添加一个index属性，指示当前图像在列表中的索引。增加Update方法中的索引。如果索引大于或等于图像列表的长度，则重置索引（或使用模 ( %) 运算符）。通过订阅从列表中获取当前图像：

class AnimatedSpriteObject(pygame.sprite.Sprite):
    def __init__(self, x, bottom, images):
        pygame.sprite.Sprite.__init__(self)
        self.images = images
        self.image = self.images[0]
        self.rect = self.image.get_rect(midbottom = (x, bottom))
        self.image_index = 0
    def update(self):
        self.image_index += 1
        if self.image_index >= len(self.images):
            self.image_index = 0
        self.image = self.images[self.image_index]

另请参阅加载动画 GIF和Sprite

GIF 示例（来自Animated Gifs, Animated Image）：

最小的例子： repl.it/@Rabbid76/PyGame-SpriteAnimation

import pygame
from PIL import Image, ImageSequence

def loadGIF(filename):
    pilImage = Image.open(filename)
    frames = []
    for frame in ImageSequence.Iterator(pilImage):
        frame = frame.convert('RGBA')
        pygameImage = pygame.image.fromstring(
            frame.tobytes(), frame.size, frame.mode).convert_alpha()
        frames.append(pygameImage)
    return frames
 
class AnimatedSpriteObject(pygame.sprite.Sprite):
    def __init__(self, x, bottom, images):
        pygame.sprite.Sprite.__init__(self)
        self.images = images
        self.image = self.images[0]
        self.rect = self.image.get_rect(midbottom = (x, bottom))
        self.image_index = 0
    def update(self):
        self.image_index += 1
        self.image = self.images[self.image_index % len(self.images)]
        self.rect.x -= 5
        if self.rect.right < 0:
            self.rect.left = pygame.display.get_surface().get_width()

pygame.init()
window = pygame.display.set_mode((300, 200))
clock = pygame.time.Clock()
ground = window.get_height() * 3 // 4

gifFrameList = loadGIF('stone_age.gif')
animated_sprite = AnimatedSpriteObject(window.get_width() // 2, ground, gifFrameList)    
all_sprites = pygame.sprite.Group(animated_sprite)

run = True
while run:
    clock.tick(20)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False

    all_sprites.update()

    window.fill((127, 192, 255), (0, 0, window.get_width(), ground))
    window.fill((255, 127, 64), (0, ground, window.get_width(), window.get_height() - ground))
    all_sprites.draw(window)
    pygame.display.flip()

pygame.quit()
exit()