太空射击第09课：精灵动画

这是我们“Shmup”项目的第6部分。如果您尚未通读前面的部分，请从第 1 部分开始。在本课中，我们将通过添加一些精灵动画来使我们的流星更有趣。

视频

观看视频

动画流星

我们所有的流星看起来都一模一样，这看起来并不是很好：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0EeLhSSB-1658971588829)(http://kidscancode.org/blog/img/shmup_part6_1.gif)]

我们如何为流星增添更多的多样性和视觉吸引力？一种方法是增加一点旋转，这样它们看起来更像是在太空中翻滚的岩石。旋转相对容易 - 就像我们使用pygame.transform.scale()函数来更改Player子画面的大小一样，我们可以使用pygame.transform.rotate()来执行旋转。但是，在此过程中，我们需要学习一些内容才能使其正常工作。

首先，让我们向Mob sprite 添加一些新属性：

class Mob(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image = meteor_img
		self.image.set_colorkey(BLACK)
        self.rect = self.image.get_rect()
        self.radius = int(self.rect.width * .85 / 2)
        self.rect.x = random.randrange(WIDTH - self.rect.width)
        self.rect.y = random.randrange(-150, -100)
        self.speedy = random.randrange(1, 8)
        self.speedx = random.randrange(-3, 3)
        self.rot = 0
        self.rot_speed = random.randrange(-8, 8)
        self.last_update = pygame.time.get_ticks()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第一个属性rot（“旋转”的缩写）将测量子画面应旋转多少度。它从 0 开始，并会随时间而变化。rot_speed 测量精灵每次应旋转多少度 - 数字越大，旋转速度越快。我们选择一个随机值，负数表示逆时针方向，正数表示顺时针方向。

最后一个属性是控制动画速度的属性。我们真的不想每一帧都改变精灵的图像，否则它会显得太快。每当您对精灵的图像进行动画处理时，都必须弄清楚时间 - 图像应更改的频率。

我们有一个名为clock 的pygame.time.Clock()对象，它帮助我们控制FPS。通过调用pygame.time.get_ticks()，我们可以找出自时钟启动以来经过了多少毫秒。通过这种方式，我们可以判断是否有足够的时间对精灵的图像进行另一次更改。

旋转图像

我们需要几行代码来执行此操作，因此我们将为它创建一个名为self.rotate() 的新方法，我们可以将其添加到update()方法中：

	def update(self):
		self.rotate()
1
2

通过这种方式，我们可以防止更新方法变得过于拥挤，如果您想关闭旋转，也可以注释掉该行。以下是我们旋转方法的开始：

	def rotate(self):
		now = pygame.time.get_ticks()
		if now - self.last_update > 50:
			self.last_update = now
			# do rotation here
1
2
3
4
5

首先，我们检查它当前是什么时间并放入now，然后我们减去上次更新的时间。如果过去了 50 毫秒以上，那么我们将更新映像。我们将now 的值放入last_update，然后我们可以执行旋转。现在，您可能会认为这就像将旋转应用于子画面一样简单，如下所示：

self.image = pygame.transform.rotate(self.image, self.rot_speed)
1

但是，如果您尝试此操作，则会遇到问题：

旋转有破坏性！

发生这种情况是因为图像由像素网格组成。当您尝试将这些像素旋转到新位置时，其中一些像素将不再对齐，因此某些信息将丢失。如果您只旋转一次，这很好，但是反复旋转图像将导致图像混乱。

解决方案是使用rot变量来跟踪总旋转量（每次更新增加rot_speed），并将原始图像旋转该量。通过这种方式，我们总是从干净的图像开始，只旋转一次。

首先，让我们保留原始图像的副本：

class Mob(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image_orig = random.choice(meteor_images)
        self.image_orig.set_colorkey(BLACK)
        self.image = self.image_orig.copy()
        self.rect = self.image.get_rect()
        self.radius = int(self.rect.width * .85 / 2)
        self.rect.x = random.randrange(WIDTH - self.rect.width)
        self.rect.y = random.randrange(-150, -100)
        self.speedy = random.randrange(1, 8)
        self.speedx = random.randrange(-3, 3)
        self.rot = 0
        self.rot_speed = random.randrange(-8, 8)
        self.last_update = pygame.time.get_ticks()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

然后在rotate方法中，我们可以更新rot的值并将该旋转应用于原始图像：

    def rotate(self):
        now = pygame.time.get_ticks()
        if now - self.last_update > 50:
            self.last_update = now
            self.rot = (self.rot + self.rot_speed) % 360
            self.image = pygame.transform.rotate(self.image_orig, self.rot)
1
2
3
4
5
6

请注意，我们使用%余数运算符 - - 来防止rot值大于 360。

我们差不多做到了 - 图像看起来很好 - 但我们仍然有一个小问题：

流星看起来像是在弹跳，而不是平稳地旋转。

更新矩形

旋转图像后，rect的大小可能不再正确。让我们看一个示例，其中我们要旋转宇宙飞船的图片：

在这里，我们可以看到，当我们旋转图像时，矩形保持不变。正确的做法是每次图像更改时，我们都需要计算一个新的矩形：

很容易看出矩形的大小如何根据图像的旋转方式而发生很大变化。现在，要修复“弹跳”效果，我们需要确保将新矩形保持在与旧矩形相同的位置居中，而不是锚定在左上角：

回到我们的旋转代码中，我们只需记录矩形中心的位置，计算新的矩形，并将其中心设置为保存的中心：

	def rotate(self):
        now = pygame.time.get_ticks()
        if now - self.last_update > 50:
            self.last_update = now
            self.rot = (self.rot + self.rot_speed) % 360
            new_image = pygame.transform.rotate(self.image_orig, self.rot)
            old_center = self.rect.center
            self.image = new_image
            self.rect = self.image.get_rect()
            self.rect.center = old_center
1
2
3
4
5
6
7
8
9
10

随机流星图像

为了使流星更有趣，我们能做的最后一件事就是随机化图像，使每个流星的大小和外观不同。

首先，我们将加载所有流星图像并将它们放入列表中：

meteor_images = []
meteor_list =['meteorBrown_big1.png','meteorBrown_med1.png',
              'meteorBrown_med1.png','meteorBrown_med3.png',
              'meteorBrown_small1.png','meteorBrown_small2.png',
              'meteorBrown_tiny1.png']
for img in meteor_list:
    meteor_images.append(pygame.image.load(path.join(img_dir, img)).convert())
1
2
3
4
5
6
7

然后，我们所要做的就是在流星生成时选择一个随机图像：

class Mob(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image_orig = random.choice(meteor_images)
        self.image_orig.set_colorkey(BLACK)
        self.image = self.image_orig.copy()
1
2
3
4
5
6

好多了！

结束语

动画精灵为游戏增添了许多视觉效果，无论是旋转的岩石还是奔跑/跳跃/蹲伏的英雄。但是，您拥有的动画越多，您必须跟踪的图像就越多。诀窍是保持它们井井有条，并利用pygame.transform命令等工具 - 只要你小心它们的局限性。

在下一部分中，我们将开始保持分数，并深入研究如何在屏幕上绘制文本。

此部分的完整代码

# KidsCanCode - Game Development with Pygame video series
# Shmup game - part 6
# Video link: https://www.youtube.com/watch?v=_y5U8tB36Vk
# Sprite animation - rotating meteors
import pygame
import random
from os import path

img_dir = path.join(path.dirname(__file__), 'img')

WIDTH = 480
HEIGHT = 600
FPS = 60

# define colors
WHITE = (255, 255, 255)
BLACK = (0, 0, 0)
RED = (255, 0, 0)
GREEN = (0, 255, 0)
BLUE = (0, 0, 255)
YELLOW = (255, 255, 0)

# initialize pygame and create window
pygame.init()
pygame.mixer.init()
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption("Shmup!")
clock = pygame.time.Clock()

class Player(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image = pygame.transform.scale(player_img, (50, 38))
        self.image.set_colorkey(BLACK)
        self.rect = self.image.get_rect()
        self.radius = 20
        # pygame.draw.circle(self.image, RED, self.rect.center, self.radius)
        self.rect.centerx = WIDTH / 2
        self.rect.bottom = HEIGHT - 10
        self.speedx = 0

    def update(self):
        self.speedx = 0
        keystate = pygame.key.get_pressed()
        if keystate[pygame.K_LEFT]:
            self.speedx = -8
        if keystate[pygame.K_RIGHT]:
            self.speedx = 8
        self.rect.x += self.speedx
        if self.rect.right > WIDTH:
            self.rect.right = WIDTH
        if self.rect.left < 0:
            self.rect.left = 0

    def shoot(self):
        bullet = Bullet(self.rect.centerx, self.rect.top)
        all_sprites.add(bullet)
        bullets.add(bullet)

class Mob(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image_orig = random.choice(meteor_images)
        self.image_orig.set_colorkey(BLACK)
        self.image = self.image_orig.copy()
        self.rect = self.image.get_rect()
        self.radius = int(self.rect.width * .85 / 2)
        # pygame.draw.circle(self.image, RED, self.rect.center, self.radius)
        self.rect.x = random.randrange(WIDTH - self.rect.width)
        self.rect.y = random.randrange(-150, -100)
        self.speedy = random.randrange(1, 8)
        self.speedx = random.randrange(-3, 3)
        self.rot = 0
        self.rot_speed = random.randrange(-8, 8)
        self.last_update = pygame.time.get_ticks()

    def rotate(self):
        now = pygame.time.get_ticks()
        if now - self.last_update > 50:
            self.last_update = now
            self.rot = (self.rot + self.rot_speed) % 360
            new_image = pygame.transform.rotate(self.image_orig, self.rot)
            old_center = self.rect.center
            self.image = new_image
            self.rect = self.image.get_rect()
            self.rect.center = old_center

    def update(self):
        self.rotate()
        self.rect.x += self.speedx
        self.rect.y += self.speedy
        if self.rect.top > HEIGHT + 10 or self.rect.left < -25 or self.rect.right > WIDTH + 20:
            self.rect.x = random.randrange(WIDTH - self.rect.width)
            self.rect.y = random.randrange(-100, -40)
            self.speedy = random.randrange(1, 8)

class Bullet(pygame.sprite.Sprite):
    def __init__(self, x, y):
        pygame.sprite.Sprite.__init__(self)
        self.image = bullet_img
        self.image.set_colorkey(BLACK)
        self.rect = self.image.get_rect()
        self.rect.bottom = y
        self.rect.centerx = x
        self.speedy = -10

    def update(self):
        self.rect.y += self.speedy
        # kill if it moves off the top of the screen
        if self.rect.bottom < 0:
            self.kill()

# Load all game graphics
background = pygame.image.load(path.join(img_dir, "starfield.png")).convert()
background_rect = background.get_rect()
player_img = pygame.image.load(path.join(img_dir, "playerShip1_orange.png")).convert()
bullet_img = pygame.image.load(path.join(img_dir, "laserRed16.png")).convert()
meteor_images = []
meteor_list = ['meteorBrown_big1.png', 'meteorBrown_med1.png', 'meteorBrown_med1.png',
               'meteorBrown_med3.png', 'meteorBrown_small1.png', 'meteorBrown_small2.png',
               'meteorBrown_tiny1.png']
for img in meteor_list:
    meteor_images.append(pygame.image.load(path.join(img_dir, img)).convert())

all_sprites = pygame.sprite.Group()
mobs = pygame.sprite.Group()
bullets = pygame.sprite.Group()
player = Player()
all_sprites.add(player)
for i in range(8):
    m = Mob()
    all_sprites.add(m)
    mobs.add(m)

# Game loop
running = True
while running:
    # keep loop running at the right speed
    clock.tick(FPS)
    # Process input (events)
    for event in pygame.event.get():
        # check for closing window
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.KEYDOWN:
            if event.key == pygame.K_SPACE:
                player.shoot()

    # Update
    all_sprites.update()

    # check to see if a bullet hit a mob
    hits = pygame.sprite.groupcollide(mobs, bullets, True, True)
    for hit in hits:
        m = Mob()
        all_sprites.add(m)
        mobs.add(m)

    # check to see if a mob hit the player
    hits = pygame.sprite.spritecollide(player, mobs, False, pygame.sprite.collide_circle)
    if hits:
        running = False

    # Draw / render
    screen.fill(BLACK)
    screen.blit(background, background_rect)
    all_sprites.draw(screen)
    # *after* drawing everything, flip the display
    pygame.display.flip()

pygame.quit()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

第7部分：分数（和绘图文本）