太空射击 第07课： 添加图形

太空射击 第07课： 添加图形

在本课中，我们将讨论如何在游戏中使用预先绘制的图形。

视频

在这里可以观看本教程的视频

选择图形

我们谈到了 Opengameart.org，这是免费游戏艺术的重要来源，也是我们最喜欢的艺术家之一“肯尼”。Kenney为我们的游戏制作了完美的艺术包“太空射击包”，你可以在这里找到：

http://opengameart.org/content/space-shooter-redux

它有很多非常漂亮的图像，包括宇宙飞船，激光，小行星等等。

当您下载包时，它会解压缩到一堆不同的文件夹中。我们想要的是PNG文件夹，其中包含所有单独的图像。我们将为三个精灵选择三个图像，以及包含用于游戏背景的“星域”图像。

这些图像需要复制到我们的游戏可以找到它们的地方。执行此操作的最简单方法是在游戏代码所在的同一位置创建一个新文件夹。我们将文件夹命名为“img”。

加载图像

正如我们在 太空射击 第 03 课：图像精灵课程中所讨论的，为了确保我们的代码可以在任何操作系统上运行，我们需要使用os.path函数来找出文件的正确位置和路径。在程序的顶部，我们将定义文件夹img的位置：

from os import path

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

绘制背景

现在，我们可以从加载背景图像开始。我们将在现有游戏循环和初始化代码之前完成所有组件加载：

# Load all game graphics
background = pygame.image.load(path.join(img_dir, 'starfield.png')).convert()
background_rect = background.get_rect()
1
2
3

现在，我们可以在绘制任何精灵之前，在游戏循环的绘制部分中绘制背景：

# Draw / render
screen.fill(BLACK)
screen.blit(background, background_rect)
all_sprites.draw(screen)
1
2
3
4

blit是一个老式的计算机图形学术语，意思是将一个图像的像素绘制到另一个图像的像素上 ，把背景图绘制到屏幕上。现在我们的背景看起来好多了：

精灵图像

现在我们可以加载精灵的图像：

# 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()
meteor_img = pygame.image.load(path.join(img_dir, "meteorBrown_med1.png")).convert()
bullet_img = pygame.image.load(path.join(img_dir, "laserRed16.png")).convert()
1
2
3
4
5
6

从玩家精灵开始 - 我们想要替换绿色矩形，因此我们更改了self.image ，并且不要忘记删除self.image.fill(GREEN) ，我们不再需要它：

class Player(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image = player_img
        self.rect = self.image.get_rect()
1
2
3
4
5

但是，现在我们看到了几个问题。首先，图像比我们想要的要大得多。我们有两个选择：1. 在图形编辑器（Photoshop，GIMP等）中打开图像并调整其大小；2. 在我们的代码中调整图像大小。我们将选择选项2，使用Pygame的transform.scale()命令使图像大约是其大小的一半，即50x38像素。

另一个问题是我们的船周围有一个黑色的矩形，因为我们没有使用set_colorkey设置透明颜色：

self.image = pygame.transform.scale(player_img, (50, 38))
self.image.set_colorkey(BLACK)
1
2

如果我们对Bullet和Mob类采取相同的过程，我们最终会得到一个更漂亮的游戏：

结束语

现在我们已经有了图形，你可能已经注意到一个新问题：有时流星会摧毁我们的飞船，即使它看起来不像是触摸的。自己试试吧 - 多么令人沮丧！在下一课中，我们将了解如何调整冲突以便正常工作。

---

此部分的完整代码

# KidsCanCode - Game Development with Pygame video series
# Shmup game - part 4
# Video link: https://www.youtube.com/watch?v=mOckdKp3V38
# Adding graphics
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.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 = meteor_img
        self.image.set_colorkey(BLACK)
        self.rect = self.image.get_rect()
        self.rect.x = random.randrange(WIDTH - self.rect.width)
        self.rect.y = random.randrange(-100, -40)
        self.speedy = random.randrange(1, 8)
        self.speedx = random.randrange(-3, 3)

    def update(self):
        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()
meteor_img = pygame.image.load(path.join(img_dir, "meteorBrown_med1.png")).convert()
bullet_img = pygame.image.load(path.join(img_dir, "laserRed16.png")).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)
    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

第 5 部分：改进的碰撞