一つ前のページでは画面にボタンを表示する方法について学習しました。
今回は 簡単な紙芝居を作る方法 について見ていきましょう。
Chapter１：pygame入門｜画面を表示しよう
Chapter２：簡単なノベルゲームを作ろう
・Chapter2-1：キーボードでキャラクターを動かそう
・Chapter2-2：マウスでキャラクターを動かそう
・Chapter2-3：画面にボタンを表示しよう
・Chapter2-4：簡単な紙芝居を作ろう ◁今回はここ
・Chapter2-5：簡単なノベルゲームを作ろう
Chapter３：簡単なアクションゲームを作ろう
Chapter４：ブロック崩しを作ろう
Chapter５：シューティングゲームを作ろう
Chapter６：横スクロールのアクションゲームを作ろう
ゲームやアプリの中には、ストーリーを進めるような「紙芝居」形式のシステムが使われることがあります。
例えば、画面に表示される画像をクリックして次のシーンへ進めたり、背景やキャラクターを切り替えながら物語を展開させたりするような仕組みです。
こうした紙芝居のような表現は、ノベルゲームや教育用のスライド型アプリなど、さまざまな場面で活用できます。
本記事では、pygame を使って簡単な紙芝居を作成する方法を学びます。複数の画像を用意し、それらを順番に表示する仕組みを実装することで、シンプルなストーリー演出を行うことができます。
また、ページ管理を関数で整理することで、コードの見やすさや拡張性を向上させる方法も紹介します。
まずは、紙芝居の基本となる画面の表示とボタン操作の仕組みについての復習から始めましょう。
<<前のページ
pygameの記事一覧
次のページ>>
紙芝居アプリ制作の基本
紙芝居を作るには複数の画像を順番に表示し、ボタンをクリックすることで次の画像へ進める仕組みが必要です。
ここまで学習してきた内容の復習も交えつつ、解説していきます。
学習を始める前に、以下のダウンロードリンクをクリックし、紙芝居セット（４枚の画像と「次へ」ボタンの画像）をダウンロードしておいてください。
画面の初期化と画像読み込み手順
まず、これまでに学習してきたように 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) を読み込んでいます。
ページを関数で分けて管理する方法
続いて読み込んだ画像を画面に表示します。
しかし、画像を毎回 screen.blit()メソッド で描画すると、コードが長くなり管理が難しくなります。
そこで、 「1つのページを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ページ目の表示を簡単に実装できます。
次の章では、「複数のページを作成し、ボタンをクリックすると次のページに移動する方法」 を紹介します。
画像を順番に表示し、ボタンで切り替えよう
前の章ではpage1() 関数を作成し、1ページ目の画像とボタンを画面に表示しました。
しかし、このままではボタンを押しても何も起こりません。
そこで、この章では複数のページを関数で管理し、ボタンをクリックすると次のページへ移動する仕組みを実装します。
複数のページを関数で管理する
紙芝居では画像を順番に表示し、ボタンを押すと次の画像に切り替わる仕組みが必要です。
そのためページごとの pageX()関数 と次のページへ移動する 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 page1(): # 1ページ目を表示する関数
screen.blit(img1, (0, 0)) # 1ページ目の画像を表示
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ページ目の次は最初のページに戻る
# ボタンが押されたら次のページへジャンプする関数
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 # ボタンを離したらリセット
# メインループ
while True:
# 現在のページを表示
if page == 1: # もし変数pageの値が1なら
page1() # 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. 各ページを関数で分けて管理
各ページは関数で管理され、それぞれのページで 背景画像とボタンを表示 しています。
def page1(): # 1ページ目を表示する関数
screen.blit(img1, (0, 0)) # 1ページ目の画像を表示
btn = screen.blit(next_img, (560, 380)) # ボタンを右下に配置
button_to_jump(btn, 2) # button_to_jump関数の呼び出しこのように各ページは共通のルールで書かれているため、新しいページを追加するときも簡単です。
2. 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の値を変更して次のページへ進める。
3. 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 を使って簡単な紙芝居を作成する方法を学びました。
紙芝居は複数の画像を順番に表示し、ボタンをクリックすることで次のページに進む仕組みを持つシンプルなアプリケーションです。簡単に作成できる一方で、拡張性が高いため様々な応用ができます。
今回学んだ基礎をもとに、独自のアイデアを加え、オリジナルのストーリーアプリを作成してみてください！どんどん試していくことで、新しい技術やアイデアを身につけられるはずです。
それでは、次のステップへ進みましょう！お疲れ様でした！
<<前のページ
pygameの記事一覧
次のページ>>
FAQ｜紙芝居アプリの作り方
- Q1. ページの切り替えがうまく動作しないのはなぜ？
-
ページ遷移に使っている変数が適切に更新されていない、または関数の呼び出し順に誤りがある可能性があります。
- Q2. 関数でページを分けるメリットは何ですか？
-
可読性が高まり、エラーの原因も特定しやすくなります。今後の拡張やデバッグがしやすくなるのも大きな利点です。
- Q3. 画像が正しく表示されない場合のチェックポイントは？
-
ファイルパスの誤りや画像ファイルの読み込み失敗が原因のことが多いです。パスの指定や拡張子に注意しましょう。