一つ前のページではマウスでキャラクターを動かす方法について学習しました。

今回は 画面にボタンを表示する方法 について見ていきましょう。

ゲームを作る際、ボタンを配置することでプレイヤーが操作できる仕組みを作ることができます。

例えば「スタート」ボタンを押してゲームを開始したり、「終了」ボタンを押してゲームを終了したりする など、ボタンを使えばゲームのインタラクティブ性を向上させることができます。

ゲームを開発する上で、ボタンの作成やクリック判定の処理を理解することは非常に重要なスキルです。

本記事では、pygame を使って 画面にボタンを配置する方法 を学び、ボタンがクリックされたことを検出するプログラム を作成します。

それでは、まず最初に 画面にボタンを配置する方法 から始めましょう。

<<前のページ

pygameの記事一覧

次のページ>>

ボタン画像を配置して表示しよう

まずはpygameを使って画面にボタン画像を表示しましょう。ボタンを作成するには、以下の2つの手順を行います。

• ボタン用の画像を準備する
• 画像を指定した座標に配置する

Chapter１の復習になります。順番に実施していきましょう。

表示用のボタン画像を準備する

pygameでは、画像ファイル（PNGやJPEGなど）を pygame.image.load() を使って読み込み、画面に表示できます。今回は、ボタンの画像として “btn.png” を使用します。

↓↓のシンプルなボタン画像を保存し、プログラムと同じフォルダに置いてください。

画面上にボタンを描画する方法

準備したボタン画像を画面に表示するには、screen.blit() を使用します。

# 初期化（ゲームの準備をする）
import pygame, sys
pygame.init()
screen = pygame.display.set_mode((800,600))
btn_img = pygame.image.load("btn.png") # ボタン画像を読み込む

# メインループ
while True:
    screen.fill(pygame.Color("WHITE")) # 画面の初期化（背景を白に設定）
    btn = screen.blit(btn_img, (350, 200)) # ボタンを描画（位置をx=350, y=200に設定）
    pygame.display.update() # 画面を更新（描画した内容を反映）
    
    # 終了処理（ウィンドウの「×」ボタンが押されたら終了）
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

このコードでは、pygameを使って 800×600のウィンドウ を作成し、ボタンの画像を (350, 200) の位置 に描画しています。

このコードを実行すると、ウィンドウの中央付近にボタン画像が表示されます。

ボタンがクリックされたかどうかを判定する

ボタンを画面に表示することができたので、次は マウスでクリックされたことを判定する処理 を実装していきます。

ゲームにおけるボタンは、クリックすると何かのアクションが実行される仕組み になっています。それには以下の手順が必要です。

1. マウスのクリック状態を取得する
2. マウスカーソルの位置を取得する
3. ボタンの範囲内でクリックされたかを判定する
4. クリックされた場合に処理を実行する

マウスの状態を取得する

pygameでは、マウスのクリック状態を取得するには pygame.mouse.get_pressed() を使用します。

この関数は、(左ボタン, 中ボタン, 右ボタン) の3つの値を含んだタプルを返します。

また、マウスの現在の座標を取得するには、pygame.mouse.get_pos() を使います。

この関数は、マウスの X座標とY座標のタプル を返します。

ボタンの範囲内でクリックされたかを判定する

ボタンがクリックされたかどうかを判定するには、以下の手順を行います。

1. マウスの左クリックが押されているか (mdown[0] をチェック)
2. マウスの座標がボタンの範囲内にあるか (btn.collidepoint(mx, my))

if mdown[0]:  # もし左クリックが押されているなら
    if btn.collidepoint(mx, my):  # もし(mx, my)がボタンの範囲内にあるなら
        print("クリックされました")

クリック判定を実装したコード

上記の内容を踏まえて、ボタンがクリックされたかどうかを判定するプログラムを作成してみましょう。

# 初期化（ゲームの準備をする）
import pygame, sys
pygame.init()
screen = pygame.display.set_mode((800,600))
btn_img = pygame.image.load("btn.png") # ボタン画像を読み込む

# メインループ
while True:
    screen.fill(pygame.Color("WHITE")) # 画面の初期化（背景を白に設定）
    btn = screen.blit(btn_img, (350, 200)) # ボタンを描画

    # マウスの状態を取得
    mdown = pygame.mouse.get_pressed()  # クリック状態
    (mx, my) = pygame.mouse.get_pos()  # マウスの位置

    # ボタンのクリックを判定
    if mdown[0]:  # もし左クリックが押されているなら
        if btn.collidepoint(mx, my):  # もし(mx, my)がボタンの範囲内にあるなら
            print("クリックされました")
    else:
        print("クリックされていません")

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

    # 終了処理
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

このプログラムを実行すると、ボタンをクリックしたときに「クリックされました」と表示されます。

ただし、このプログラムでは、少しクリックしただけでも何回も「クリックされました」と表示されてしまいます。

1秒間に60回繰り返す処理の中で、押している間はずっと条件が満たされるためです。

そこで次の章では、クリックが1回だけ認識される仕組み（連続クリック防止） を実装していきます。

これによって、ボタンを押し続けた場合でも 1回のクリックだけが認識される処理 が可能になります。

クリックを1回だけ認識させる方法

前の章では、ボタンがクリックされたかどうかを判定する方法を学びました。しかし、実際のゲームプログラムではクリックが1回だけ認識される仕組みが重要です。

これを実現するには、フラグ変数（pushFlag）を使ってクリックの状態を管理する 方法が有効です。

（フラグ管理、なんて言うと、いよいよゲーム開発をしてる感じがしてきましたね^^）

フラグ変数（pushFlag）で制御しよう

クリックが 1回だけ認識されるようにするには、「すでにクリックされたかどうか」を記録しておく必要があります。

そのために、フラグ変数 pushFlag を使います。

フラグ変数の動作

1. クリックされていないとき (pushFlag == False) → クリックを認識
2. クリックされたら (pushFlag = True) → それ以上認識しない
3. ボタンが離されたら (pushFlag = False) → 次のクリックを認識できるようにする

この仕組みを使えば、ボタンがクリックされた瞬間に 1回だけ処理を実行し、押し続けても連続で判定されない ようにできます。

一度だけ動作させるコードの書き方

それでは、実際に pushFlag を使って、ボタンのクリックを1回だけ認識するコードを書いてみましょう。

# 初期化（ゲームの準備をする）
import pygame, sys
pygame.init()
screen = pygame.display.set_mode((800,600))
btn_img = pygame.image.load("btn.png") # ボタン画像を読み込む

pushFlag = False # クリック状態を管理するフラグ変数

# メインループ
while True:
    screen.fill(pygame.Color("WHITE")) # 画面の初期化（背景を白に設定）
    btn = screen.blit(btn_img, (350, 200)) # ボタンを描画

    # マウスの状態を取得
    mdown = pygame.mouse.get_pressed() # クリック状態
    (mx, my) = pygame.mouse.get_pos()  # マウスの位置

    # ボタンのクリックを1回だけ認識する処理
    if mdown[0]:  # もし左クリックが押されているなら
        if btn.collidepoint(mx, my) and pushFlag == False: # もしボタンの範囲内 かつ クリックされていないなら
            print("クリックされました")
            pushFlag = True  # クリックされたことを記録
    else:
        pushFlag = False  # クリックを解除（次のクリックを認識できるようにする）

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

    # 終了処理
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

このコードを実行すると、ボタンをクリックしたとき 「クリックされました」 が1回だけ出力されるようになります。

まとめ

今回はpygameを使って 画面にボタンを配置し、クリックを判定する方法 を学びました。

ゲームのUIとして、ボタンはとても重要な要素です。プレイヤーが操作できる仕組みを作ることで、ゲームのインタラクティブ性を高めることができます。

これらの技術を組み合わせることで、ボタンを使った ゲームのメニュー画面やシーン遷移 などを実装できるようになります。

ここまでお疲れさまでした！ゲーム開発の基礎をしっかり身につけながら、次のステップへ進んでいきましょう！

<<前のページ

pygameの記事一覧

次のページ>>

FAQ｜ボタンのクリック判定と制御

質問用コンタクトフォーム

この記事を書くにあたりAIを活用しています。

人間の目による確認も行っていますが、もし間違い等ありましたらご指摘頂けると大変助かります。

pygame記事一覧へ戻る
Python記事一覧へ戻る