【pygame】Chapter1-3：画像や図形を表示しよう

一つ前のページでは ゲームループの基本 について学習しました。

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

前回のレッスンでは、ゲームの基本的な仕組みである「ゲームループ」について学びました。

ゲームは「ユーザーの入力を受け取る → ゲームの状態を更新する → 画面を描画する」という流れを繰り返すことで動作します。

この「画面を描画する」部分では、キャラクターや背景、アイテムなどを画面に表示することが必要不可欠です。

では、どのようにして画面に画像を表示するのでしょうか？

いきなりキャラクター画像を表示する前に、まずは画面の座標の仕組みを理解し、その後、pygameが提供する描画機能を使って簡単な図形を描く練習をしましょう。

今回のレッスンでは、次の3つを学習します。

この知識を身につけれて、ゲーム内にキャラクターや背景を自由に配置できるようになりましょう。

あわせて読みたい

Pygameで使える関数・メソッド・クラス一覧まとめ【Pythonゲーム制作リファレンス】

<<前のページ

pygameの記事一覧

次のページ>>

ゲーム画面の座標系の解説

ゲーム画面に何かを描画するとき、最も重要になるのが「座標」の考え方です。

例えばキャラクターやアイテムを表示するとき、それらを「どこに配置するか」を座標で指定する必要があります。

まずはpygameにおける座標系の仕組みを理解しましょう。

座標の基本｜左上原点・右へx増加・下へy増加

pygameでは、画面の左上を (0,0) とする座標系 を採用しています。

例えば、画面サイズが 800×600 の場合、各座標の関係は以下のようになります。

(0,0) → → → → → (800,0)
 ↓
 ↓
 ↓
(0,600) → → → (800,600)

pygameに限らず、多くの言語ではゲームやグラフィックス処理にこの座標系を使います。

練習問題：画面上に３つの円を表示しよう

では、pygameを使って画面に特定の座標に印をつける簡単なコードを書いてみましょう。

前回の「ゲームループの基本を理解しよう」で学習した内容と、今回学習した内容を組み合わせて、画面上に３つの円を表示するコードを書いてください。

なお、参考までに、前回の記事で紹介した「画面に赤い円を表示するコード」を書いておきます。

import pygame, sys	# pygameとsysモジュールをインポート
pygame.init()		# pygameを初期化
screen = pygame.display.set_mode((800,600))	# 画面のサイズを設定（幅800px、高さ600px）

# 無限ループでゲームを動作させる
while True:
    # 画面を白色で塗りつぶす（毎フレームの更新）
    screen.fill(pygame.Color("WHITE"))
    # 赤い円を描画（座標(100,100)から幅100、高さ100の楕円）
    pygame.draw.ellipse(screen, pygame.Color("RED"), (100, 100, 100, 100))
    # 画面の更新（描画した内容を反映）
    pygame.display.update()
    # イベント処理（ウィンドウの閉じるボタンが押されたら終了）
    for event in pygame.event.get():
        if event.type == pygame.QUIT:	# 閉じるボタンが押されたか確認
            pygame.quit()				# pygameを終了
            sys.exit()					# プログラムを終了

画面に表示できましたか？

上記のコードの、10行目の後ろの数値を変更すればOKです。

    # 赤い点を描画 (画面の左上、中央、右下)
    pygame.draw.ellipse(screen, pygame.Color("RED"), (0, 0, 100, 50))		# 左上
    pygame.draw.ellipse(screen, pygame.Color("RED"), (400, 300, 100, 50))	# 中央
    pygame.draw.ellipse(screen, pygame.Color("RED"), (800, 600, 100, 50))	# 右下

ただし、これでは右下の円が画面に表示されません。しかしそれで問題ありません。

ellipse関数は指定された座標を基準として、そこから右下に向かって楕円を表示する関数です。

例えば、以下のようにコードを変更して表示してみると分かりやすいでしょう。

pygame.draw.ellipse(screen, pygame.Color("RED"), (750, 550, 100, 50)) # 右下

基本図形の描画｜直線・矩形(Rect)・円/楕円

ゲームを作る際、キャラクターや背景を表示する前に、基本的な図形を描くことで描画の仕組みを理解することが重要です。

pygameには、四角形・線・円・楕円 などの図形を描く関数が用意されています。

まずは基本的な図形の描き方を学び、その後、それらを組み合わせて画面にオブジェクトを描画してみましょう！

主な描画関数｜rect/line/ellipse/circle

pygameでは、以下のような関数を使って画面に図形を描画できます。

これらの関数を使えば、ゲームの背景やボタン、簡単なオブジェクトなどを作ることができます。

# 赤い円を描画（座標(100,100)から幅100、高さ100の楕円）
pygame.draw.ellipse(screen, pygame.Color("RED"), (100, 100, 100, 100))

練習問題：図形を組み合わせて簡単なオブジェクトを描こう

図形の描画ができるようになったら、複数の図形を組み合わせることで簡単なオブジェクトを作ることができます。

練習のため、「キャラクターの顔」をシンプルな図形で表現してみましょう。

以下の画像と同じ画像が表示されるようなコードを書いてください。

この画像を描写する正解コードは以下の通りです。

import pygame , sys
pygame.init()
screen = pygame.display.set_mode((800,600))

# メインループ
while True:
    # 画面を初期化する
    screen.fill(pygame.Color("WHITE"))
    # キャラクターの顔を描写
    pygame.draw.circle(screen, (pygame.Color("YELLOW")), (400, 300), 100)		# 顔 (黄色の円)
    pygame.draw.rect(screen, (pygame.Color("BLACK")), (370, 270, 10 ,15))		# 左目 (黒の四角)
    pygame.draw.rect(screen, (pygame.Color("BLACK")), (420, 270, 10 ,15))		# 右目 (黒の四角)
    pygame.draw.line(screen, (pygame.Color("RED")), (370, 330), (430, 330), 5)	# 口 (赤い線)
    # 描画処理（画面の更新）
    pygame.display.update()
    # 終了判定（ゲームを終了するかどうかを判定）
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

覚えるために、是非いろいろな表情を作ることに挑戦してみて下さい！

画像の表示｜読み込みと貼り付け（blit）の基本

四角形・線・円などの基本的な図形を描く 方法を学びました。

しかし実際のゲームではキャラクターや背景などを 画像ファイルとして表示 することが基本です。

ここからは、画像を読み込んで画面に表示する方法 を学んでいきましょう！

画像表示の流れ｜読み込み→変換→blit

pygameで画像を表示するためには、次の2つの手順を行います。

この2つを使えば、ゲーム画面上に好きな画像を表示できます。

pygame.image.load関数｜画像からスプライトを作成

image.load()関数 は画像ファイルを読み込んで スプライト（Surfaceオブジェクト）に変換する関数です。

スプライトとは、ゲームの画面に表示される「動く画像の部品」のことを言います。

例えば、プレイヤーキャラクター、敵キャラ、弾やアイテム、爆発エフェクトなどは全て スプライト と呼びます。

つまり「動かせる/管理できる画像」が スプライト です。

image.load()関数を使うことで、画像からスプライトを作ることができます。

image = pygame.image.load(画像名)	# 画像スプライトを作成し、変数に代入

screen.blit()メソッド｜スプライトを画面に描写

screen.blit()メソッド は画像やSurfaceを他のSurfaceに貼り付けるメソッドで、ゲーム描画の中心的存在です。

image.load()関数で作成したスプライトを画面オブジェクトに貼り付ける際などに使用します。

screen.blit(image, (X座標, Y座標))  # (X, Y) の位置に画像を配置

画面に画像を表示する最小コード

それでは、実際に画像を表示するプログラムを作ってみましょう。

まずは、pygameを使って画面に画像を表示する最もシンプルなコードを書きます。

# pygameライブラリのimageモジュールのload関数で画像を読み込み、変数imageに代入
image = pygame.image.load("neko.png")  

# 画像を画面に描画
screen.blit(image, (300, 200))  # (300, 200) の位置に画像を配置

このコードを保存したあと、その Pythonファイルと同じ場所に↓↓の猫の画像を保存 して実行してください。

画面にこの猫の画像が表示されましたか？

通常は表示されるはずですが、お使いの環境によっては正しく表示されない可能性があります。

そこで、どんな環境でも確実に表示させるために、pathlibライブラリの使い方を見ていきましょう。

pathlibで安全にパスを扱う方法｜画像表示の基本コード

確実に画像を描写するためには、pathlibライブラリ を使用して、画像のパス（保存場所）を明示的に表現しましょう。

pathlibはファイルやディレクトリのパス操作をオブジェクト指向的に行えるPythonの標準ライブラリです。

これを使うことで、画像の保存場所をPythonファイルの場所から相対的に見て表現できるようになります。

あわせて読みたい

Pythonのpathlibライブラリの使い方ガイド

本サイトでは、Pythonファイルを保存したフォルダの中に「images」というフォルダを用意し、そこに全ての画像を保存することを推奨します。

Mygame/					   # ゲーム保存フォルダ 
 ├── main.py			# Pythonファイル
 ├── images/			# 画像保存フォルダ
     ├── image1.png		# 画像1
     ├── image2.png		# 画像2
     ├── image3.png		# 画像3

その場合、例えば「neko.png」画像を読み込むには、pathlibライブラリ を使用して次のように書きます。

from pathlib import Path	# pathlibライブラリのインポート

img_path = Path(__file__).parent / "images" / "neko.png"	# 画像のパスを取得して変数に代入
image = pygame.image.load(str(img_path))					# パスを文字列に変換して画像読み込み

• Path(__file__) で「このファイルのパス」を取得（例：Mygame/main.py）
• .parentで一つ上のフォルダへ（例：Mygame）
• / でパス結合（例：Mygame/images/player.png）

このコードでは、画像ファイルを変数img_pathの中にパスごと代入し、それをimage.load関数で読み込んでいます。

この書き方は本サイト内での標準となりますので、しっかりと覚えましょう。

コードを書いてみよう

画像を表示させるコード全体は以下の通りです。

↓↓の画像を上記のように適切な場所に保存し、画面に表示させてみましょう。

import pygame, sys			# pygameとsysモジュールをインポート
from pathlib import Path	# pathlibライブラリのインポート
pygame.init()				# pygameを初期化
screen = pygame.display.set_mode((800,600)) # 画面のサイズを設定（幅800px、高さ600px）

img_path = Path(__file__).parent / "images" / "neko.png" # 画像のパスを取得して変数に代入
image = pygame.image.load(str(img_path))				 # パスを文字列に変換して画像読み込み

# 無限ループでゲームを動作させる
while True:
    # 画面を白色で塗りつぶす（毎フレームの更新）
    screen.fill(pygame.Color("WHITE"))
    # 赤い円を描画（座標(100,100)から幅100、高さ100の楕円）
    screen.blit(image, (300, 200))  # (X, Y) の位置に画像を配置
    # 画面の更新（描画した内容を反映）
    pygame.display.update()
    # イベント処理（ウィンドウの閉じるボタンが押されたら終了）
    for event in pygame.event.get():
        if event.type == pygame.QUIT:	# 閉じるボタンが押されたか確認
            pygame.quit()				# pygameを終了
            sys.exit()					# プログラムを終了

まとめ

今回のレッスンでは、pygameを使って画面に画像を表示する方法を学んできました。

次回は「画面に文字を表示する方法」 を学びます！

ゲームのスコア表示や、メッセージの出力ができるようになると、より本格的なゲームが作れるようになるでしょう。

お疲れさまでした！この調子で次のレッスンも頑張りましょう！

<<前のページ

pygameの記事一覧

次のページ>>

画像表示の疑問解消｜FAQとよくあるトラブル

初心者がつまずきやすいポイントをFAQとしてまとめ、またよくあるトラブルとその解決法をわかりやすく整理しました。

理解を深めたいときや、ふと疑問に感じたときに役立ててください。

FAQ｜画面に画像を表示する際によくある質問

今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。

画面に画像を表示する際のよくあるトラブルと解決法

今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。

画像が画面に表示されない

「pygame.error: Couldn’t open ○○」のエラーが出る

画像サイズが不適切で正しく表示されない