一つ前のチャプターでは壁に反射するボールを設置しました。
今回は ボールを反射させるバー を設置しましょう。
Chapter1:pygame入門|画面を表示しよう
Chapter2:簡単なノベルゲームを作ろう
Chapter3:簡単なアクションゲームを作ろう
Chapter4:ブロック崩しを作ろう
・Chapter4-1:ボールを壁に反射させよう
・Chapter4-2:反射させるバーを設置しよう ◁今回はここ
・Chapter4-3:ボールが画面下に落ちたらゲームオーバーにしよう
・Chapter4-4:ぶつかると消えるブロックを配置しよう
Chapter5:シューティングゲームを作ろう
Chapter6:pygameのお役立ち情報
前回は、ボールが画面の端に当たったときに反射する処理を追加し、画面内を跳ね回るようにしました。
今回は、いよいよプレイヤーが操作する「バー」を追加していきます。
ブロック崩しゲームでは、このバーがプレイヤーの操作の中心になります。バーを左右に動かし、落ちてくるボールを跳ね返してブロックを壊していくのがゲームの基本的な流れです。
今回のチャプターでは、以下のことができるようになります。
- 画面下にバーを表示する
- バーをマウスで操作できるようにする
- バーにボールが当たったら、ボールが跳ね返るようにする
それでは順を追って解説していきましょう。
本記事は会員向けの有料記事ですが、現在は期間限定で無料公開中です。
バーを画面に表示しよう
それではまず、バーを画面上に表示してみましょう。
バーは「長方形の図形」として描画することができます。pygameでは、このような図形を「Rect(レクト)」というデータ型を使って定義します。
Rectとは何か?
Rect
は四角形の位置とサイズを表すためのオブジェクトです。以下のような書き方で使います。
pygame.Rect(左上のx座標, 左上のy座標, 横幅, 高さ)
今回のバーは、画面の下部に配置しましょう。
このコードでは以下のようなバーが作成されます。
- 横位置(x座標)を400
- 縦位置(y座標)を550(画面下部)
- 幅を100ピクセル
- 高さを10ピクセル
画面にバーを表示するには?
バーを画面に表示するには、pygame.draw.rect()
を使います。この関数は指定した色と Rect
の情報をもとに、画面上に四角形を描画します。
これでバーが画面下部に表示されるようになります。
マウスでバーを動かそう
バーを画面に表示できたら、次はそのバーをプレイヤーが操作できるようにしましょう。
今回は、マウスの動きに連動してバーが左右に動くようにします。これにより、プレイヤーはマウスを使って直感的に操作できるようになります。
バーの中心をマウスカーソルに合わせるには、バーのx座標をマウスのx座標からバーの半分の長さを引いた値にします。
バーの幅は100ピクセルなので、「bar_rect.x = mx – 50」となる訳です。
これにより、マウスカーソルの位置をバーの中央にしてバーが移動するようになります。
バーにボールが当たったら反射させよう
バーが動くだけではまだゲームとしての機能が十分ではありません。次はボールがバーに当たったときに「跳ね返る」ようにする処理を追加していきます。
この処理によってプレイヤーがボールを受け止めて打ち返すことが可能になり、ゲームとしての操作性がぐっと高まります。
バーに当たったときにただ反射するだけではなく、当たった位置によって跳ね返る角度を変えるようにすると、より自然な動きになります。
今回は以下のようにしてそれを実現しました。
ball_rect.x + 15
はボールの中心x座標(幅30ピクセルなので +15)bar_rect.x + 50
はバーの中心x座標(幅100ピクセルなので +50)- この差を4で割ることでバーの中心からのずれ量を計り、それをvxに与える
(ずれ量が大きいほどvxも大きくなる) vy
はランダムで負の値(-10から-5)を与える
まとめ
今回は、ブロック崩しゲームにおける「バー」の実装を行いました。
バーはプレイヤーがボールを跳ね返すために使う重要な要素であり、ゲームの操作性を左右するパーツです。
この実装によりプレイヤーが実際に操作できるゲームらしい動きが加わり、ブロック崩しの土台がしっかりと出来上がってきました。
次回はボールが画面の下まで落ちてしまったときに「ゲームオーバー」になる処理を追加していきます。
ゲームとしての緊張感が一気に高まる要素ですので、ぜひ楽しみにしていてください。
お疲れさまでした!この調子で少しずつゲームを完成させていきましょう。
- 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()
質問用コンタクトフォーム
この記事を書くにあたりAIを活用しています。
人間の目による確認も行っていますが、もし間違い等ありましたらご指摘頂けると大変助かります。