【pygame实现星露谷物语风格游戏】8.游戏地图的绘制与摄像机的创建

一.目的

本次需要完成

把游戏从黑色的背景变成如下的背景图片

并且设置一个跟随主角的摄像机，使主角一直保持在中间

二.代码实现

1.将地板绘制进去

和player一样，我们需要创建一个地板类，并将其变成精灵，加入精灵组，这样，只需要调用精灵组的draw函数就能顺带把地板给绘制进来了

我们新建一个sprites.py文件，我们会将以后写的所有精灵类都写到这个文件里，由于player这个精灵占的篇幅比较大，所以把它单独写到了player.py里面

现在，我们只需要在sprites.py里书写一个叫Generic的精灵类即可

import pygame
from settings import *
class Generic(pygame.sprite.Sprite):
    def __init__(self,pos,surf,groups):
        super().__init__(groups)
        self.image = surf
        self.rect = self.image.get_rect(topleft = pos)

这些都是老生常谈了

然后把sprites.py中的所有东西都导入到level.py中

from sprites import *

接下来在level.py的setup函数中创建这个精灵类的对象即可

def setup(self):
    self.player = Player((640,360),self.all_sprites)
    Generic(
        pos = (0,0),
        surf = pygame.image.load('../graphics/world/ground.png').convert_alpha(),
        groups = self.all_sprites
    )

如此，就完成了Generic类的对象的创建，并且自动把它加入到了all_sprites这个精灵组里，随着精灵组的draw函数被调用，地板也被绘制了出来

2.z轴的引入

不过此时我们会发现，运行程序后只能看到游戏地板的图片，看不到主角了

因为我们先创建了player这个精灵，再创建了地板这个精灵，绘制的顺序也是这样的，这就导致了地板把我们的主角给覆盖掉了

因此我们需要引入z轴的概念。

这是一个2D游戏，这里所谓的Z轴就是告诉系统先画什么再画什么

这里就要提及settings里面的一个常量了

LAYERS这个常量是一个字典，里面的key值是需要绘制的事物的名称，value值是它的优先级，其中优先级的数字越大，表示越晚绘制。

直到目前，我们只创建了其中的两个，一个是"ground"，也就是地板，它的优先级是1，另一个是"main"，也就是主角，它的优先级是7

按照这个优先级，系统就直到，应该先绘制地板，再绘制主角，这样主角就会覆盖到地板上面了

所以我们分别给Player和Generic设置z这个变量

原作者在设置这两个类的z轴变量时，分别在player里直接赋值，而在Generic里面采取了传参赋值的方式，实在是很麻烦，如果是我就直接在Generic里面写self.z = LAYERS['ground']了。但是怕以后会用得到，还是按照原作者的方式写的。

这样我们还需要在创建这个对象的时候把z轴作为一个参数传递进去

3.重写精灵组的draw方法

这样，我我们在绘制精灵的时候，不仅要根据z轴的大小来决定先绘制谁，而且还要达到摄像机跟随主角的效果，作者提供的精灵组的draw方法显然是不能满足我们的需求的，因此我们需要重写它的draw方法

首先创建一个CameraGroup类继承自pygame提供的精灵组类，并且与此同时我们的all_sprites就不能是精灵组类的对象了，而是我们自己新写的CameraGroup类的对象。

接下来，我们获取游戏窗口，并且开始重写draw函数，实际上我们并不是重写draw函数，只是写了一个名为custon_draw的函数，并且在level类的run函数中不再调用draw

函数而是改为调用custon_draw函数而已

要实现按照z值的顺序绘制精灵实际上很简单，只需要用for循环遍历LAYERS里面的值，并且每次循环绘制出所有z值与当前所需要绘制的z值相同的精灵即可

最后，不要忘了把level的run函数里面调用的draw函数改为我们重新写的custon_draw函数

这样，我们再次运行程序，就会发现我们的主角跑到了地板的上面

接着，就是本节另一个重要的部分，摄像机的制作了

实际上，大部分的2D游戏，看似是主角在移动，实际上是背景图片在移动，主角一直牢牢锁定在屏幕的中间，如果要达到主角向右移动的效果，就让背景图片向左移动

这应用到了一些数学的知识，让我们先看看代码怎么写，再来详细讲一下里面的每一个变量代表了什么

代码增加的部分如图红框所示

self.offset是一个偏移量，代表了玩家 的实际坐标 距离屏幕的中心 的一个向量

就比如游戏一开始，玩家就在屏幕的正中间

图中绿色的方框代表我们的游戏窗口，红色的点代表玩家，此时玩家的坐标为(SCREEN_WIDTH/2，SCREEN_HEIGHT/2)

由self.offset.x = player.rect.centerx - SCREEN_WIDTH / 2         self.offset.y = player.rect.centery - SCREEN_HEIGHT / 2  可以得知，此时的self.offset = (0,0)

又由self.display_surface.blit(sprite.image, offset_rect)可知，我们在进行绘制精灵的时候，绘制的坐标并不是精灵实际的坐标，而是offset_rect这个变量

而offset_rect = sprite.rect.copy()     offset_rect.center -= self.offset可知，offset_rect这个变量是由精灵的实际坐标减去self.offset带来的

那么此时，offset_rect = player.rect.center - self.offset = (SCREEN_WIDTH/2，SCREEN_HEIGHT/2) - (0,0) =  (SCREEN_WIDTH/2，SCREEN_HEIGHT/2)

所以此时玩家还是绘制在屏幕的正中间

而当玩家进行移动后，跑到了如图所示的位置

其中红色的点是玩家的真是坐标(player.rect.center)

那么self.offset就是 红色的点 减去 窗口的中心点 也就是 图中黑色的线指向的这个矢量

那么offset_rect 就是玩家的真实位置 减去这个矢量self.offset，就又回到了 游戏窗口的中心点

而我们绘制玩家的时候，实际上是把它绘制到offset_rect上，所以，无论玩家的真实坐标在哪，我们始终把它绘制到游戏窗口的正中间

我们可以在代码中加入如下的内容，来验证我们的推算是否属实：

可以看到，游戏一开始，主角在屏幕中间，player_rect_center = (640,360)

此时的offset_rect = (554,298)，因为player_rect_center是取的主角的图像的中心点的坐标，而offset_rect是取得精灵图像的左上角的坐标，所以实际上这两个绘制出来是在同一个地方的

然后主角进行移动，player_rect_center不断在变换，但是offset_rect始终是(554,298)，所以游戏的主角一直被绘制在窗口的正中间

接下来是游戏的背景绘制

游戏一开始，玩家的实际位置在窗口的中间，如图所示，绿色为游戏窗口，黄色为游戏的背景图片，红色的点为玩家

然后玩家移动到如图所示的红点位置，self.offset就是图中黑色箭头的向量

然后玩家绘制的位置就是玩家图片的位置减去这个黑色的向量，就是图中紫色的点

同样的，游戏背景绘制的位置也是游戏原本的位置减去这个黑色的向量，也就是图中紫色方框的位置

这样绿色的游戏窗口展示的游戏的背景也会随之改变

达到了玩家固定在窗口中间不动，背景图片移动的摄像机效果

三.完整代码

sprites.py:

import pygame
from settings import *
class Generic(pygame.sprite.Sprite):
    def __init__(self,pos,surf,groups,z = LAYERS['main']):
        super().__init__(groups)
        self.image = surf
        self.rect = self.image.get_rect(topleft = pos)
        self.z = z

player.py:

其中player.py只是给Player类中增加了一个名为self.z的变量

import pygame
from settings import *
from support import *
from timer import Timer
class Player(pygame.sprite.Sprite):
    def __init__(self,pos,group):
        #这个参数可以传一个精灵组，这样就会自动把该精灵加入到该精灵组中
        #也可以为空，这样需要在外面手动调用精灵组的add函数来将这个精灵加入到精灵组中
        super().__init__(group)
        self.import_assets()
        self.status = 'down_idle'
        self.frame_index = 0
        #这里的变量名一定要叫image，因为这是它父类Sprite规定的
        self.image = self.animations[self.status][self.frame_index]
        #这个get_rect()也是父类中设置的方法
        #返回值是有很多，大概有x,y,centerx,centery,center,width,height这几类
        #大概就是image的x坐标，y坐标，中心的x坐标，中心的y坐标，中心点的坐标，宽度，高度等
        #参数可以不填，那么位置就默认是(0,0)，也可以填一个列表，比如(100,100)，那么初始的位置就是(100,100)
        #也可以是center = 一个坐标，这表示设置该图像的中心在这个坐标上
        #同样的这里的变量名也一定要叫rect，这是父类规定的
        self.rect = self.image.get_rect(center = pos)
        #z轴
        self.z = LAYERS['main']
        #创建一个二维的向量，参数不填默认是(0,0)
        self.direction = pygame.math.Vector2()#速度的方向
        self.pos = pygame.math.Vector2(self.rect.center)#位置
        self.speed = 200#速度
        self.timers = {
            'tool use':Timer(350,self.use_tool),
            'tool switch': Timer(200),
            'seed use': Timer(350, self.use_seed),
            'seed switch': Timer(200),
        }
        self.tools = ['hoe', 'axe', 'water']
        self.tool_index = 0
        self.selected_tool = self.tools[self.tool_index]
        self.seeds = ['corn', 'tomato']
        self.seed_index = 0
        self.selected_seed = self.seeds[self.seed_index]
    def use_tool(self):
        pass
    def use_seed(self):
        pass
    def import_assets(self):
        self.animations = {'up': [], 'down': [], 'left': [], 'right': [],
                           'right_idle': [], 'left_idle': [], 'up_idle': [], 'down_idle': [],
                           'right_hoe': [], 'left_hoe': [], 'up_hoe': [], 'down_hoe': [],
                           'right_axe': [], 'left_axe': [], 'up_axe': [], 'down_axe': [],
                           'right_water': [], 'left_water': [], 'up_water': [], 'down_water': []}
        for animation in self.animations.keys():
            full_path = '../graphics/character/' + animation
            self.animations[animation] = import_folder(full_path)
    def animate(self, dt):
        # 4 是比较合适的数字
        # 数字 决定做动作的快慢
        # 做一个动作需要 1/4秒
        # fream_index += dt 的话，要经过1s，才能变成下一个整数，做下一个动作
        # fream_index += 4*dt，那么增加的速度就快了四倍，经过1/4秒就能做下一个动作了
        self.frame_index += 4 * dt
        # print(self.frame_index)
        if self.frame_index >= len(self.animations[self.status]):
            self.frame_index = 0
        self.image = self.animations[self.status][int(self.frame_index)]
    def input(self):
        keys = pygame.key.get_pressed()
        #已经在使用工具的时候，停止对按键的检测
        if not self.timers['tool use'].active:
            if keys[pygame.K_UP]:
                self.direction.y = -1
                self.status = 'up'
            elif keys[pygame.K_DOWN]:
                self.direction.y = 1
                self.status = 'down'
            else:
                self.direction.y = 0#不要忘记加上这一句，不然按下键盘后再松开也不会停
            if keys[pygame.K_RIGHT]:
                self.direction.x = 1
                self.status = 'right'
            elif keys[pygame.K_LEFT]:
                self.direction.x = -1
                self.status = 'left'
            else:
                self.direction.x = 0
            if keys[pygame.K_SPACE]:
                #启动计时器
                self.timers['tool use'].activate()
                #实用工具的时候是不能移动的
                self.direction = pygame.math.Vector2()
                #要从第一张图片开始绘制
                self.frame_index = 0
            #按下左边的shift键更换工具
            if keys[pygame.K_LSHIFT] and not self.timers['tool switch'].active:
                self.timers['tool switch'].activate()
                self.tool_index += 1
                self.tool_index = self.tool_index if self.tool_index  0:#这表示如果有按键按下，如果向量里面全是0，会使归一化中的数学计算出现错误
            self.direction = self.direction.normalize()
        #位移 = 方向 * 速度 * 变化的时间()
        self.pos.x += self.direction.x * self.speed * dt
        self.rect.centerx = self.pos.x
        self.pos.y += self.direction.y * self.speed * dt
        self.rect.centery = self.pos.y
    def update(self,dt):
        self.input()
        self.get_status()
        self.update_timers()
        self.move(dt)
        self.animate(dt)

level.py:

import pygame
from settings import *
from player import Player
from overlay import Overlay
from sprites import *
class Level():
    def __init__(self):
        #得到屏幕的画面，得到的这个画面与main.py中的screen相同
        self.display_surface = pygame.display.get_surface()
        #创建精灵组
        self.all_sprites = CameraGroup()
        #调用setup方法
        self.setup()
        #创建工具和种子显示图层
        self.overlay = Overlay(self.player)
    def setup(self):
        self.player = Player((640,360),self.all_sprites)
        Generic(
            pos = (0,0),
            surf = pygame.image.load('../graphics/world/ground.png').convert_alpha(),
            groups = self.all_sprites,
            z = LAYERS['ground']
        )
    def run(self,dt):
        #窗口的背景设为黑色
        self.display_surface.fill('black')
        #调用精灵组的draw方法
        self.all_sprites.custom_draw(self.player)
        #调用精灵组的update方法
        self.all_sprites.update(dt)
        self.overlay.display()
class CameraGroup(pygame.sprite.Group):
    def __init__(self):
        super().__init__()
        #获取窗口
        self.display_surface = pygame.display.get_surface()
        #这是一个偏移量，代表的是玩家的实际位置与屏幕中间的矢量
        self.offset = pygame.math.Vector2()
    def custom_draw(self,player):
        self.offset.x = player.rect.centerx - SCREEN_WIDTH / 2
        self.offset.y = player.rect.centery - SCREEN_HEIGHT / 2
        for layer in LAYERS.values():#按照z轴从小到达绘制
            for sprite in self.sprites():
                if sprite.z == layer:#如果该精灵的z值等于当前要绘制的z值，才绘制
                    offset_rect = sprite.rect.copy()
                    offset_rect.center -= self.offset
                    #if sprite == player:
                        #print("player.rect.center为：（" +
                             # str(player.rect.centerx)+"，" + str(player.rect.centery)+"）")
                        #print("offset_rect为：（" + str(offset_rect.x)
                             # +"，" +str(offset_rect.y)+"）")
                    self.display_surface.blit(sprite.image,offset_rect)