2015年12月24日

Pygame学习笔记(三):如何移动图像?

学习资料:《How Do I Move An Image?

很多刚开始学习图形化编程的人,都很难弄明白怎样才能让一个图像在屏幕上移动。如果不理解所有相关的概念,它会很令人费解。

屏幕上的像素点

Pygame有一个display Surface,它是一个基本的在屏幕上可见的图像,这个图像是由像素构成。改变这些像素点的主要方式,是调用blit()函数,它将像素点从一个图像拷贝到另一个图像上。

这是首先要理解的。当你把一个图像blit到屏幕上时,你只是简单地改变了屏幕上某些像素点的颜色。像素点不会被增加或移动,我们只是改变屏幕上已经存在的像素点的颜色。这些你blit到屏幕上的图像,也都是Pygame中的Surface对象,但它们与display Surface没有联系。当图像被blit到屏幕上时,它们被复制到了display中,但此时你仍然保有一份它们原来的拷贝。

通过简短的描述,也许你已经知道了要“移动”一个图像需要些什么。实际上,我们根本没有移动任何东西,仅仅是将图像blit到了一个新的位置。但是,在新的位置画出图像之前,我们必须“擦除”旧图像。否则,图像将会出现在屏幕上的两个位置。通过快速擦除图像,并在新的位置重新绘制它,我们得到了移动的“错觉”。

接下来,我们将整个过程分解为几个简单的步骤。还会提到使多个图像在屏幕上移动的最佳实践。

退一步来看

让我们用实际的代码进一步说明上面的概念。先创建一个包含6个数字的Python列表,并把它想象成一个屏幕。你会发现,这与稍后基于图形的例子惊人地相似。

下面,我们开始创建一个“屏幕”列表,并填满“地形”1和2。

>>> screen = [1, 1, 2, 2, 2, 1]
>>> print screen
[1, 1, 2, 2, 2, 1]

现在背景已经创建完毕,我们来创建英雄(用数字8表示)。

>>> screen[3] = 8
>>> print screen
[1, 1, 2, 8, 2, 1]

现在,整个屏幕上的元素还是静态的。

让英雄移动

在移动角色之前,我们需要记录它的位置。

>>> playerpos = 3
>>> screen[playerpos] = 8
>>> print screen
[1, 1, 2, 8, 2, 1]

现在可以很容易地移动他了。让我们试试直接改变playerpos的值,然后把英雄重新绘制到屏幕上。

>>> playerpos = playerpos - 1
>>> screen[playerpos] = 8
>>> print screen
[1, 1, 8, 8, 2, 1]

额,现在我们看到了两个英雄,一个在旧位置,一个在新位置。这就是为什么我们在重绘英雄到新位置之前,需要先“擦除”旧英雄的原因。要实现“擦除”效果,我们最好保存一份背景的拷贝。让我们对这个小游戏做一点修改。

创建一个地图

我们要创建一个单独的列表,作为我们的背景。然后将背景的值拷贝到屏幕列表中,最后在屏幕上画出英雄。

>>> background = [1, 1, 2, 2, 2, 1]
>>> screen = [0] * 6
>>> for i in range(6):
...     screen[i] = background[i]
>>> print screen
[1, 1, 2, 2, 2, 1]
>>> playerpos = 3
>>> screen[playerpos] = 8
>>> print screen
[1, 1, 2, 8, 2, 1]

现在我们已经做好了移动英雄的准备。

让英雄移动(v2)

在这个版本中,我们先把英雄从旧位置擦除,然后再把他绘制到新的位置。

>>> print screen
[1, 1, 2, 8, 2, 1]
>>> screen[playerpos] = background[playerpos]
>>> playerpos = playerpos - 1
>>> screen[playerpos] = 8
>>> print screen
[1, 1, 8, 2, 2, 1]

可以了,现在英雄向左侧移动了一个位置。我们可以用同样的方法,让英雄再向左移动一个位置。

>>> screen[playerpos] = background[playerpos]
>>> playerpos = playerpos - 1
>>> screen[playerpos] = 8
>>> print screen
[1, 8, 2, 2, 2, 1]

很棒吧!这并不是你期待看到的动画,但是,只要做一些细微的改动,我们就可以在屏幕上用真正的图形把它绘制出来。

定义:“blit”

接下来,我们会把之前的程序改为图形版本。显示图形时,我们会频繁使用blit这个术语。可以认为它是给像素点赋值。

BLIT: Basically, blit means to copy graphics from one image to another. A more formal definition is to copy an array of data to a bitmapped array destination. You can think of blit as just “assigning” pixels. Much like setting values in our screen-list above, blitting assigns the color of pixels in our image.

有的图形库使用bitblt或blt这样的词汇,意思和这里是一样的。

从列表到屏幕

把上面的例子在Pygame中实现是很简单的。假设我们已经加载了一些图形,命名为“terrain1”、“terrain2”和“hero”。之前我们是把数字赋值到列表中,现在我们把图形blit到屏幕上。还有一个很大的不同点,不再使用单个索引来表示位置,而是使用一个二维坐标系。假定游戏中每一个图形宽度为10个像素点。

>>> background = [terrain1, terrain1, terrain2, terrain2, terrain2, terrain1]
>>> screen = create_graphics_screen()
>>> for i in range(6):
...    screen.blit(background[i], (i*10, 0))
>>> playerpos = 3
>>> screen.blit(playerimage, (playerpos*10, 0))

这段代码看上去是不是很熟悉?让我们将玩家移动一个位置。

>>> screen.blit(background[playerpos], (playerpos*10, 0))
>>> playerpos = playerpos - 1
>>> screen.blit(playerimage, (playerpos*10, 0))

这段代码中,我们在屏幕上显示出了一个背景,画出了角色,并且对角色进行移动。在此基础上,还能做些什么吗?其实现在的实现看上去有些奇怪。首先,我们要找一个更加干净的方式来表示背景和玩家的位置;其次,我们要让移动变得平滑一些,就像真正的动画一样。

屏幕坐标系

向屏幕上放置一个物体时,我们必须告诉blit()函数把图像放到哪里。在Pygame中,我们总是通过(X, Y)坐标来传递位置信息,分别表示放置图像时向右、向下移动的像素点个数。Surface左上角的坐标是(0, 0)。当blit的时候,位置参数代表源图像左上角在目标图像上的位置。

Pygame带有一个很方便的坐标容器,Rect。Rect表示坐标系中的一块矩形区域,它包含左上角和尺寸信息。Rect提供了一些方法,可以方便地进行移动。接下来的例子中,我们使用Rect来表示物体的位置。

Pygame中的很多函数都接受Rect参数,所有这些元素也同样接受包含4个元素的元组(left, top, width, height)。blit函数也接受Rect类型作为位置参数,这种情况下,仅仅使用了Rect的左上角作为真正的位置参数。

改变背景

在本文之前的部分,我们使用包含不同地形的列表来表示背景。这种方式比较适合战棋类游戏(tile-base game),但并不能实现我们想要的平滑效果。我们将采用一个更简单的方法,即改为用单独一张图片覆盖整个屏幕来创建背景。这样,当我们想要“擦除”物体时,只需要把背景中的相关区域blit到屏幕上即可。

通过向blit传递一个可选的第三个Rect类型参数,我们可以让blit只使用源图像的子区域。

还要注意,当我们完成了向屏幕的绘制操作后,要调用pygame.display.update()来显示我们在屏幕上绘制的所有东西。

平滑移动

要让某个东西看起来平滑移动,我们只要每次把它移动几个像素点。下面是让物体在屏幕上平滑移动的代码。

>>> screen = create_screen()
>>> player = load_player_image()
>>> background = load_background_image()
>>> screen.blit(background, (0, 0))       #draw the background
>>> position = player.get_rect()
>>> screen.blit(player, position)         #draw the player
>>> pygame.display.update()               #and show it all
>>> for x in range(100):                  #animate 100 frames
...    screen.blit(background, position, position) #erase
...    position = position.move(2, 0)     #move player
...    screen.blit(player, position)      #draw new player
...    pygame.display.update()            #and show it all
...    pygame.time.delay(100)             #stop the program for 1/10 second

在循环的最后,我们调用了pygame.time.delay(),这让程序慢了下来。如果不这样做,程序可能运行得很快,以至于你根本看不到它。

接下来干嘛?

到目前为止,我们已经达成了本文一开始的目标。但是,现在的代码离一个真正的游戏还是有相当的差距。我们如何轻易创建多个移动中的物体?像load_player_image()这样神秘的函数里面到底是什么?我们也需要一个方式来获取简单的用户输入,并且循环很多次。我们还要把现在这个例子变成面向对象风格。

首先,看看这些神秘的函数

关于这类函数的详细信息可以在其他tutor或参考文档中找到。pygame.image模块有一个load()函数来实现我们的想要的功能,如下所示:

>>> player = pygame.image.load('player.bmp').convert()
>>> background = pygame.image.load('liquid.bmp').convert()

load函数接受一个文件名,返回一个加载了图像的Surface对象。加载完成之后,我们调用了Surface类的convert方法。convert函数也返回一个该图像的新Surface对象,但图像被转换为与我们的显示(display)相同的像素点格式。由于图像与屏幕有着同样的格式,blit时会非常快。如果我们没有进行转换,blit函数会更慢,因为它运行时必须把一种格式的像素点转换为另一种格式。

你可能注意到了,load()和convert()函数都返回了一个新的Surface。这意味着在上面的每一行代码中,我们实际上都创建了两个Surface对象。在其他的编程语言中,这会导致内存泄漏。幸运的是,Python足够聪明,Pygame会恰当地清理掉我们不再使用的Surface对象。

之前看到的另一个神秘的函数是create_screen()。在Pygame中,创建一个新的图形窗口是很简单的,下面的代码可以创建一个640*480的Surface对象。如果不传入其他参数,Pygame会替我们选择最佳的颜色深度和像素格式。

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

处理输入

我们需要向程序中加入“事件处理”。

>>> while 1:
...    for event in pygame.event.get():
...        if event.type == QUIT:
...            sys.exit()
...    move_and_draw_all_game_objects()

如果用户点击窗口的关闭按钮,就退出程序。

移动多个图像

假设我们想让10个不同的图像在屏幕上移动。使用Python中的类是一个很好的方法。我们将创建一个代表游戏对象的类。这个对象有一个函数来移动自己,然后我们就可以创建任意多个对象了。

>>> class GameObject:
...    def __init__(self, image, height, speed):
...        self.speed = speed
...        self.image = image
...        self.pos = image.get_rect().move(0, height)
...    def move(self):
...        self.pos = self.pos.move(0, self.speed)
...        if self.pos.right > 600:
...            self.pos.left = 0

在我们的类中有两个函数,init函数创建了对象,它放置了对象并设定了速度。move方法将对象移动一步,如果移动得太远,则让对象回到最左边。

组合在一起

把刚才讲到的东西组合在一起,就得到了一个完整的程序:

>>> screen = pygame.display.set_mode((640, 480))
>>> player = pygame.image.load('player.bmp').convert()
>>> background = pygame.image.load('background.bmp').convert()
>>> screen.blit(background, (0, 0))
>>> objects = []
>>> for x in range(10): 		#create 10 objects
...    o = GameObject(player, x*40, x)
...    objects.append(o)
>>> while 1:
...    for event in pygame.event.get():
...        if event.type in (QUIT, KEYDOWN):
...            sys.exit()
...    for o in objects:
...        screen.blit(background, o.pos, o.pos)
...    for o in objects:
...        o.move()
...        screen.blit(o.image, o.pos)
...    pygame.display.update()
...    pygame.time.delay(100)

这个例子的最终可运行版本,可以在Pygame的例程中找到,名字叫做“moveit.py”。找来玩一玩。

这里有Pygame的论坛和邮件列表的信息。

最后

Lastly, have fun, that’s what games are for!

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*