Pygame を使ってフラッピーバードを作成する

はじめに

このプロジェクトでは、Pygame ライブラリを使って簡単なフラッピーバードゲームを作成するコードを、管理可能なステップに分解します。これらのステップに従うことで、ゲームを徐々に構築する方法を学ぶことができます。各ステップには、簡単な説明、コードブロック、およびコメントが含まれており、ゲームの理解と実装を支援します。始めましょう！

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

• フラッピーバードゲーム用のプロジェクトファイルをセットアップする方法
• ゲームのウェルカムアニメーションを表示する方法
• フラッピーバードのメインゲームロジックを実装する方法
• プレイヤーが負けたときにゲームオーバー画面を表示する方法
• ゲーム用のヘルパー関数を定義する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• Pygame ライブラリを使ってゲームを作成する
• ゲームループ、衝突、アニメーションなどのゲーム開発概念を理解する

プロジェクトファイルを作成する

まず、フラッピーバードゲーム用のプロジェクトファイルを作成します。

cd ~/project
touch flappy.py
sudo pip install pygame

このステップでは、基本的なプロジェクト構造をセットアップし、必要なライブラリをインポートします。また、いくつかの定数を定義し、初期のゲームアセットを読み込みます。

from itertools import cycle
import random
import sys
import pygame
from pygame.locals import *

FPS = 30
SCREENWIDTH = 288
SCREENHEIGHT = 512
PIPEGAPSIZE = 100  ## gap between upper and lower part of pipe
BASEY = SCREENHEIGHT * 0.79
## image and hitmask  dicts
IMAGES, HITMASKS = {}, {}

## list of all possible players (tuple of 3 positions of flap)
PLAYERS_LIST = (
    ## red bird
    (
        "data/sprites/redbird-upflap.png",
        "data/sprites/redbird-midflap.png",
        "data/sprites/redbird-downflap.png",
    ),
    ## blue bird
    (
        "data/sprites/bluebird-upflap.png",
        "data/sprites/bluebird-midflap.png",
        "data/sprites/bluebird-downflap.png",
    ),
    ## yellow bird
    (
        "data/sprites/yellowbird-upflap.png",
        "data/sprites/yellowbird-midflap.png",
        "data/sprites/yellowbird-downflap.png",
    ),
)

## list of backgrounds
BACKGROUNDS_LIST = (
    "data/sprites/background-day.png",
    "data/sprites/background-night.png",
)

## list of pipes
PIPES_LIST = (
    "data/sprites/pipe-green.png",
    "data/sprites/pipe-red.png",
)

• ゲームに必要なライブラリをインポートします。ゲーム作成に pygame、ランダム要素生成に random、システム関連関数に sys、キー定数に pygame.locals が含まれます。
• pygame.init() で Pygame を初期化します。
• FPS、SCREENWIDTH、SCREENHEIGHT、PIPEGAPSIZE、BASEY などの定数を定義して、ゲームのサイズと速度を設定します。
• ゲームアセットを格納するための空の辞書 (IMAGES と HITMASKS) を作成します。
• プレイヤー、背景、パイプのアセットのリストをファイルパスを使って定義します。

ウェルカムアニメーションを表示する

このステップでは、フラッピーバードゲームのウェルカム画面のアニメーションを作成します。

def showWelcomeAnimation():
    """Shows welcome screen animation of flappy bird"""
    ## index of player to blit on screen
    playerIndex = 0
    playerIndexGen = cycle([0, 1, 2, 1])
    ## iterator used to change playerIndex after every 5th iteration
    loopIter = 0

    playerx = int(SCREENWIDTH * 0.2)
    playery = int((SCREENHEIGHT - IMAGES["player"][0].get_height()) / 2)

    messagex = int((SCREENWIDTH - IMAGES["message"].get_width()) / 2)
    messagey = int(SCREENHEIGHT * 0.12)

    basex = 0
    ## amount by which base can maximum shift to left
    baseShift = IMAGES["base"].get_width() - IMAGES["background"].get_width()

    ## player shm for up-down motion on welcome screen
    playerShmVals = {"val": 0, "dir": 1}

    while True:
        for event in pygame.event.get():
            if event.type == QUIT or (event.type == KEYDOWN and event.key == K_ESCAPE):
                pygame.quit()
                sys.exit()
            if event.type == KEYDOWN and (event.key == K_SPACE or event.key == K_UP):
                ## make first flap sound and return values for mainGame
                return {
                    "playery": playery + playerShmVals["val"],
                    "basex": basex,
                    "playerIndexGen": playerIndexGen,
                }

        ## adjust playery, playerIndex, basex
        if (loopIter + 1) % 5 == 0:
            playerIndex = next(playerIndexGen)
        loopIter = (loopIter + 1) % 30
        basex = -((-basex + 4) % baseShift)
        playerShm(playerShmVals)

        ## draw sprites
        SCREEN.blit(IMAGES["background"], (0, 0))
        SCREEN.blit(
            IMAGES["player"][playerIndex], (playerx, playery + playerShmVals["val"])
        )
        SCREEN.blit(IMAGES["message"], (messagex, messagey))
        SCREEN.blit(IMAGES["base"], (basex, BASEY))

        pygame.display.update()
        FPSCLOCK.tick(FPS)

• ウェルカム画面のアニメーションを表示する責任を持つ showWelcomeAnimation 関数を定義します。
• この関数は、アニメーション用の変数を設定し、ゲームを開始するためのユーザー入力を処理します。
• ゲームを開始するためのユーザー入力をチェックしながら、アニメーションフレームを更新するためのループを使用します。
• アニメーションには、羽ばたく鳥と画面に表示されるメッセージが含まれます。
• pygame.display.update() 関数を使用して表示を更新し、FPSCLOCK.tick(FPS) がフレームレートを制御します。

メインゲームロジック

このステップでは、フラッピーバードのメインゲームロジックを実装します。

def mainGame(movementInfo):
    score = playerIndex = loopIter = 0
    playerIndexGen = movementInfo["playerIndexGen"]
    playerx, playery = int(SCREENWIDTH * 0.2), movementInfo["playery"]

    basex = movementInfo["basex"]
    baseShift = IMAGES["base"].get_width() - IMAGES["background"].get_width()

    ## get 2 new pipes to add to upperPipes lowerPipes list
    newPipe1 = getRandomPipe()
    newPipe2 = getRandomPipe()

    ## list of upper pipes
    upperPipes = [
        {"x": SCREENWIDTH + 200, "y": newPipe1[0]["y"]},
        {"x": SCREENWIDTH + 200 + (SCREENWIDTH / 2), "y": newPipe2[0]["y"]},
    ]

    ## list of lowerpipe
    lowerPipes = [
        {"x": SCREENWIDTH + 200, "y": newPipe1[1]["y"]},
        {"x": SCREENWIDTH + 200 + (SCREENWIDTH / 2), "y": newPipe2[1]["y"]},
    ]

    dt = FPSCLOCK.tick(FPS) / 1000
    pipeVelX = -128 * dt

    ## player velocity, max velocity, downward acceleration, acceleration on flap
    playerVelY = -9  ## player's velocity along Y, default same as playerFlapped
    playerMaxVelY = 10  ## max vel along Y, max descend speed
    playerMinVelY = -8  ## min vel along Y, max ascend speed
    playerAccY = 1  ## players downward acceleration
    playerRot = 45  ## player's rotation
    playerVelRot = 3  ## angular speed
    playerRotThr = 20  ## rotation threshold
    playerFlapAcc = -9  ## players speed on flapping
    playerFlapped = False  ## True when player flaps

    while True:
        for event in pygame.event.get():
            if event.type == QUIT or (event.type == KEYDOWN and event.key == K_ESCAPE):
                pygame.quit()
                sys.exit()
            if event.type == KEYDOWN and (event.key == K_SPACE or event.key == K_UP):
                if playery > -2 * IMAGES["player"][0].get_height():
                    playerVelY = playerFlapAcc
                    playerFlapped = True

        ## check for crash here
        crashTest = checkCrash(
            {"x": playerx, "y": playery, "index": playerIndex}, upperPipes, lowerPipes
        )
        if crashTest[0]:
            return {
                "y": playery,
                "groundCrash": crashTest[1],
                "basex": basex,
                "upperPipes": upperPipes,
                "lowerPipes": lowerPipes,
                "score": score,
                "playerVelY": playerVelY,
                "playerRot": playerRot,
            }

        ## check for score
        playerMidPos = playerx + IMAGES["player"][0].get_width() / 2
        for pipe in upperPipes:
            pipeMidPos = pipe["x"] + IMAGES["pipe"][0].get_width() / 2
            if pipeMidPos <= playerMidPos < pipeMidPos + 4:
                score += 1

        ## playerIndex basex change
        if (loopIter + 1) % 3 == 0:
            playerIndex = next(playerIndexGen)
        loopIter = (loopIter + 1) % 30
        basex = -((-basex + 100) % baseShift)

        ## rotate the player
        if playerRot > -90:
            playerRot -= playerVelRot

        ## player's movement
        if playerVelY < playerMaxVelY and not playerFlapped:
            playerVelY += playerAccY
        if playerFlapped:
            playerFlapped = False

            ## more rotation to cover the threshold (calculated in visible rotation)
            playerRot = 45

        playerHeight = IMAGES["player"][playerIndex].get_height()
        playery += min(playerVelY, BASEY - playery - playerHeight)

        ## move pipes to left
        for uPipe, lPipe in zip(upperPipes, lowerPipes):
            uPipe["x"] += pipeVelX
            lPipe["x"] += pipeVelX

        ## add new pipe when first pipe is about to touch left of screen
        if 3 > len(upperPipes) > 0 and 0 < upperPipes[0]["x"] < 5:
            newPipe = getRandomPipe()
            upperPipes.append(newPipe[0])
            lowerPipes.append(newPipe[1])

        ## remove first pipe if its out of the screen
        if len(upperPipes) > 0 and upperPipes[0]["x"] < -IMAGES["pipe"][0].get_width():
            upperPipes.pop(0)
            lowerPipes.pop(0)

        ## draw sprites
        SCREEN.blit(IMAGES["background"], (0, 0))

        for uPipe, lPipe in zip(upperPipes, lowerPipes):
            SCREEN.blit(IMAGES["pipe"][0], (uPipe["x"], uPipe["y"]))
            SCREEN.blit(IMAGES["pipe"][1], (lPipe["x"], lPipe["y"]))

        SCREEN.blit(IMAGES["base"], (basex, BASEY))
        ## print score so player overlaps the score
        showScore(score)

        ## Player rotation has a threshold
        visibleRot = playerRotThr
        if playerRot <= playerRotThr:
            visibleRot = playerRot

        playerSurface = pygame.transform.rotate(
            IMAGES["player"][playerIndex], visibleRot
        )
        SCREEN.blit(playerSurface, (playerx, playery))

        pygame.display.update()
        FPSCLOCK.tick(FPS)

• フラッピーバードゲームのコアロジックを含む mainGame 関数を定義します。
• この関数は、ユーザー入力を処理し、ゲーム状態を更新し、衝突をチェックし、スコアを追跡します。
• ゲームループは継続的に実行され、ゲームの表示とロジックを更新します。
• プレイヤーの操作はキーイベント（スペースまたは上矢印）を通じて処理されます。
• この関数は、パイプや地面との衝突をチェックし、スコアを更新し、鳥のアニメーションを管理します。
• ゲームループは、プレイヤーがクラッシュするかゲームを終了するまで続けます。

ゲームオーバー画面を表示する

このステップでは、プレイヤーが負けたときに表示されるゲームオーバー画面を作成します。

def showGameOverScreen(crashInfo):
    """crashes the player down and shows gameover image"""
    score = crashInfo["score"]
    playerx = SCREENWIDTH * 0.2
    playery = crashInfo["y"]
    playerHeight = IMAGES["player"][0].get_height()
    playerVelY = crashInfo["playerVelY"]
    playerAccY = 2
    playerRot = crashInfo["playerRot"]
    playerVelRot = 7

    basex = crashInfo["basex"]

    upperPipes, lowerPipes = crashInfo["upperPipes"], crashInfo["lowerPipes"]

    while True:
        for event in pygame.event.get():
            if event.type == QUIT or (event.type == KEYDOWN and event.key == K_ESCAPE):
                pygame.quit()
                sys.exit()
            if event.type == KEYDOWN and (event.key == K_SPACE or event.key == K_UP):
                if playery + playerHeight >= BASEY - 1:
                    return

        ## player y shift
        if playery + playerHeight < BASEY - 1:
            playery += min(playerVelY, BASEY - playery - playerHeight)

        ## player velocity change
        if playerVelY < 15:
            playerVelY += playerAccY

        ## rotate only when it's a pipe crash
        if not crashInfo["groundCrash"]:
            if playerRot > -90:
                playerRot -= playerVelRot

        ## draw sprites
        SCREEN.blit(IMAGES["background"], (0, 0))

        for uPipe, lPipe in zip(upperPipes, lowerPipes):
            SCREEN.blit(IMAGES["pipe"][0], (uPipe["x"], uPipe["y"]))
            SCREEN.blit(IMAGES["pipe"][1], (lPipe["x"], lPipe["y"]))

        SCREEN.blit(IMAGES["base"], (basex, BASEY))
        showScore(score)

        playerSurface = pygame.transform.rotate(IMAGES["player"][1], playerRot)
        SCREEN.blit(playerSurface, (playerx, playery))
        SCREEN.blit(IMAGES["gameover"], (50, 180))

        FPSCLOCK.tick(FPS)
        pygame.display.update()

• showGameOverScreen 関数は、プレイヤーが負けたときにゲームオーバー画面を表示します。
• この関数は、プレイヤーの最終スコアを表示し、効果音を鳴らし、ゲームを再開するためにスペースまたは上矢印を押すのを待ちます。
• アニメーションには、地面に落ちる鳥と画面に表示されるゲームオーバーメッセージが含まれます。

ヘルパー関数を定義する

このステップでは、ゲームで使用されるヘルパー関数を定義します。

def playerShm(playerShm):
    """oscillates the value of playerShm['val'] between 8 and -8"""
    if abs(playerShm["val"]) == 8:
        playerShm["dir"] *= -1

    if playerShm["dir"] == 1:
        playerShm["val"] += 1
    else:
        playerShm["val"] -= 1


def getRandomPipe():
    """returns a randomly generated pipe"""
    ## y of gap between upper and lower pipe
    gapY = random.randrange(0, int(BASEY * 0.6 - PIPEGAPSIZE))
    gapY += int(BASEY * 0.2)
    pipeHeight = IMAGES["pipe"][0].get_height()
    pipeX = SCREENWIDTH + 10

    return [
        {"x": pipeX, "y": gapY - pipeHeight},  ## upper pipe
        {"x": pipeX, "y": gapY + PIPEGAPSIZE},  ## lower pipe
    ]


def showScore(score):
    """displays score in center of screen"""
    scoreDigits = [int(x) for x in list(str(score))]
    totalWidth = 0  ## total width of all numbers to be printed

    for digit in scoreDigits:
        totalWidth += IMAGES["numbers"][digit].get_width()

    Xoffset = (SCREENWIDTH - totalWidth) / 2

    for digit in scoreDigits:
        SCREEN.blit(IMAGES["numbers"][digit], (Xoffset, SCREENHEIGHT * 0.1))
        Xoffset += IMAGES["numbers"][digit].get_width()


def checkCrash(player, upperPipes, lowerPipes):
    """returns True if player collides with base or pipes."""
    pi = player["index"]
    player["w"] = IMAGES["player"][0].get_width()
    player["h"] = IMAGES["player"][0].get_height()

    ## if player crashes into ground
    if player["y"] + player["h"] >= BASEY - 1:
        return [True, True]
    else:
        playerRect = pygame.Rect(player["x"], player["y"], player["w"], player["h"])
        pipeW = IMAGES["pipe"][0].get_width()
        pipeH = IMAGES["pipe"][0].get_height()

        for uPipe, lPipe in zip(upperPipes, lowerPipes):
            ## upper and lower pipe rects
            uPipeRect = pygame.Rect(uPipe["x"], uPipe["y"], pipeW, pipeH)
            lPipeRect = pygame.Rect(lPipe["x"], lPipe["y"], pipeW, pipeH)

            ## player and upper/lower pipe hitmasks
            pHitMask = HITMASKS["player"][pi]
            uHitmask = HITMASKS["pipe"][0]
            lHitmask = HITMASKS["pipe"][1]

            ## if bird collided with upipe or lpipe
            uCollide = pixelCollision(playerRect, uPipeRect, pHitMask, uHitmask)
            lCollide = pixelCollision(playerRect, lPipeRect, pHitMask, lHitmask)

            if uCollide or lCollide:
                return [True, False]

    return [False, False]


def pixelCollision(rect1, rect2, hitmask1, hitmask2):
    """Checks if two objects collide and not just their rects"""
    rect = rect1.clip(rect2)

    if rect.width == 0 or rect.height == 0:
        return False

    x1, y1 = rect.x - rect1.x, rect.y - rect1.y
    x2, y2 = rect.x - rect2.x, rect.y - rect2.y

    for x in range(rect.width):
        for y in range(rect.height):
            if hitmask1[x1 + x][y1 + y] and hitmask2[x2 + x][y2 + y]:
                return True
    return False


def getHitmask(image):
    """returns a hitmask using an image's alpha."""
    mask = []
    for x in range(image.get_width()):
        mask.append([])
        for y in range(image.get_height()):
            mask[x].append(bool(image.get_at((x, y))[3]))
    return mask

• playerShm 関数は、playerShm["val"] の値を 8 と -8 の間で振動させます。これは、ウェルカム画面で鳥を上下に動かすために使用されます。
• getRandomPipe 関数は、ランダムに生成されたパイプを返します。上下のパイプ間にランダムな隙間を生成します。
• showScore 関数は、画面の中央にスコアを表示します。IMAGES["numbers"] リストを使用してスコアを表示します。
• checkCrash 関数は、プレイヤーが地面またはパイプと衝突した場合に True を返します。衝突をチェックするために pixelCollision 関数を使用します。
• pixelCollision 関数は、2 つのオブジェクトが衝突するかどうかをチェックし、単にそれらの矩形だけでなく、それらのヒットマスクもチェックします。プレイヤーとパイプのヒットマスクを取得するために getHitmask 関数を使用します。
• getHitmask 関数は、画像のアルファ値を使用してヒットマスクを返します。画像の各ピクセルのアルファ値を取得するために image.get_at 関数を使用します。

メイン関数

このステップでは、ゲームを初期化し、ゲームループを開始するメイン関数を定義します。

def main():
    global SCREEN, FPSCLOCK
    pygame.init()
    FPSCLOCK = pygame.time.Clock()
    SCREEN = pygame.display.set_mode((SCREENWIDTH, SCREENHEIGHT))
    pygame.display.set_caption("Flappy Bird")

    ## numbers sprites for score display
    IMAGES["numbers"] = (
        pygame.image.load("data/sprites/0.png").convert_alpha(),
        pygame.image.load("data/sprites/1.png").convert_alpha(),
        pygame.image.load("data/sprites/2.png").convert_alpha(),
        pygame.image.load("data/sprites/3.png").convert_alpha(),
        pygame.image.load("data/sprites/4.png").convert_alpha(),
        pygame.image.load("data/sprites/5.png").convert_alpha(),
        pygame.image.load("data/sprites/6.png").convert_alpha(),
        pygame.image.load("data/sprites/7.png").convert_alpha(),
        pygame.image.load("data/sprites/8.png").convert_alpha(),
        pygame.image.load("data/sprites/9.png").convert_alpha(),
    )

    ## game over sprite
    IMAGES["gameover"] = pygame.image.load("data/sprites/gameover.png").convert_alpha()
    ## message sprite for welcome screen
    IMAGES["message"] = pygame.image.load("data/sprites/message.png").convert_alpha()
    ## base (ground) sprite
    IMAGES["base"] = pygame.image.load("data/sprites/base.png").convert_alpha()

    while True:
        ## select random background sprites
        randBg = random.randint(0, len(BACKGROUNDS_LIST) - 1)
        IMAGES["background"] = pygame.image.load(BACKGROUNDS_LIST[randBg]).convert()

        ## select random player sprites
        randPlayer = random.randint(0, len(PLAYERS_LIST) - 1)
        IMAGES["player"] = (
            pygame.image.load(PLAYERS_LIST[randPlayer][0]).convert_alpha(),
            pygame.image.load(PLAYERS_LIST[randPlayer][1]).convert_alpha(),
            pygame.image.load(PLAYERS_LIST[randPlayer][2]).convert_alpha(),
        )

        ## select random pipe sprites
        pipeindex = random.randint(0, len(PIPES_LIST) - 1)
        IMAGES["pipe"] = (
            pygame.transform.flip(
                pygame.image.load(PIPES_LIST[pipeindex]).convert_alpha(), False, True
            ),
            pygame.image.load(PIPES_LIST[pipeindex]).convert_alpha(),
        )

        ## hitmask for pipes
        HITMASKS["pipe"] = (
            getHitmask(IMAGES["pipe"][0]),
            getHitmask(IMAGES["pipe"][1]),
        )

        ## hitmask for player
        HITMASKS["player"] = (
            getHitmask(IMAGES["player"][0]),
            getHitmask(IMAGES["player"][1]),
            getHitmask(IMAGES["player"][2]),
        )

        movementInfo = showWelcomeAnimation()
        crashInfo = mainGame(movementInfo)
        showGameOverScreen(crashInfo)

• main 関数は、ゲームを初期化し、表示を設定し、ゲームループを開始します。
• 画像を含むゲームアセットを読み込み、背景、プレイヤー、パイプのスプライトをランダムに選択します。
• ゲームループは、ウェルカムアニメーション、メインゲーム、ゲームオーバー画面を処理します。
• ゲームは、プレイヤーがゲームを終了するか、ウィンドウを閉じるまで継続してループします。

ゲームを実行する

このステップでは、フラッピーバードゲームを実行します。

if __name__ == "__main__":
    main()

• __name__ == "__main__" の条件は、現在のモジュールが自身で実行されているか、別のモジュールによってインポートされているかをチェックします。
• 現在のモジュールが自身で実行されている場合、ゲームを開始するために main 関数が呼び出されます。

すべてのステップを完了したら、次のコマンドを使用してフラッピーバードゲームを実行できます。

cd ~/project
python flappy.py

まとめ

このプロジェクトでは、フラッピーバードゲームのコードを複数のステップに分割し、各ステップについて説明を提供しました。基本的なゲーム構造を作成し、プレイヤー入力を処理し、ゲーム状態を更新し、衝突をチェックし、ゲーム画面を表示する方法を学びました。これで、提供されたコードを使用してフラッピーバードゲームを実行して遊ぶことができます。ゲーム開発の旅を楽しんでください！