pygame を使ってみる

【概要】

pygame は2次元ゲームのフレームワークである．Python で動作する．

このWebページでは，pygame の次の機能を試す．

ここではPythonを使う．

【目次】

1. 前準備

Python 3.12 のインストール

Pythonのインストールを行い、Pythonのプログラムを実行する環境を整える。扱う環境は、Windows搭載パソコンである。金子研究室では、Python 3.12.10を推奨する。

[Windows での Python 3.12 のインストール手順を見るには、ここをクリック]

Windows での Python 3.12 のインストール

以下のいずれかの方法でPython 3.12をインストールする。Pythonがインストール済みの場合、この手順は不要である。

方法 1：winget によるインストール

【インストールコマンドの実行方法】

管理者権限でコマンドプロンプトを起動する（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして、コマンド全体をコマンドプロンプトにコピー＆ペーストする。

--scope machine を指定することで、システム全体（全ユーザー向け）にインストールされる。このオプションの実行には管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動するとPATHが反映される。

REM Python 3.12 をシステム領域にインストール
winget install --id Python.Python.3.12 -e --scope machine --silent --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_test=0 Include_pip=1 Include_launcher=1 InstallLauncherAllUsers=1 TargetDir=\"C:\Program Files\Python312\""

REM Python と Scripts を PATH 先頭に追加
powershell -NoProfile -Command "$p='C:\Program Files\Python312'; $s=\"$p\Scripts\"; $c=[Environment]::GetEnvironmentVariable('Path','Machine'); if((Test-Path $p) -and (';'+$c+';' -notlike \"*;$p;*\") -and (';'+$c+';' -notlike \"*;$s;*\")){[Environment]::SetEnvironmentVariable('Path',\"$p;$s;$c\",'Machine')}"

方法 2：インストーラーによるインストール

  1. Python公式サイト（https://www.python.org/downloads/）にアクセスし、「Download Python 3.x.x」ボタンからWindows用インストーラーをダウンロードする。
  2. ダウンロードしたインストーラーを実行する。
  3. 初期画面の下部に表示される「Add python.exe to PATH」にチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから python コマンドを実行できない。
  4. 「Install Python 3.xx for all users」にチェックを入れ、「Install」をクリックする。

インストールの確認

コマンドプロンプトで以下を実行する。

python --version

バージョン番号（例：Python 3.12.x）が表示されればインストール成功である。「'python' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していない。

Python の開発環境 Visual Studio Code のインストールと Python 用の設定

Python の開発環境Visual Studio Code（プログラムを編集するソフトウェア。以下、VS Code）を整える。

[Windows での Visual Studio Code のインストールと Python 用の設定手順を見るには、ここをクリック]

Windows での Visual Studio Code のインストールと Python 用の設定手順

1. VS Code と拡張機能のインストール

以下のコマンドにより，既存の VS Code を削除し，全ユーザー共有の設定で再インストールしたうえで，拡張機能（VS Code に機能を追加するソフトウェア）をまとめて導入する．

【インストールコマンドの実行方法】

管理者権限でコマンドプロンプトを起動する（手順：Windows キーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして，コマンド全体をコマンドプロンプトにコピー＆ペーストする。

インストールコマンド


REM ============================================================
REM Microsoft Visual Studio Code
REM ============================================================
winget uninstall -e --id Microsoft.VisualStudioCode --silent --disable-interactivity --accept-source-agreements
rmdir /s /q C:\ProgramData\vscode-extensions 2>nul
rmdir /s /q "%APPDATA%\Code" 2>nul
rmdir /s /q "%USERPROFILE%\.vscode" 2>nul
rmdir /s /q "%LOCALAPPDATA%\Microsoft\vscode-update" 2>nul

REM VS Code をシステム領域に新規インストール
winget install --scope machine --id Microsoft.VisualStudioCode -e --silent --accept-source-agreements --accept-package-agreements

REM 全ユーザー共有の拡張機能フォルダ
mkdir C:\ProgramData\vscode-extensions 2>nul
icacls "C:\ProgramData\vscode-extensions" /grant "Everyone:(OI)(CI)M" /T

REM スタートメニューのショートカットを --extensions-dir 付きで再作成
rmdir /s /q "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code" 2>nul
del "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk" 2>nul
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); $lnk.TargetPath='C:\Program Files\Microsoft VS Code\Code.exe'; $lnk.Arguments='--extensions-dir \"C:\ProgramData\vscode-extensions\"'; $lnk.Save()"
REM ショートカットの検証
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); Write-Host 'TargetPath:' $lnk.TargetPath; Write-Host 'Arguments:' $lnk.Arguments"

REM ファイル / フォルダ右クリックの「Code で開く」を登録
reg add "HKLM\SOFTWARE\Classes\*\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\Background\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%V\"" /f

REM --extensions-dir 付きで起動する code.cmd ラッパを作成
REM （%* を echo で書くと対話的 cmd で失われるため、PowerShell で [char]37+'*' を書き出す）
powershell -NoProfile -Command "$pct=[char]37; $q=[char]34; $c='@echo off'+[char]13+[char]10+$q+'C:\Program Files\Microsoft VS Code\bin\code.cmd'+$q+' --extensions-dir '+$q+'C:\ProgramData\vscode-extensions'+$q+' '+$pct+'*'+[char]13+[char]10; [IO.File]::WriteAllText('C:\ProgramData\vscode-extensions\vscode.cmd',$c,[Text.Encoding]::ASCII)"

REM 拡張機能のインストール
set "CODE=C:\Program Files\Microsoft VS Code\bin\code.cmd"
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot-chat
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.python
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.vscode-pylance
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.debugpy
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension MS-CEINTL.vscode-language-pack-ja
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension saoudrizwan.claude-dev
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension rust-lang.rust-analyzer
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension tamasfe.even-better-toml
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension anthropic.claude-code
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension almenon.arepl
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --list-extensions --show-versions
echo === セットアップ完了 ===

2. Python インタプリタの選択

同一マシンに複数の Python がインストールされている場合，VS Code で使用する Python 本体（インタプリタ：Python プログラムを解釈・実行するソフトウェア）を選択する必要がある．

  1. コマンドパレット（コマンド名で機能を呼び出す VS Code の入力欄）を開く（Ctrl+Shift+P）
  2. Python: Select Interpreter と入力する
  3. 表示される一覧から，使用する Python（例：C:\Program Files\Python312\python.exe）を選択する．

Python プログラム実行手順

[Windows での Python プログラム実行手順を見るには、ここをクリック]

Windows での Python 実行手順（Visual Studio Codeを使用）

プログラムファイルの作成と保存

  1. 左サイドバーの「エクスプローラー」アイコン（Ctrl+Shift+E）をクリックする
  2. 「NO FOLDER OPENED」（作業対象フォルダが未選択の状態）と表示される場合は，「Open Folder」をクリックし，プログラムを保存するフォルダを選択する

    続いて「フォルダを信用するか」を確認する画面（フォルダ内のコードを実行してよいか確認する VS Code の仕組み）が表示されるので，チェックして Yes を選択する

  3. フォルダ名の右側に表示される「新しいファイル」アイコンをクリックする
  4. ファイル名（例：aitask.py．ファイル名は何でも良い）を入力し Enter を押す．拡張子は .py（Python ファイルを示す拡張子）とする
  5. 実行したいコードを選択し，Ctrl+C でコピーする．VS Code のエディタ領域に Ctrl+V で貼り付ける
  6. Ctrl+S で保存する

プログラムの実行

  1. エディタ右上の三角形「▷」アイコン（Run Python File：現在開いている Python ファイルを実行するボタン）をクリックする．または，エディタ上で右クリックし「ターミナルで Python ファイルを実行」を選択する
  2. VS Code 下部のターミナル（コマンドの入出力を表示する画面）に，実行結果（print 関数の出力等）が表示される
  3. tkinter（Python 標準の GUI ライブラリ）のファイル選択ダイアログを使うプログラムを実行した場合は，ダイアログが開くので対象画像を選択する
  4. VS Code 下部のターミナルで実行結果を確認する．OpenCV ウィンドウ（OpenCV が画像を表示するために開く専用ウィンドウ）が開いた場合はそちらも確認する．OpenCV ウィンドウは，マウスクリックでウィンドウをアクティブ（操作対象の状態）にしてからキーを押すと終了する

pygame のインストール [クリックして展開]

管理者権限でコマンドプロンプトを起動する （手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。

起動したコマンドプロンプトで以下を実行する。

pip install -U --no-user pygame

Windows での pygame のインストールの詳細は，別ページ »で説明している．

2. 概要・使い方・実行上の注意

各演習のソースコードは，その演習の手順のあとに示している．プログラムを終了するには，ウインドウ右上の「x」を1回だけクリックする（プログラムが止まり，ウインドウが閉じる）．矢印キーの演習では，ESCAPEキーでも終了できる．

4.1 動作確認チェックリスト

確認項目期待される結果
画面を開くプログラムの起動時640×480 の黒いウインドウが表示される
描画プログラムの起動時指定した色・形状・文字列がウインドウ上に描画される
キーボードイベントプログラムで矢印キーを連打円が矢印キーの方向に5ピクセルずつ移動して表示される（画面は毎回塗り直され，円は最新の位置だけに表示される）
ウインドウ右上の「x」をクリックプログラムが終了する

3. 演習1：画面（ウインドウ）を開く

テーマ：pygame を初期化し，ウインドウを開く．

pygame を初期化し，幅640，高さ480のウインドウを開く．ウインドウタイトルには「pygame demo」と表示される．

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．spyder を起動して実行してもよい．文字コードは UTF-8 とする．

ヒント：ウインドウのサイズは set_mode に渡す (幅, 高さ) で決まる．

考察ポイント：表示されたウインドウのタイトルとサイズが，コードで指定した値と一致しているかを確かめる． 

import sys
import pygame
from pygame.locals import *
class PyManMain:
    def __init__(self, width=640, height=480):
        pygame.init()
        self.width = width
        self.height = height
        self.screen = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_caption("pygame demo")
    def MainLoop(self):
        while 1:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    sys.exit()

MainWindow = PyManMain()
MainWindow.MainLoop()

4. 演習2：直線を描く

テーマ：直線を描画する．

pygame.draw.line で直線を描画する．色（RGB），始点座標，終点座標，線幅を指定する．

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．次に「(0, 95, 0)」を書き換えて色を変え，さらに「(0, 0), (80, 80)」を書き換えて形を変え，そのつど実行して確認する．

ヒント：色は (R, G, B) の3つの値で，始点と終点はそれぞれ (x, y) で指定する．

考察ポイント：色の値を変えたときと座標を変えたときで，描画結果がどう変わるかを読み取る． 

import sys
import pygame
from pygame.locals import *
class PyManMain:
    def __init__(self, width=640, height=480):
        pygame.init()
        self.width = width
        self.height = height
        self.screen = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_caption("pygame demo")
    def MainLoop(self):
        self.screen.fill((0, 0, 0))
        pygame.draw.line(self.screen, (0, 95, 0), (0, 0), (80, 80), 5)
        pygame.display.update()
        while 1:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    sys.exit()

MainWindow = PyManMain()
MainWindow.MainLoop()

5. 演習3：四角形を描く

テーマ：四角形を描画する．

pygame.draw.rect で四角形を描画する．色（RGB），矩形領域（Rect），線幅を指定する．

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．次に「(0, 80, 0)」を書き換えて色を変え，さらに「(10, 10, 80, 50)」を書き換えて形を変え，そのつど実行して確認する．

ヒント：矩形領域は Rect(左上x, 左上y, 幅, 高さ) で指定する．

考察ポイント：矩形領域の4つの値のうち，どれが位置を決め，どれが大きさを決めているかを読み取る． 

import sys
import pygame
from pygame.locals import *
class PyManMain:
    def __init__(self, width=640, height=480):
        pygame.init()
        self.width = width
        self.height = height
        self.screen = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_caption("pygame demo")
    def MainLoop(self):
        self.screen.fill((0, 0, 0))
        pygame.draw.rect(self.screen, (0, 80, 0), Rect(10, 10, 80, 50), 5)
        pygame.display.update()
        while 1:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    sys.exit()

MainWindow = PyManMain()
MainWindow.MainLoop()

6. 演習4：楕円を描く

テーマ：楕円を描画する．

pygame.draw.ellipse で楕円を描画する．色（RGB）と外接矩形領域を指定する．楕円はこの矩形の内側に収まるように描かれる．

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．次に「(0, 100, 0)」を書き換えて色を変え，さらに「(50, 50, 200, 100)」を書き換えて形を変え，そのつど実行して確認する．

ヒント：外接矩形領域は (左上x, 左上y, 幅, 高さ) で指定し，この矩形の幅と高さが楕円の横径・縦径になる．

考察ポイント：外接矩形の幅と高さの比を変えると，楕円の形がどう変わるかを読み取る． 

import sys
import pygame
from pygame.locals import *
class PyManMain:
    def __init__(self, width=640, height=480):
        pygame.init()
        self.width = width
        self.height = height
        self.screen = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_caption("pygame demo")
    def MainLoop(self):
        self.screen.fill((0, 0, 0))
        pygame.draw.ellipse(self.screen, (0, 100, 0), (50, 50, 200, 100))
        pygame.display.update()
        while 1:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    sys.exit()

MainWindow = PyManMain()
MainWindow.MainLoop()

7. 演習5：テキストを描く

テーマ：テキストを描画する．

pygame.font.Font でフォントを生成し，render でテキストサーフェス（文字を描いた画像）を作成し，blit で画面上に貼り付ける．

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．次に「(255, 255, 255)」を書き換えて色を変え，さらに「hello, world」を書き換えて表示されるテキストを変え，そのつど実行して確認する．

ヒント：pygame.font.Font(None, 55) の None は既定フォント，55 は文字の大きさを表す．

考察ポイント：テキストの色や文字列を変えたとき，画面上の表示がどう変わるかを読み取る． 

import sys
import pygame
from pygame.locals import *
class PyManMain:
    def __init__(self, width=640, height=480):
        pygame.init()
        self.width = width
        self.height = height
        self.screen = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_caption("pygame demo")
    def MainLoop(self):
        self.screen.fill((0, 0, 0))
        font = pygame.font.Font(None, 55)
        text = font.render("hello, world", True, (255, 255, 255))
        self.screen.blit(text, [20, 100])
        pygame.display.update()
        while 1:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    sys.exit()

MainWindow = PyManMain()
MainWindow.MainLoop()

8. 演習6：キーボードの矢印キーで円を動かす

テーマ：矢印キーの入力に応じて円を動かす．

矢印キーの入力に応じて円の描画位置を移動させる．ESCAPEキーで終了できる．

手順：次のコードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）．起動したら，矢印キーを連打する（押しっぱなしではイベントが発生しない．連打すること）．

ヒント：各フレームで画面を塗り直してから円を描くため，円は最新の位置だけに表示される．

考察ポイント：矢印キーを連打したときの円の移動方向が，イベントハンドラの座標変化（x，y の増減）と一致しているかを読み取る． 

import sys
import pygame
from pygame.locals import *
class PyManMain:
    def __init__(self, width=640, height=480):
        pygame.init()
        self.width = width
        self.height = height
        self.screen = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_caption("pygame demo")
    def MainLoop(self):
        x = 100
        y = 200
        while 1:
            self.screen.fill((0, 0, 0))
            pygame.draw.circle(self.screen, (0, 200, 0), (x, y), 5)
            pygame.display.update()
            pygame.time.wait(30)
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    sys.exit()
                if event.type == KEYDOWN:
                    if event.key == K_ESCAPE:
                        pygame.quit()
                        sys.exit()
                    if event.key == K_LEFT:
                        x = x - 5
                    if event.key == K_RIGHT:
                        x = x + 5
                    if event.key == K_UP:
                        y = y - 5
                    if event.key == K_DOWN:
                        y = y + 5

MainWindow = PyManMain()
MainWindow.MainLoop()

9. まとめ