一日一技:用Python做遊戲有多簡單

語言: CN / TW / HK

攝影:產品經理

豬排飯磨芝麻

我520的公眾號圖片發了以後,有很多同學問我這個遊戲是怎麼做的,難不難。我就用兩篇文章來介紹一下,如果使用Python做遊戲。

這個遊戲是使用PyGame做的,貼圖素材是從 itch.io [1] 找的。我之前也沒有用過PyGame,這次屬於是現學現用,參考的教程是 PyGame: A Primer on Game Programming in Python [2]

用PyGame做遊戲非常簡單,我們今天第一篇文章,讓大家實現一個可以在地圖上移動的小豬。

基本框架

首先,無論你是做什麼遊戲,別管三七二十一,先把下面這段程式碼複製貼上到你的編輯器裡面。所有遊戲都需要這幾行程式碼:

import pygame


def main():
    pygame.init()
    pygame.display.set_caption('未聞Code:青南做的遊戲')  # 遊戲標題
    win = pygame.display.set_mode((800, 600))  # 視窗尺寸,寬800高600
    running = True
    while running:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:  # 點選左上角或者右上角的x關閉視窗時,停止程式
                running = False


main()

執行效果如下圖所示:

載入素材

現在,我們隨便找兩張圖片,一張作為背景,一張作為主角。尺寸不用太在意,差不多就可以了,因為我們可以用程式碼動態調整。下面兩張圖是我隨便找的素材,大家注意圖中紅框框住的地方,是這兩張圖片的尺寸。

我們使用如下程式碼載入圖片:

img_surf = pygame.image.load('圖片地址').convert_alpha()

其中的 .convert_alpha() 是保留png圖片的透明背景。如果你載入的圖片不png圖片,可以把 convert_alpha() 改成 convert()

如果要修改圖片尺寸,使用如下程式碼:

img_surf = pygame.transform.scale(img_surf, (寬, 高))

要把圖片顯示在視窗中,使用下面兩行程式碼:

win.blit(素材物件, (素材左上角的橫座標, 素材左上角的縱座標))
pygame.display.flip()

完整的程式碼如下:

import pygame


def main():
    pygame.init()
    pygame.display.set_caption('未聞Code:青南做的遊戲')  # 遊戲標題
    win = pygame.display.set_mode((800, 600))  # 視窗尺寸
    bg_small = pygame.image.load('bg.png').convert_alpha()
    bg_big = pygame.transform.scale(bg_small, (800, 600))
    pig = pygame.image.load('pig_in_car.png').convert_alpha()
    running = True
    while running:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:  # 點選左上角或者右上角的x關閉視窗時,停止程式
                running = False

        win.blit(bg_big, (0, 0))  # 背景圖最先載入,座標是(left, top)
        win.blit(pig, (200, 300))
        pygame.display.flip()


main()

執行效果如下圖所示:

需要注意的是, win.blitpygame.display.flip() 都要放到while迴圈裡面。其中 win.blit 的第一個引數是我們剛剛載入的素材物件。第二個引數是一個元組,標記這個圖片左上角在畫布上面的座標。整個畫布左上角對應座標 (0, 0) 。由於背景圖的尺寸也是 (800, 600) ,所以背景圖的左上角放到 (0, 0) ,就剛好可以鋪滿整個畫布。

哪裡找素材?

我們做的是一個畫素風格的遊戲,可以到 itch.io 上面找素材:

這個網站提高了大量的遊戲素材,並且絕大部分素材,在個人非商業用途的情況下是免費的。你找到自己喜歡的素材以後,就可以直接下載,整個過程你甚至都不需要登入(比國內的垃圾素材網站可良心多了)。

怎麼我的素材長這樣?

你下載了素材以後,可能會發現一件非常奇怪的事情,怎麼素材全部畫在一張圖上?

實際上,這就是業界慣例,做素材的人會把每一類素材排列到一張圖片上,你要用的時候,需要自己去裁剪。例如所有植物放在一張圖上,所有雕像放在一張圖上,地基貼圖也放在一張圖上。

上面我們演示用的背景圖,初看起來是一張綠色的圖,但是它實際上包含了多個地基元素,請注意我用紅框框住的部分:

在正式遊戲中,我們要把每一個基本元素拆出來,重新組合起來使用。重組的時候,有些元素要複製多份重複使用,有些元素要旋轉縮放。最終組合成下面這樣看起來 好看 的地圖:

一般來說,畫素風格的素材,尺寸大多是 16x1632x3264x64128x128 。素材作者正常情況下會提供裁剪說明。如果沒有提供的話,你也可以肉眼觀察,然後猜一猜。

例如我要從雕像素材裡面剪切出紅框框住的女神像:

那麼,我可以這樣寫程式碼:

img_surf = pygame.image.load('雕像素材.png').convert_alpha()
goddess= img_surf.subsurface(( 女神像左上角的橫座標 , 女神像左上角的縱座標, 女神像的寬, 女神像的高))

執行效果如下圖所示:

可能有同學問:為什麼女神的座標是這樣的呢?我只能說,這個座標是我試了很多次,試出來的。

使用小精靈來管理物件

除了背景圖,我們新增的每一個元素都是一個物件,例如上面的小豬和女神像。原則上來講,上面的程式碼就足夠讓你把遊戲做得漂亮了,想加什麼東西,就不停載入圖片素材,然後放到合適的位置就可以了。

但我們可以使用面向物件的設計方法,讓程式碼更容易維護,也更簡單。PyGame裡面,有一個類叫做 Sprite ,我們可以為每一個物件實現一個類,繼承 Sprite ,然後把物件的素材設定成 .surf 屬性,把物件的位置設定為 .rect 屬性。例如上面的程式碼,我們修改一下:

import pygame


class Bg(pygame.sprite.Sprite):
    def __init__(self):
        super(Bg, self).__init__()
        bg_small = pygame.image.load('bg.png').convert_alpha()
        grass_land = bg_small.subsurface((0, 0, 128, 128))
        self.surf = pygame.transform.scale(grass_land, (800, 600))
        self.rect = self.surf.get_rect(left=0, top=0)  # 左上角定位


class Pig(pygame.sprite.Sprite):
    def __init__(self):
        super(Pig, self).__init__()
        self.surf = pygame.image.load('pig_in_car.png').convert_alpha()
        self.rect = self.surf.get_rect(center=(400, 300))  # 中心定位


class Goddess(pygame.sprite.Sprite):
    def __init__(self):
        super(Goddess, self).__init__()
        building = pygame.image.load('building.png').convert_alpha()
        self.surf = building.subsurface(((7 * 64 - 10, 0, 50, 100)))
        self.rect = self.surf.get_rect(center=(500, 430))  # 女神像的中心放到畫布(500, 430)的位置


def main():
    pygame.init()
    pygame.display.set_caption('未聞Code:青南做的遊戲')  # 遊戲標題
    win = pygame.display.set_mode((800, 600))  # 視窗尺寸

    bg = Bg()
    goddess = Goddess()
    pig = Pig()
    all_sprites = [bg, goddess, pig]  # 注意新增順序,後新增的物件圖層在先新增的物件的圖層上面

    running = True
    while running:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:  # 點選左上角或者右上角的x關閉視窗時,停止程式
                running = False

        for sprite in all_sprites:
            win.blit(sprite.surf, sprite.rect)
        pygame.display.flip()


if __name__ == '__main__':
    main()

執行效果如下圖所示:

注意程式碼中的 all_sprites = [bg, goddess, pig] ,這裡我使用的是列表。後面會有更高階的資料結構 SpriteGroup 來儲存他們。今天使用列表就足夠了。

素材物件.get_rect() 會返回一個座標定位物件,這個物件有多個屬性,例如 .left , .top , .center , .width , .height 。在不傳引數的情況下,預設 .left=0 , .top=0 ,PyGame會自動根據這個物件的尺寸計算 .width.height.center 。我們可以通過傳入引數的形式主動設定。當你設定左上角的時候,它自動就能算出中心點的座標;當你傳入中心座標的時候,它自動就能算出左上角的座標。

理論上來講,在每個類裡面,素材物件可以用任何名字,不一定要用 .surf 。座標定位物件也不一定要用 .rect ,只要你在 win.blit 的時候對應起來就可以了。但是如果你統一使用 .surf.rect 會給你帶來很多好處。這一點我們到物體碰撞那個地方再講。因此我建議你就使用這兩個名字。

讓小豬動起來

既然是遊戲,那肯定要按鍵盤讓主角動起來。否則跟一幅畫有什麼區別呢?大家注意 main() 函式裡面的 while running 這個迴圈,如果你在迴圈裡面加上一行程式碼: print(111) ,你會發現當你執行這個遊戲的時候, 111 會一直不停的打印出來。

PyGame本質上,就是通過 win.blit 不停地畫圖,由於這個 while 迴圈每秒要執行很多次,如果每次執行的時候,我們讓 win.blit 的第二個引數,也就是素材物件的座標有細微的差異,那麼在人眼看起來,這個素材物件就在運動了。

我們的目標是按住鍵盤的上下左右方向鍵,小豬向4個不同的方向移動。在PyGame裡面,獲得鍵盤按住不放的鍵,使用如下程式碼實現:

keys = pygame.key.get_pressed()

它返回的是一個長得像列表的物件(但不是列表),當我們要判斷某個鍵是否被按下的時候,只需要判斷 if keys[想要判斷的鍵] ,如果返回 True ,說明被按住了。基於這個原理,我們來寫兩段程式碼。首先修改 Pig 類,新增一個 .update 方法:

class Pig(pygame.sprite.Sprite):
    def __init__(self):
        super(Pig, self).__init__()
        self.surf = pygame.image.load('pig_in_car.png').convert_alpha()
        self.rect = self.surf.get_rect(center=(400, 300))  # 中心定位

    def update(self, keys):
        if keys[pygame.K_LEFT]:
            self.rect.move_ip((-5, 0))  # 橫座標向左
        elif keys[pygame.K_RIGHT]:
            self.rect.move_ip((5, 0))  # 橫座標向右
        elif keys[pygame.K_UP]:
            self.rect.move_ip((0, -5))  #縱座標向上
        elif keys[pygame.K_DOWN]:
            self.rect.move_ip((0, 5))  # 縱座標向下

        # 防止小豬跑到螢幕外面
        if self.rect.left < 0:
            self.rect.left = 0
        if self.rect.right > 800:
            self.rect.right = 800
        if self.rect.top < 0:
            self.rect.top = 0
        if self.rect.bottom > 600:
            self.rect.bottom = 600

.update 方法接收一個引數 keys ,就是我們按鍵返回的長得像列表的物件。然後判斷是哪個方向鍵被按下了。根據被按下的鍵, .rect 座標定位物件修改相應方向的值。 rect.move_ip 這裡的 ipinplace 的簡寫,也就是修改 .rect 這個屬性自身。它的引數是一個元組,對應橫座標和縱座標。橫縱座標小於0表示向左或者向上,大於0表示向右或者向下。

原來的 main() 函式只需要在 win.blit 之前增加兩行程式碼:

keys = pygame.key.get_pressed()
pig.update(keys)

完整程式碼如下:

import pygame


class Bg(pygame.sprite.Sprite):
    def __init__(self):
        super(Bg, self).__init__()
        bg_small = pygame.image.load('bg.png').convert_alpha()
        grass_land = bg_small.subsurface((0, 0, 128, 128))
        self.surf = pygame.transform.scale(grass_land, (800, 600))
        self.rect = self.surf.get_rect(left=0, top=0)  # 左上角定位


class Pig(pygame.sprite.Sprite):
    def __init__(self):
        super(Pig, self).__init__()
        self.surf = pygame.image.load('pig_in_car.png').convert_alpha()
        self.rect = self.surf.get_rect(center=(400, 300))  # 中心定位

    def update(self, keys):
        if keys[pygame.K_LEFT]:
            self.rect.move_ip((-5, 0))
        elif keys[pygame.K_RIGHT]:
            self.rect.move_ip((5, 0))
        elif keys[pygame.K_UP]:
            self.rect.move_ip((0, -5))
        elif keys[pygame.K_DOWN]:
            self.rect.move_ip((0, 5))

        # 防止小豬跑到螢幕外面
        if self.rect.left < 0:
            self.rect.left = 0
        if self.rect.right > 800:
            self.rect.right = 800
        if self.rect.top < 0:
            self.rect.top = 0
        if self.rect.bottom > 600:
            self.rect.bottom = 600


class Goddess(pygame.sprite.Sprite):
    def __init__(self):
        super(Goddess, self).__init__()
        building = pygame.image.load('building.png').convert_alpha()
        self.surf = building.subsurface(((7 * 64 - 10, 0, 50, 100)))
        self.rect = self.surf.get_rect(center=(500, 430))  # 女神像的中心放到畫布(500, 430)的位置


def main():
    pygame.init()
    pygame.display.set_caption('未聞Code:青南做的遊戲')  # 遊戲標題
    win = pygame.display.set_mode((800, 600))  # 視窗尺寸

    bg = Bg()
    goddess = Goddess()
    pig = Pig()
    all_sprites = [bg, goddess, pig]  # 注意新增順序,後新增的物件圖層在先新增的物件的圖層上面

    running = True
    while running:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:  # 點選左上角或者右上角的x關閉視窗時,停止程式
                running = False

        keys = pygame.key.get_pressed()
        pig.update(keys)
        for sprite in all_sprites:
            win.blit(sprite.surf, sprite.rect)
        pygame.display.flip()


if __name__ == '__main__':
    main()

最後的執行效果如下面這個影片所示:

PyGame做遊戲真的非常簡單,只要會載入素材,就能做出一個還能看得過去的遊戲。今天我們學會了怎麼新增素材,怎麼捕獲鍵盤事件。

PyGame可以讀取Gif圖片,但是你會發現載入進來以後,Gif不會動。下一篇文章,我們來講講如何讓你控制的角色動起來,例如控制一個小娃娃,移動的時候,它的腳也跟著動。以及物件的碰撞檢測。

參考資料

[1]

itch.io: https://itch.io/game-assets

[2]

PyGame: A Primer on Game Programming in Python: https://realpython.com/pygame-a-primer