ページの切り替えがうまく動作しないのはなぜ？

ページ遷移に使っている変数が適切に更新されていない、または関数の呼び出し順に誤りがある可能性があります。

関数でページを分けるメリットは何ですか？

可読性が高まり、エラーの原因も特定しやすくなります。今後の拡張やデバッグがしやすくなるのも大きな利点です。

画像が正しく表示されない場合のチェックポイントは？

ファイルパスの誤りや画像ファイルの読み込み失敗が原因のことが多いです。パスの指定や拡張子に注意しましょう。

Python×pygame｜紙芝居風アプリの作り方と関数設計を丁寧に解説

ながみえ

一つ前のページでは画面にボタンを表示する方法について学習しました。

今回は簡単な紙芝居を作る方法について見ていきましょう。

Chapter１：pygame入門｜画面を表示しよう
Chapter２：簡単なノベルゲームを作ろう
・Chapter2-1：キーボードでキャラクターを動かそう
・Chapter2-2：マウスでキャラクターを動かそう
・Chapter2-3：画面にボタンを表示しよう
・Chapter2-4：簡単な紙芝居を作ろう ◁今回はここ
・Chapter2-5：簡単なノベルゲームを作ろう
Chapter３：簡単なアクションゲームを作ろう
Chapter４：ブロック崩しを作ろう
Chapter５：シューティングゲームを作ろう
Chapter６：pygameのお役立ち情報

ゲームやアプリの中には、ストーリーを進めるような「紙芝居」形式のシステムが使われることがあります。

例えば、画面に表示される画像をクリックして次のシーンへ進めたり、背景やキャラクターを切り替えながら物語を展開させたりするような仕組みです。

こうした紙芝居のような表現は、ノベルゲームや教育用のスライド型アプリなど、さまざまな場面で活用できます。

本記事では、pygame を使って簡単な紙芝居を作成する方法を学びます。複数の画像を用意し、それらを順番に表示する仕組みを実装することで、シンプルなストーリー演出を行うことができます。

また、ページ管理を関数で整理することで、コードの見やすさや拡張性を向上させる方法も紹介します。

まずは、紙芝居の基本となる画面の表示とボタン操作の仕組みについての復習から始めましょう。

<<前のページ

pygameの記事一覧

Pythonのゲームライブラリ pygame を使ってゲームアプリを制作するページのアイキャッチ画像

次のページ>>

紙芝居アプリ制作の基本

紙芝居を作るには複数の画像を順番に表示し、ボタンをクリックすることで次の画像へ進める仕組みが必要です。

ここまで学習してきた内容の復習も交えつつ、解説していきます。

学習を始める前に、以下のダウンロードリンクをクリックし、紙芝居セット（４枚の画像と「次へ」ボタンの画像）をダウンロードしておいてください。

紙芝居セット.zip

【Python】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

画面の初期化と画像読み込み手順

まずpygame を使って画面を作成し、紙芝居に必要な画像を読み込む方法を学びましょう。

pygame を使う際は、最初に初期化処理を行う必要があります。

pygameの初期化

pygame.init() を実行することで、pygame の機能を使用する準備ができます。次に、pygame.display.set_mode((幅, 高さ)) を使ってウィンドウを作成します。

以下のコードは、画面サイズを 750×450ピクセルに設定し、ウィンドウを作成する例です。

（今回準備した画像のサイズが750×450なので、画面サイズもこの大きさにします）

import pygame, sys
pygame.init() # pygameの初期化
screen = pygame.display.set_mode((750, 450)) # 画面サイズの指定

画像の読み込み

次に、pygame.image.load("ファイル名") を使って、紙芝居で使用する画像を読み込みます。例えば、以下のように画像を読み込むことができます。

# 画像の読み込み
img1 = pygame.image.load("benkyo_neko1.png")
img2 = pygame.image.load("benkyo_neko2.png")
img3 = pygame.image.load("benkyo_neko3.png")
img4 = pygame.image.load("benkyo_neko4.png")
next_img = pygame.image.load("next.png")  # 次へボタンの画像

上記のコードでは、4枚の紙芝居用の画像 (benkyo_neko1.png 〜 benkyo_neko4.png) と、ページを進めるためのボタン (next.png) を読み込んでいます。

ページを関数で分けて管理する方法

pygameを使って画像を読み込み、画面に表示することができます。

しかし、画像を毎回 screen.blit() を使って描画すると、コードが長くなり管理が難しくなります。

そこで、この章では「1つのページを関数としてまとめる方法」を学びます。

関数を使うことで、以下のようなメリットがあります。

コードが整理され、見やすくなる。
処理の流れを理解しやすくなる。
他のページの作成が簡単になる。

ここでは、benkyo_neko1.png を背景として表示し、next.png を「次へ進むボタン」として画面に配置する関数を作成します。

1ページを関数としてまとめる

まず、以下のような処理を行う page1() という関数を作成します。

画面を初期化する
benkyo_neko1.png を表示する
next.png を画面の右下に配置する

以下のコードを見てみましょう。

# 初期化（ゲームの準備をする）
import pygame, sys
pygame.init()
screen = pygame.display.set_mode((750, 450))

# 画像の読み込み
img1 = pygame.image.load("benkyo_neko1.png") # 1ページ目の画像
next_img = pygame.image.load("next.png")     # 次へボタンの画像

def page1(): # 1ページ目を表示する関数
    screen.blit(img1, (0, 0))         # 背景画像を表示
    screen.blit(next_img, (560, 380)) # 右下に次へボタンを表示
    pygame.display.update()           # 画面を更新

この page1() 関数を呼び出せば、1ページ目の画像とボタンが表示されます。

メインループで関数を呼び出す

pygameではゲームの処理をメインループで動かします。このループ内で page1() を呼び出せば、画面に画像を表示させましょう。

次のコードはpage1() をメインループで繰り返し表示する例です。

# メインループ
while True:
    page1()  # 関数を呼び出して1ページ目を表示する

    for event in pygame.event.get():
        if event.type == pygame.QUIT:  # 閉じるボタンが押されたら終了
            pygame.quit()
            sys.exit()

このコードを実行すると、1ページ目 (benkyo_neko1.png と next.png) が表示され続けます。

ウィンドウの閉じるボタンを押すと、プログラムが終了します。

関数を使うメリット

1ページの表示を関数でまとめることで、コードがスッキリし、他のページも同じ方法で作成しやすくなります。

例えば、page2() という関数を作成すれば、2ページ目の表示を簡単に実装できます。

次の章では、「複数のページを作成し、ボタンをクリックすると次のページに移動する方法」を紹介します。

コードを書いてみよう

ここまでの内容を踏まえて、関数を使ってbenkyo_neko1とnextボタンを表示するコードを書いてみましょう。

【Python】勉強猫がノートパソコンを見ながら考え込む様子。記事内の休憩用イラスト

画像を順番に表示し、ボタンで切り替えよう

前の章ではpage1() 関数を作成し、1ページ目の画像とボタンを画面に表示しました。

しかし、このままではボタンを押しても次のページに進むことができません。

そこで、この章では複数のページを関数で管理し、ボタンをクリックすると次のページへ移動する仕組みを実装します。

複数のページを関数で管理する

紙芝居では画像を順番に表示し、ボタンを押すと次の画像に切り替わる仕組みが必要です。

そのためページごとに関数を作成し、それを管理するための変数を用意します。

複数のページを表示するための関数

各ページごとに pageX() という関数を作成し、以下のような処理を行います。

screen.blit() で画像を描画する。
screen.blit() で「次へ」ボタンを描画する。
button_to_jump() を使ってボタンを押したら次のページへ移動する。

# 初期化（ゲームの準備）
import pygame, sys
pygame.init()
screen = pygame.display.set_mode((750, 450))

# 画像の読み込み
img1 = pygame.image.load("benkyo_neko1.png")  # 1ページ目の画像
img2 = pygame.image.load("benkyo_neko2.png")  # 2ページ目の画像
img3 = pygame.image.load("benkyo_neko3.png")  # 3ページ目の画像
img4 = pygame.image.load("benkyo_neko4.png")  # 4ページ目の画像
next_img = pygame.image.load("next.png")  # 次へボタンの画像

# ページ遷移用の変数
pushFlag = False
page = 1  # 現在のページを表す変数。初期値は1ページ目

# ボタンが押されたら次のページへジャンプする関数
def button_to_jump(btn, newpage):      # 「ボタンオブジェクト」と「次のページナンバー」を引数として受け取る関数
    global page, pushFlag              # 関数の外の2つのグローバル変数を使用
    mdown = pygame.mouse.get_pressed() # マウスのボタン状態を取得
    (mx, my) = pygame.mouse.get_pos()  # マウスの位置を取得

    if mdown[0]:  # 左クリックが押された場合
        if btn.collidepoint(mx, my) and pushFlag == False:
            page = newpage  # 次のページに変更
            pushFlag = True
    else:
        pushFlag = False  # ボタンを離したらリセット

# ページごとの関数
def page1(): # 1ページ目を表示する関数
    screen.blit(img1, (0, 0))               # 画像を表示
    btn = screen.blit(next_img, (560, 380)) # ボタンを右下に配置
    button_to_jump(btn, 2)                  # button_to_jump関数の呼び出し

def page2():# 2ページ目を表示する関数
    screen.blit(img2, (0, 0))
    btn = screen.blit(next_img, (560, 380))
    button_to_jump(btn, 3) # 3ページ目へジャンプ

def page3():# 3ページ目を表示する関数
    screen.blit(img3, (0, 0))
    btn = screen.blit(next_img, (560, 380))
    button_to_jump(btn, 4) # 4ページ目へジャンプ

def page4():# 4ページ目を表示する関数
    screen.blit(img4, (0, 0))
    btn = screen.blit(next_img, (560, 380))
    button_to_jump(btn, 1) # 4ページ目の次は最初のページに戻る
    
# メインループ
while True:
    # 現在のページを表示
    if page == 1:
        page1()
    elif page == 2:
        page2()
    elif page == 3:
        page3()
    elif page == 4:
        page4()

    # 画面を更新
    pygame.display.update()
    pygame.time.Clock().tick(60)

    # イベント処理（ウィンドウを閉じる処理）
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

コードの解説

このコードでは、以下の仕組みでボタンをクリックするとページが進む紙芝居を作成しています。

1. `button_to_jump()` でボタンのクリックを判定

ボタンのクリックを判定し、押されたら page 変数を変更します。

def button_to_jump(btn, newpage):
    global page, pushFlag              # 関数の外の2つのグローバル変数を使用
    mdown = pygame.mouse.get_pressed() # マウスのボタン状態を取得
    (mx, my) = pygame.mouse.get_pos()  # マウスの位置を取得

    if mdown[0]:  # 左クリックが押された場合
        if btn.collidepoint(mx, my) and pushFlag == False:
            page = newpage  # 次のページに変更
            pushFlag = True
    else:
        pushFlag = False  # ボタンを離したらリセット

この関数は以下の動作を行います。

pygame.mouse.get_pressed() で左クリックが押されたか確認。
pygame.mouse.get_pos() でマウスの位置を取得。
collidepoint(mx, my) で、マウスがボタンの範囲内にあるか判定。
条件を満たすと、page の値を変更して次のページへ進める。

各ページを関数で分けて管理

各ページは関数で管理され、それぞれのページで背景画像とボタンを表示しています。

def page1(): # 1ページ目を表示する関数
    screen.blit(img1, (0, 0))               # 画像を表示
    btn = screen.blit(next_img, (560, 380)) # ボタンを右下に配置
    button_to_jump(btn, 2)                  # button_to_jump関数の呼び出し

このように各ページは共通のルールで書かれているため、新しいページを追加するときも簡単です。

`while` ループでページを管理

ゲームループ (while True:) の中で page の値に応じて pageX() を呼び出し、現在のページを表示します。

while True:
    if page == 1: # もし変数pageの値が1なら
        page1()   # 関数page1を呼出し
    elif page == 2:
        page2()
    elif page == 3:
        page3()
    elif page == 4:
        page4()

これにより、ページの切り替えがスムーズに行えます。

まとめ

本記事ではpygame を使って簡単な紙芝居を作成する方法を学びました。

紙芝居は複数の画像を順番に表示し、ボタンをクリックすることで次のページに進む仕組みを持つシンプルなアプリケーションです。簡単に作成できる一方で、拡張性が高いため様々な応用ができます。

今回学んだ基礎をもとに、独自のアイデアを加え、オリジナルのストーリーアプリを作成してみてください！どんどん試していくことで、新しい技術やアイデアを身につけられるはずです。

それでは、次のステップへ進みましょう！お疲れ様でした！