ながみえ

一つ前のチャプターでは壁に反射するボールを設置しました。

今回は ボールを反射させるバー を設置しましょう。

Chapter1:pygame入門|画面を表示しよう
Chapter2:簡単なノベルゲームを作ろう
Chapter3:簡単なアクションゲームを作ろう
Chapter4:ブロック崩しを作ろう
 ・Chapter4-1:ボールを壁に反射させよう
 ・Chapter4-2:反射させるバーを設置しよう ◁今回はここ
 ・Chapter4-3:ボールが画面下に落ちたらゲームオーバーにしよう
 ・Chapter4-4:ぶつかると消えるブロックを配置しよう
Chapter5:シューティングゲームを作ろう
Chapter6:pygameのお役立ち情報

前回は、ボールが画面の端に当たったときに反射する処理を追加し、画面内を跳ね回るようにしました。

今回は、いよいよプレイヤーが操作する「バー」を追加していきます。

ブロック崩しゲームでは、このバーがプレイヤーの操作の中心になります。バーを左右に動かし、落ちてくるボールを跳ね返してブロックを壊していくのがゲームの基本的な流れです。

今回のチャプターでは、以下のことができるようになります。

  • 画面下にバーを表示する
  • バーをマウスで操作できるようにする
  • バーにボールが当たったら、ボールが跳ね返るようにする

それでは順を追って解説していきましょう。

注意点

チャプター4を通してブロック崩しゲームを制作するにあたり、ベースとなるコードや使用する画像をまとめた「Chapter4_set.zip」を 無料配布 しています。

まだ入手していない人は、まずは pygameのトップページ に移動し、チャプター4の章から ダウンロード してください。

本記事は会員向けの有料記事ですが、現在は期間限定で無料公開中です。

<<前のページ

pygameの記事一覧

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

次のページ>>

バーを画面に表示しよう

それではまず、バーを画面上に表示してみましょう。

バーは「長方形の図形」として描画することができます。pygameでは、このような図形を「Rect(レクト)」というデータ型を使って定義します。

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

Rectとは何か?

Rect は四角形の位置とサイズを表すためのオブジェクトです。以下のような書き方で使います。

pygame.Rect(左上のx座標, 左上のy座標, 横幅, 高さ)

今回のバーは、画面の下部に配置しましょう。

コードを書いてみよう

「brick_breaker.py」の中の「#初期化(ゲームの準備をする)」の部分に以下のコードを書き足しましょう。

## バーの設定
bar_rect = pygame.Rect(400, 550, 100, 10)

このコードでは以下のようなバーが作成されます。

  • 横位置(x座標)を400
  • 縦位置(y座標)を550(画面下部)
  • 幅を100ピクセル
  • 高さを10ピクセル

画面にバーを表示するには?

バーを画面に表示するには、pygame.draw.rect() を使います。この関数は指定した色と Rect の情報をもとに、画面上に四角形を描画します。

コードを書いてみよう

「## ゲームステージ関数」の中に以下のコードを書き足しましょう。

# バーの処理
# ここにあとで「マウスの位置にバーを合わせるコード」を追加
pygame.draw.rect(screen, pygame.Color("BLUE"), bar_rect)

これでバーが画面下部に表示されるようになります。

マウスでバーを動かそう

バーを画面に表示できたら、次はそのバーをプレイヤーが操作できるようにしましょう。

今回は、マウスの動きに連動してバーが左右に動くようにします。これにより、プレイヤーはマウスを使って直感的に操作できるようになります。

コードを書いてみよう

「## ゲームステージ関数」の中に以下のコードを書き足しましょう。

# ユーザー入力
(mx, my) = pygame.mouse.get_pos()

また、「## ゲームステージ関数」の中の「バーの処理」の部分に以下のコードを書き足しましょう。

bar_rect.x = mx - 50 # マウスの位置を合わせる

バーの中心をマウスカーソルに合わせるには、バーのx座標をマウスのx座標からバーの半分の長さを引いた値にします。

バーの幅は100ピクセルなので、「bar_rect.x = mx – 50」となる訳です。

これにより、マウスカーソルの位置をバーの中央にしてバーが移動するようになります。

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

バーにボールが当たったら反射させよう

バーが動くだけではまだゲームとしての機能が十分ではありません。次はボールがバーに当たったときに「跳ね返る」ようにする処理を追加していきます。

この処理によってプレイヤーがボールを受け止めて打ち返すことが可能になり、ゲームとしての操作性がぐっと高まります。

コードを書いてみよう

「## ゲームステージ関数」の中の「# ボールの処理」の部分に以下のコードを書き足してください。

if bar_rect.colliderect(ball_rect): # もしバーがボールと衝突したら
    vx = ((ball_rect.x + 15) - (bar_rect.x + 50)) / 4
    vy = random.randint(-10, -5)

バーに当たったときにただ反射するだけではなく、当たった位置によって跳ね返る角度を変えるようにすると、より自然な動きになります。

今回は以下のようにしてそれを実現しました。

  • ball_rect.x + 15 はボールの中心x座標(幅30ピクセルなので +15)
  • bar_rect.x + 50 はバーの中心x座標(幅100ピクセルなので +50)
  • この差を4で割ることでバーの中心からのずれ量を計り、それをvxに与える
    (ずれ量が大きいほどvxも大きくなる)
  • vy はランダムで負の値(-10から-5)を与える

まとめ

今回は、ブロック崩しゲームにおける「バー」の実装を行いました。

バーはプレイヤーがボールを跳ね返すために使う重要な要素であり、ゲームの操作性を左右するパーツです。

この実装によりプレイヤーが実際に操作できるゲームらしい動きが加わり、ブロック崩しの土台がしっかりと出来上がってきました。

次回はボールが画面の下まで落ちてしまったときに「ゲームオーバー」になる処理を追加していきます。

ゲームとしての緊張感が一気に高まる要素ですので、ぜひ楽しみにしていてください。

お疲れさまでした!この調子で少しずつゲームを完成させていきましょう。

Q
Chapter4-2の完成コード

今回の記事での完成するコード全体は↓↓の通りです。

必要な方は開いて確認しましょう。

# 初期化(ゲームの準備をする)
import pygame, sys, random
pygame.init()
screen = pygame.display.set_mode((800, 600))
## 背景の設定
haikei_img = pygame.image.load("images/hoshizora.png")
haikei_img = pygame.transform.scale(haikei_img, (800, 600))
# ボールの設定
ball_rect = pygame.Rect(400, 450, 30, 30)  # x=400, y=450 の位置に、30x30の正方形を配置
vx = random.randint(-10, 10)  # x方向の初期速度(ランダムに設定)
vy = -5                       # y方向の初期速度(上に向かって移動)
## バーの設定
bar_rect = pygame.Rect(400, 550, 100, 10)
## ブロックの設定

## リプレイボタンの設定
replay_img = pygame.image.load("images/replaybtn.png")
## メインループ内で使う変数
pushFlag = False
page = 1
score = 0

# ここから各関数の定義
## ゲームステージ関数
def gamestage():
    # 画面の初期化
    global vx, vy, page, score
    screen.blit(haikei_img, (0,0))
    # ユーザー入力
    (mx, my) = pygame.mouse.get_pos()
    # ボールの処理
    if ball_rect.y < 0 or ball_rect.y > 600 - 30:  # 画面の上下端に到達したら
        vy = -vy  # 縦方向の速度を反転
    if ball_rect.x < 0 or ball_rect.x > 800 - 30:  # 画面の左右端に到達したら
        vx = -vx  # 横方向の速度を反転
    # もしボールが画面下に到達したら(Chapter4-3で追記)
    if bar_rect.colliderect(ball_rect): # もしバーがボールと衝突したら
        vx = ((ball_rect.x + 15) - (bar_rect.x + 50)) / 4
        vy = random.randint(-10, -5)
    ball_rect.x += vx  # x方向に移動
    ball_rect.y += vy  # y方向に移動
    pygame.draw.circle(
        screen,                # 描画先の画面
        pygame.Color("GOLD"),  # ボールの色(GOLDに設定)
        ball_rect.center,      # 円の中心座標(Rectの中心)
        ball_rect.width // 2   # 円の半径(Rectの幅の半分)
    )

    # バーの処理
    bar_rect.x = mx - 50
    pygame.draw.rect(screen, pygame.Color("BLUE"), bar_rect)

    # ブロックの処理


## ジャンプ関数(ボタンが押されたらnewpageへジャンプする)

## リセット関数(ゲームをリセットする)

## ゲームオーバー関数

## ゲームクリア関数


# メインループ
while True:
    gamestage()

    # 画面表示
    pygame.display.update()
    pygame.time.Clock().tick(60)
    # 終了処理
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

<<前のページ

pygameの記事一覧

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

次のページ>>

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

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

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

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

記事URLをコピーしました