Pythonで〇×ゲームのAIを一から作成する　その67　画像によるマークの描画

Last updated at 2024-03-31Posted at 2024-03-28

目次と前回の記事

これまでに作成したモジュール

以下のリンクから、これまでに作成したモジュールを見ることができます。

ルールベースの AI の一覧

ルールベースの AI の一覧については、下記の記事を参照して下さい。

図形によるマークの描画

前回の記事では、文字列 による マークの描画 の方法と、欠点について説明しました。

今回の記事では、図形を使って〇や × を描画するという方法を紹介します。この方法は、文字列を描画する方法と比べて、下記のような利点が あります。

マスの 真ん中 に 正確に描画 することが簡単に できる
枠の太さ を 自由に調整 することが できる
画像の大きさ を変更しても、図形の 大きさ や位置を調整する必要がない

なお、図形の大きさ を 試行錯誤 で調整する必要があるという点は、文字列 でも図形でも 変わりません。

図形による〇の描画

まず、(0, 0) のマスに円の図形を描画するプログラムを記述することにします。前回の記事で説明したように、円の 図形の描画 は、円の図形表す Artist を patches モジュールの Circle メソッドで作成し、Axes の add_artist メソッドで登録することで行います。その際に、円の 中心の座標 と、半径を指定する必要が あります。それらをどのように設定すればよいかについて少し考えてみて下さい。

下記は、(0, 0) のマスに〇を配置した ゲーム盤 の画像の一例です。

図から、(0, 0) のマスの中央に 〇を描画 するためには、円の 中心の座標 を (0.5, 0.5)_A¹ に すれば良い ことが わかります。また、そのように設定 することで、円を 必ず (0, 0) のマスの中央に描画できることが保証されます。この点は、試行錯誤 で〇を 描画する位置 を 探す必要 がある、文字列 による〇の描画に対する 大きな利点 です。

また、図から、描画する 円の半径 を 0.5 以下 にする必要がある事も わかります。円の半径 については 試行錯誤 で 決める必要 があるので、とりあえず、下記のプログラムのように、0.3 を設定して 描画してみる ことにします。

from marubatsu import Marubatsu
import matplotlib.pyplot as plt
import matplotlib.patches as patches
import japanize_matplotlib

mb = Marubatsu()
ax = mb.draw_board()
circle = patches.Circle([0.5, 0.5], 0.3)
ax.add_artist(circle)

実行結果

実行結果 から、円が 塗りつぶされて おり、枠も 描画されていない ことが わかります。また、円の大きさ が 若干小さい 気がするので、下記のように修正することにします。

塗りつぶさない ようにするために、fill=False を記述する
円の半径を 0.35 に 増やす

なお、枠と 塗りつぶし の 設定方法 について忘れた方は、以前の記事を参照して下さい。

ax = mb.draw_board()
circle = patches.Circle([0.5, 0.5], 0.35, fill=False)
ax.add_artist(circle)

修正箇所

ax = mb.draw_board()
-circle = patches.Circle([0.5, 0.5], 0.3)
+circle = patches.Circle([0.5, 0.5], 0.35, fill=False)
ax.add_artist(circle)

実行結果

実行結果 から、枠線が細い気がするので、lw=2 を記述して太くしてみます。

ax = mb.draw_board()
circle = patches.Circle([0.5, 0.5], 0.35, fill=False, lw=2)
ax.add_artist(circle)

修正箇所

ax = mb.draw_board()
-circle = patches.Circle([0.5, 0.5], 0.35, fill=False)
+circle = patches.Circle([0.5, 0.5], 0.35, fill=False, lw=2)
ax.add_artist(circle)

実行結果

上記の 実行結果 で 特に問題はない と思いますので、本記事 では、上記の設定 で〇を描画することにします。この設定が気に入らない人は、自由に変更して下さい。

また、〇を 図形で描画 した場合は、文字列で描画 した場合と 異なり、下記のプログラムのように、画像の大きさ を 変えて も〇が マスの真ん中 に 描画される という、マスの中 の配置が 変わらない という利点が 得られます。

ax = mb.draw_board(size=5)
circle = patches.Circle([0.5, 0.5], 0.35, fill=False, lw=2)
ax.add_artist(circle)

修正箇所

-ax = mb.draw_board()
+ax = mb.draw_board(size=5)
circle = patches.Circle([0.5, 0.5], 0.35, fill=False, lw=2)
ax.add_artist(circle)

実行結果

任意のマスに〇を描画する方法

上記では、(0, 0) のマスに 〇を描画 しましたが、実際には、任意のマス に 〇を描画 する必要が あります。いずれのマス に 〇を描画 する場合でも、そのマス の 中心の座標 がわかれば、マスの 真ん中 に 〇を描画 することが できます。

(x, y) のマスの 中心の座標 は、上図を見れば (x + 0.5, y + 0.5)_A であることが簡単にわかるので、例えば (2, 1) のマスに 〇を描画 するプログラムは下記のようになります。

x = 2
y = 1

ax = mb.draw_board()
circle = patches.Circle([x + 0.5, y + 0.5], 0.35, fill=False, lw=2)
ax.add_artist(circle)

修正箇所

+x = 2
+y = 1

ax = mb.draw_board()
-circle = patches.Circle([0.5, 0.5], 0.35, fill=False, lw=2)
+circle = patches.Circle([x + 0.5, y + 0.5], 0.35, fill=False, lw=2)
ax.add_artist(circle)

実行結果

実行結果 から、(2, 1) のマスの 真ん中 に〇を 描画できている ことが確認できます。

`draw_circle` の定義

(x, y) のマスに 〇を描画 するたびに、上記のようなプログラムを 毎回記述 するのは面倒なので、任意のマス に 〇を描画 する、下記のような メソッドを定義 する事にします。

名前：〇（circle）を描画（draw）するので、draw_circle という名前にする
処理：（x, y） のマスに 〇を描画 する
入力：x と y という 仮引数 に、〇を描画 する マスの座標 を代入する。また、描画を 行うため には Axes が 必要になる ので、ax という 仮引数 に Axes を代入する
出力：なし

下記は、draw_circle の定義を行うプログラムです。

def draw_circle(self, ax, x, y):
    circle = patches.Circle([x + 0.5, y + 0.5], 0.35, fill=False, lw=2)
    ax.add_artist(circle)

Marubatsu.draw_circle = draw_circle

下記は、draw_circle を使って、すべてのマス に 〇を描画 するプログラムです。実行結果 から 正しく動作 することが確認できます。

1 行目：ゲーム盤の枠 を描画する
2 ~ 4 行目：2 重 の for 文 を使って、ゲーム盤 の すべてのマス に対して、4 行目 で 〇を描画 する

ax = mb.draw_board()
for x in range(3):
    for y in range(3):
        mb.draw_circle(ax, x, y)

実行結果

図形による × の描画

次に、(0, 0) のマスに × を 図形で描画 するプログラムを記述することにします。× の図形は 2 本 の線によって構成されるので、plot メソッドで描画することが できます。2 本 の線の 両端の座標 をどのように設定すればよいかについて少し考えてみて下さい。

下記は、(0, 0) のマスに × を配置 した ゲーム盤 の画像の一例です。先程〇を半径が 0.35 の 円で描画 したので、× を 同じ大きさ で描画するために、それぞれの線の両端の x 座標 と y 座標 を、マスの中央 の (0.5, 0.5)_A から 0.35 だけ 増減した値 に設定しました。

下記は、上図を元 に、(0, 0) のマスに × を描画 するプログラムです。c = "k" によって 線の色 を黒に、lw=2 によって、線の太さ を 〇の図形 と 同じ 2 に設定しました。

ax = mb.draw_board()
ax.plot([0.15, 0.85], [0.15, 0.85], c="k", lw="2")
ax.plot([0.15, 0.85], [0.85, 0.15], c="k", lw="2")

実行結果

実行結果 から、うまく描画 できていることが確認できます。

`draw_cross` の定義

draw_circle と同様の 考え方 で、任意のマス に × を描画 する draw_cross メソッドを、下記のプログラムのように定義することが できます。

def draw_cross(self, ax, x, y):
    ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c="k", lw="2")
    ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c="k", lw="2")

Marubatsu.draw_cross = draw_cross

下記は、draw_cross を使って、すべてのマス に × を描画 するプログラムです。実行結果 から 正しく動作 することが確認できます。

ax = mb.draw_board()
for x in range(3):
    for y in range(3):
        mb.draw_cross(ax, x, y)

実行結果

ゲーム盤に配置された〇と × の描画

任意のマス に〇と × を 描画できる ようになったので、draw_board を ゲーム盤 に配置された マークの描画 を 行うよう に修正します。具体的には、下記のプログラムのように、2 重の for 文 を使って すべてのマス に対して、〇が配置 されていれば draw_circle を、× が配置 されていれば draw_cross を呼び出して マークを描画 するプログラムを追加します。

3 ~ 8 行目：2 重 の for 文 を使って、ゲーム盤 の すべてのマス に対して処理を行う
5、6 行目：(x, y) に 〇が配置 されていれば draw_circle で 〇を描画 する
7、8 行目：(x, y) に × が配置 されていれば draw_cross で × を描画 する

 1  def draw_board(self, size=3):
元と同じなので省略
 2      # ゲーム盤のマークを描画する
 3      for y in range(self.BOARD_SIZE):
 4          for x in range(self.BOARD_SIZE):
 5              if self.board[x][y] == Marubatsu.CIRCLE:
 6                  self.draw_circle(ax, x, y)
 7              elif self.board[x][y] == Marubatsu.CROSS:
 8                  self.draw_cross(ax, x, y)
 9
10      # ax を返り値として返す
12      return ax
13
14  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):
    fig, ax = plt.subplots(figsize=[size, size])

    # y 軸を反転させる
    ax.invert_yaxis()

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            if self.board[x][y] == Marubatsu.CIRCLE:
                self.draw_circle(ax, x, y)
            elif self.board[x][y] == Marubatsu.CROSS:
                self.draw_cross(ax, x, y)

    # ax を返り値として返す
    return ax

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):
元と同じなので省略
    # ゲーム盤のマークを描画する
+   for y in range(self.BOARD_SIZE):
+       for x in range(self.BOARD_SIZE):
+           if self.board[x][y] == Marubatsu.CIRCLE:
+               self.draw_circle(ax, x, y)
+           elif self.board[x][y] == Marubatsu.CROSS:
+               self.draw_cross(ax, x, y)

    # ax を返り値として返す
    return ax

Marubatsu.draw_board = draw_board

下記は、いくつか のマスに着手を 行った後 で draw_board で ゲーム盤を描画 するプログラムです。実行結果 から、正しく動作 していることが確認できます。

mb.move(0, 0)
mb.move(1, 1)
mb.move(2, 1)
mb.draw_board()

実行結果

直前に着手したマークの表示色の変更

ゲーム盤 を 文字列で描画 する場合は、下記の 実行結果 のように、マーク を 大文字で表示 することで、直前に着手 した マーク を 示して いました。

print(mb)

実行結果

Turn x
o..
.xO
...

画像で ゲーム盤 を描画する場合は、大文字 と 小文字 で区別することは できない ので、別の方法 で 直前に着手 した マーク を 示す必要 があります。どのような方法で示せばよいかについて、少し考えてみて下さい。

ぱっと思いつく方法として、下記のような方法があるでしょう。このうち、マークの色 を 変える 方法が 最も簡単 なので、本記事 では その方法を採用 することにします。マスの 塗りつぶしの色 を 変える 方法や、他に もっと良い方法 を思いついた人は、時間と興味があれば実際に実装してみて下さい。

マークの色 を 変える
マスの 塗りつぶしの色 を 変える

マークの色 を 変える ためには、マーク を 描画する処理 を行う draw_circle メソッドと、draw_cross メソッドに、マークの色 を代入する 仮引数を追加 する必要が あります。本記事では その仮引数 を下記のように設定することにします。

仮引数 の名前を color とする
デフォルト値 に "black" を設定した、デフォルト引数 とする

下記は、color を追加した draw_circle と draw_cross の定義を行うプログラムです。

1、7 行目：デフォルト値 を "black" とする、デフォルト引数 color を追加する
2 行目：ec=color を記述して、円の枠 を color で 指定した色 で描画する
8、9 行目：c=color を記述して、線を color で 指定した色 で描画する

 1  def draw_circle(self, ax, x, y, color="black"):
 2      circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
 3      ax.add_artist(circle)
 4
 5  Marubatsu.draw_circle = draw_circle
 6
 7  def draw_cross(self, ax, x, y, color="black"):
 8      ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
 9      ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")
10
11  Marubatsu.draw_cross = draw_cross

行番号のないプログラム

def draw_circle(self, ax, x, y, color="black"):
    circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
    ax.add_artist(circle)

Marubatsu.draw_circle = draw_circle

def draw_cross(self, ax, x, y, color="black"):
    ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
    ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")

Marubatsu.draw_cross = draw_cross

修正箇所

-def draw_circle(self, ax, x, y):
+def draw_circle(self, ax, x, y, color="black"):
-   circle = patches.Circle([x + 0.5, y + 0.5], 0.35, fill=False, lw=2)
+   circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
    ax.add_artist(circle)

Marubatsu.draw_circle = draw_circle

-def draw_cross(self, ax, x, y):
+def draw_cross(self, ax, x, y, color="black"):
-   ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], lw="2")
+   ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
-   ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], lw="2")
+   ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")

Marubatsu.draw_cross = draw_cross

plot メソッドで 線の色 を指定する際の キーワード引数 は、c と color の どちら を使っても かまいません が、Circle メソッドの キーワード引数 に c を使うことはで きません（エラーが発生 します）。おそらく、枠線の色 を表す ec と 塗りつぶしの色 を表す fc との 区別がつきづらい からではないかと思います。

次に、draw_board を下記のように修正します。なお、下記のプログラムでは、直前に着手 した マークの色 を赤色に設定しました。他の色が良い人は自由に変更して下さい。

5 行目：変数 color に、(x, y) が 直前に着手 を行った マスと同じ 場合は、"red" を、そうでなければ "black" を代入する
7、9 行目：キーワード引数 color=color を記述することで、color に代入 された色で マークを描画 する

 1  def draw_board(self, size=3):
元と同じなので省略
 2      # ゲーム盤のマークを描画する
 3      for y in range(self.BOARD_SIZE):
 4          for x in range(self.BOARD_SIZE):
 5              color = "red" if (x, y) == self.last_move else "black"
 6              if self.board[x][y] == Marubatsu.CIRCLE:
 7                  self.draw_circle(ax, x, y, color=color)
 8              elif self.board[x][y] == Marubatsu.CROSS:
 9                  self.draw_cross(ax, x, y, color=color)
10
11      # ax を返り値として返す
12      return ax
13
14  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):
    fig, ax = plt.subplots(figsize=[size, size])

    # y 軸を反転させる
    ax.invert_yaxis()

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            if self.board[x][y] == Marubatsu.CIRCLE:
                self.draw_circle(ax, x, y, color=color)
            elif self.board[x][y] == Marubatsu.CROSS:
                self.draw_cross(ax, x, y, color=color)

    # ax を返り値として返す
    return ax

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):
元と同じなので省略
    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
+           color = "red" if (x, y) == self.last_move else "black"
            if self.board[x][y] == Marubatsu.CIRCLE:
-               self.draw_circle(ax, x, y)
+               self.draw_circle(ax, x, y, color=color)
            elif self.board[x][y] == Marubatsu.CROSS:
-               self.draw_cross(ax, x, y)
+               self.draw_cross(ax, x, y, color=color)

    # ax を返り値として返す
    return ax

Marubatsu.draw_board = draw_board

下記のプログラムのように、draw_board を実行すると、直前に着手 した (2, 1) のマスの〇が 赤く表示 されることが確認できます。

mb.draw_board()

実行結果

`draw_circle` と `draw_cross` の統合

上記のプログラムでも 問題なくゲーム盤 を 描画できます が、同じような処理 を行う、draw_circle と draw_cross を、1 つ のメソッドに まとめる ことで、プログラム を 少し簡潔 にすることが できます。

具体的 には、この 2 つの関数 を draw_mark という メソッド に まとめます。その際に、draw_mark に、どのマーク を 描画するか を代入する 仮引数 を追加する必要が あります。そこで、下記のプログラムのように 仮引数 mark を追加することにします。

1 行目：メソッド の名前を draw_mark に修正し、仮引数 mark を追加する
2 ~ 4 行目：mark が Marubatsu.CIRCLE の場合は、〇を描画 する処理を記述する
5 ~ 7 行目：mark が Marubatsu.CROSS の場合は、× を描画 する処理を記述する

1  def draw_mark(self, ax, x, y, mark, color="black"):
2      if mark == Marubatsu.CIRCLE:
3          circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
4          ax.add_artist(circle)
5      elif mark == Marubatsu.CROSS:
6          ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
7          ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")
8
9  Marubatsu.draw_mark = draw_mark

行番号のないプログラム

def draw_mark(self, ax, x, y, mark, color="black"):
    if mark == Marubatsu.CIRCLE:
        circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
        ax.add_artist(circle)
    elif mark == Marubatsu.CROSS:
        ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
        ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")

Marubatsu.draw_mark = draw_mark

draw_mark を定義する事で、draw_board を、下記のように 少し簡潔 に 記述できます。

6 行目：draw_mark の 実引数 に、(x, y) の マスのマーク を表す self.board[x][y] を記述することで、(x, y) の マークを描画 する

 1  def draw_board(self, size=3):
元と同じなので省略
 2      # ゲーム盤のマークを描画する
 3      for y in range(self.BOARD_SIZE):
 4          for x in range(self.BOARD_SIZE):
 5              color = "red" if (x, y) == self.last_move else "black"
 6              self.draw_mark(ax, x, y, self.board[x][y], color)
 7
 8      # ax を返り値として返す
 9      return ax
10
11  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):
    fig, ax = plt.subplots(figsize=[size, size])

    # y 軸を反転させる
    ax.invert_yaxis()

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)


    # ax を返り値として返す
    return ax

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):
元と同じなので省略
    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
-           if self.board[x][y] == Marubatsu.CIRCLE:
-               self.draw_circle(ax, x, y, color=color)
-           elif self.board[x][y] == Marubatsu.CROSS:
-               self.draw_cross(ax, x, y, color=color)
+           self.draw_mark(ax, x, y, self.board[x][y], color)

    # ax を返り値として返す
    return ax

Marubatsu.draw_board = draw_board

なお、(x, y) のマスが 空の場合 に、draw_mark を 呼び出す のは おかしい と 思うかもしれません が、その場合 は 以下の処理 が 行われる ので 問題はありません。

draw_mark の 仮引数 mark に Marubatsu.EMPTY が代入される
draw_mark の if 文 の 2 つの条件式 は、いずれも False になる
従って、draw_mark は何の処理も 行わない

下記は、修正後 の draw_board を使って、ゲーム盤を描画 するプログラムです。実行結果 から 正しく動作 することが確認できます。

mb.draw_board()

実行結果

なお、以後は draw_circle と draw_cross はもう 使わない ので、marubatsu.py には それらのメソッド は 記述しません。

静的メソッドとしての `draw_mark` の定義

この部分 の内容は、初心者 には わかりづらい と思いますので、意味が分からない場合 は 現時点 では 読み飛ばしても構いません。また、本記事では、draw_mark メソッドの定義の 直前の行 に @classmethod を記述することにしますが、draw_mark は 通常のメソッド と 同じ方法 で 呼び出して利用 することが できる ので、当面は、@classmethod が記述されていても、その存在を 気にする必要 は ありません。

下記の draw_mark の定義の ブロックの中 では、self は一度も 使われていません。

def draw_mark(self, ax, x, y, mark, color="black"):
    if mark == Marubatsu.CIRCLE:
        circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
        ax.add_artist(circle)
    elif mark == Marubatsu.CROSS:
        ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
        ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")
        
Marubatsu.draw_mark = draw_mark

このようなメソッド は、仮引数 から self を削除 することで、下記のプログラムのように、通常の関数 として定義する事が できます。

def draw_mark(ax, x, y, mark, color="black"):
    if mark == Marubatsu.CIRCLE:
        circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
        ax.add_artist(circle)
    elif mark == Marubatsu.CROSS:
        ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
        ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")

修正箇所

-def draw_mark(self, ax, x, y, mark, color="black"):
+def draw_mark(ax, x, y, mark, color="black"):
    if mark == Marubatsu.CIRCLE:
        circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
        ax.add_artist(circle)
    elif mark == Marubatsu.CROSS:
        ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
        ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")
        
-Marubatsu.draw_mark = draw_mark

しかし、draw_mark は、Marubatsu クラスの中で利用することを想定して定義したものなので、通常の関数 として定義すると、そのこと が わかりづらく なってしまいます。

このような場合は、以前の記事で 簡単に説明 した、静的メソッド として draw_mark を定義するという方法があります。静的メソッド は、下記のプログラムのように、メソッドの定義 の 直前の行 に、@staticmethod という デコレータ を記述し、仮引数 から self を削除 することで定義します。

@staticmethod
def draw_mark(ax, x, y, mark, color="black"):
    if mark == Marubatsu.CIRCLE:
        circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
        ax.add_artist(circle)
    elif mark == Marubatsu.CROSS:
        ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
        ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")

Marubatsu.draw_mark = draw_mark

修正箇所

+@staticmethod
-def draw_mark(self, ax, x, y, mark, color="black"):
+def draw_mark(ax, x, y, mark, color="black"):
    if mark == Marubatsu.CIRCLE:
        circle = patches.Circle([x + 0.5, y + 0.5], 0.35, ec=color, fill=False, lw=2)
        ax.add_artist(circle)
    elif mark == Marubatsu.CROSS:
        ax.plot([x + 0.15, x + 0.85], [y + 0.15, y + 0.85], c=color, lw="2")
        ax.plot([x + 0.15, x + 0.85], [y + 0.85, y + 0.15], c=color, lw="2")

Marubatsu.draw_mark = draw_mark

静的メソッド として draw_mark を定義しても、Marubatsu クラスの インスタンスから、draw_mark を 呼び出す ことが できるの で、draw_mark を利用する draw_board の プログラム を修正する必要は ありません。実際に、draw_board を修正しなくても、下記のプログラムのように、draw_board を使って ゲーム盤 を描画することが できます。

mb.draw_board()

実行結果

上記の性質から、わざわざ draw_mark を 静的メソッド で定義する 意味がない と思う人がいるかもしれませんので、静的メソッド の メリット をいくつか紹介します。

その クラス に密接に 関係がある関数 であることが明確になる
インスタンス に 関する処理 が 記述されていない ことが明確になる
インスタンス を 作成しなくても、クラス から 直接呼び出し て 利用できる

最後の利点 の 具体例 を紹介します。下記は、〇×ゲーム を リセットした後 で、2 行目 で ゲーム盤を描画 し、その後 で draw_mark メソッドで (0, 0) と (1, 1) に〇と × を描画するプログラムです。3 行目 では Marubatsu クラスの インスタンス から draw_mark を 呼び出して いますが、4 行目 では Marubatsu クラスから 直接 draw_mark を 呼び出して います。

mb.restart()
ax = mb.draw_board()
mb.draw_mark(ax, 0, 0, Marubatsu.CIRCLE)
Marubatsu.draw_mark(ax, 1, 1, Marubatsu.CROSS)

実行結果

draw_mark を 静的メソッド として 定義していない 場合は、Marubatsu クラス から 直接 draw_mark を 呼び出す と エラーが発生 します。例えば、今回の記事 で定義した draw_circle メソッドは 静的メソッドではない ので、下記のプログラムのように、Marubatsu クラスから 直接呼び出そうとする と、エラーが発生 します。

Marubatsu.draw_circle(ax, 2, 2)

実行結果

---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
Cell In[28], line 1
----> 1 Marubatsu.draw_circle(ax, 2, 2)

TypeError: draw_circle() missing 1 required positional argument: 'y'

上記のエラーメッセージは、以下のような意味を持ちます。

TypeError
データ型（Type）に関するエラー
draw_circle() missing 1 required positional argument: 'y'
draw_circle を呼び出す際に必要とされる（required）、位置引数（positional argument）y に対応する実引数（argument）が 1 つ存在しない（missing）

上記のエラー は、以前の記事で説明したように、クラスのメソッド を クラスから呼び出した 場合は、通常の関数 と 同じ処理 が行われるため、draw_circle メソッドの 仮引数 self に、対応する 実引数 が 記述されていない ことが原因で発生します。

初心者 には上記の利点が わかりづらい ので、静的メソッド は、無理に使う必要 は ありません が、利用すると 便利な場合がある ので 紹介しました。他にも 本記事 では 紹介していない使い道 があるので、興味がある方は調べてみると良いでしょう。

手番と結果の描画

ゲーム盤 を 文字列で表示 する場合は、下記の実行結果のように、ゲーム盤 の上に、手番や 勝敗の結果 を表示していました。そこで、 ゲーム盤 を 画像で描画 する場合も、ゲーム盤 の上に その情報 を描画することにします。なお、先程 restart メソッドで、ゲーム盤をリセット したので、下記のプログラムでは、いくつかのマス に着手を行っています。

mb.move(0, 0)
mb.move(1, 1)
mb.move(2, 1)
print(mb)

実行結果

Turn x
o..
.xO
...

手番や 勝敗の結果 の情報は、文字列の情報 なので、Axes の text メソッドを利用する必要が あります。下記は、文字列 で ゲーム盤 を表示する プログラムの中 で、上部に表示する メッセージを作成 する部分で、この部分 のプログラムを参考することにします。

    def __str__(self):
        # ゲームの決着がついていない場合は、手番を表示する
        if self.status == Marubatsu.PLAYING:
            text = "Turn " + self.turn + "\n"
        # 決着がついていれば勝者を表示する
        else:
            text = "winner " + self.status + "\n"
    以下略

ゲーム盤 の 左上の座標 は (0, 0)_A なので、とりあえずその位置 に 文字列を描画 することにします。下記は、draw_board に上記のプログラムと 同じメッセージ を描画する 処理を追加 したプログラムです。なお、元のプログラム では、この メッセージの後 に、ゲーム盤 を表す 文字列 を表示するので、text の最後に改行を表す "\n" を結合していましたが、画像で 文字列を描画 する場合は、この メッセージの後 に 文字列 は 存在しない ので削除しました。

4 ~ 8 行目：画面上部 に描画する 文字列 を作成し、text に代入する
9 行目：text を (0, 0)_A の位置に描画する

 1  def draw_board(self, size=3):
元と同じなので省略
 2      # 上部のメッセージを描画する
 3      # ゲームの決着がついていない場合は、手番を表示する
 4      if self.status == Marubatsu.PLAYING:
 5          text = "Turn " + self.turn
 6      # 決着がついていれば勝者を表示する
 7      else:
 8          text = "winner " + self.status
 9      ax.text(0, 0, text)
10
11    # ゲーム盤の枠を描画する
元と同じなので省略
12
13  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):
    fig, ax = plt.subplots(figsize=[size, size])

    # y 軸を反転させる
    ax.invert_yaxis()

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, 0, text)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)           

    # ax を返り値として返す
    return ax

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):
元と同じなので省略
    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
+   if self.status == Marubatsu.PLAYING:
+       text = "Turn " + self.turn
+   # 決着がついていれば勝者を表示する
+   else:
+       text = "winner " + self.status
+   ax.text(0, 0, text)

    # ゲーム盤の枠を描画する
元と同じなので省略

Marubatsu.draw_board = draw_board

下記は、修正後 に draw_board を実行して ゲーム盤を表示 するプログラムです。

mb.draw_board()

実行結果

実行結果 から、以下の問題 がある事が わかります。

文字列 が 小さすぎる
文字列 の位置が、ゲーム盤 と くっついている ように見える
枠と 目盛り が邪魔

そこで、下記のプログラムのように、文字列 を 大きく し、位置を 少し上に調整 し、枠と 目盛り の 表示を消す ように、draw_board を修正 します。

3 行目：枠と 目盛り を 表示しない ようにする
12 行目：文字列 の 描画位置 を 0.2 だけ 上にずらし、fontsize を 20 に設定して 文字列 を 大きくする

 1  def draw_board(self, size=3):
元と同じなので省略
 2      # 枠と目盛りを表示しないようにする
 3      ax.axis("off")
 4
 5      # 上部のメッセージを描画する
 6      # ゲームの決着がついていない場合は、手番を表示する
 7      if self.status == Marubatsu.PLAYING:
 8          text = "Turn " + self.turn
 9      # 決着がついていれば勝者を表示する
10      else:
11          text = "winner " + self.status
12      ax.text(0, -0.2, text, fontsize=20)
元と同じなので省略
13
14  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):
    fig, ax = plt.subplots(figsize=[size, size])

    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
    ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)
            
    # ax を返り値として返す
    return ax

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):
元と同じなので省略
    # 枠と目盛りを表示しないようにする
+   ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
+   ax.text(0, -0.2, text, fontsize=20)
元と同じなので省略

Marubatsu.draw_board = draw_board

下記は、修正後 に draw_board を実行して ゲーム盤を描画 するプログラムです。実行結果 から、問題はなさそう であることが確認できました。文字列の表示内容、大きさ、表示位置をさらに調整したい人は、自由に変更して下さい。

mb.draw_board()

実行結果

下記は、ゲーム の 決着がついた場合 に draw_board を実行して ゲーム盤を描画 するプログラムです。実行結果 から、こちらも 問題はなさそう であることが確認できました。

mb.restart()
mb.move(0, 0)
mb.move(0, 1)
mb.move(1, 0)
mb.move(1, 1)
mb.move(2, 0)
mb.draw_board()

実行結果

`play` メソッドの修正

ゲーム盤 を 画像で描画できる ようになったので、最後に play メソッドで、ゲーム盤 を 画像で表示できる ように、play メソッドを下記のように修正することにします。

ゲーム盤 を 文字列 と画像の どちらで表示 するかを代入する 仮引数 gui を追加する
gui に False が代入されている場合は 文字列 で、True が代入されている場合は、画像で ゲーム盤を表示 する
これまで の play メソッドとの 互換性を保つ ために、gui を デフォルト値 が False の デフォルト引数 とする

下記は、上記のように play メソッドを修正したプログラムです。

1 行目：False を デフォルト値 とする デフォルト引数 gui を追加する
4 ~ 8、10 ~ 14 行目：ゲーム盤を表示 する際に、gui が True の場合は、draw_board メソッドで描画するように修正する

 1  def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
元と同じなので省略
 2      while self.status == Marubatsu.PLAYING:
 3          # ゲーム盤の表示
 4          if verbose:
 5              if gui:
 6                  self.draw_board()
 7              else:
 8                  print(self)
元と同じなので省略
 9      # 決着がついたので、ゲーム盤を表示する
10      if verbose:
11          if gui:
12              self.draw_board()
13          else:
14              print(self)
15
16      return self.status
17
18  Marubatsu.play = play

行番号のないプログラム

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)
    
    # 〇×ゲームを再起動する
    self.restart()
    # ゲームの決着がついていない間繰り返す
    while self.status == Marubatsu.PLAYING:
        # ゲーム盤の表示
        if verbose:
            if gui:
                self.draw_board()
            else:
                print(self)
        # 現在の手番を表す ai のインデックスを計算する
        index = 0 if self.turn == Marubatsu.CIRCLE else 1
        # ai が着手を行うかどうかを判定する
        if ai[index] is not None:
            x, y = ai[index](self, **params[index])
        else:
            # キーボードからの座標の入力
            coord = input("x,y の形式で座標を入力して下さい。exit を入力すると終了します")
            # "exit" が入力されていればメッセージを表示して関数を終了する
            if coord == "exit":
                print("ゲームを終了します")
                return       
            # x 座標と y 座標を要素として持つ list を計算する
            xylist = coord.split(",")
            # xylist の要素の数が 2 ではない場合
            if len(xylist) != 2:
                # エラーメッセージを表示する
                print("x, y の形式ではありません")
                # 残りの while 文のブロックを実行せずに、次の繰り返し処理を行う
                continue
            x, y = xylist
        # (x, y) に着手を行う
        try:
            self.move(int(x), int(y))
        except:
            print("整数の座標を入力して下さい")

    # 決着がついたので、ゲーム盤を表示する
    if verbose:
        if gui:
            self.draw_board()
        else:
            print(self)

    return self.status

Marubatsu.play = play

修正箇所

-def play(self, ai, params=[{}, {}], verbose=True, seed=None):
+def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
元と同じなので省略
    while self.status == Marubatsu.PLAYING:
        # ゲーム盤の表示
        if verbose:
-           print(self)
+           if gui:
+               self.draw_board()
+           else:
+               print(self)
元と同じなので省略
    # 決着がついたので、ゲーム盤を表示する
    if verbose:
        print(self)
+       if gui:
+           self.draw_board()
+       else:
+           print(self)

    return self.status

Marubatsu.play = play

下記は、gui=True を 実引数に記述 して play メソッドで ai2 どうし の対戦を行うプログラムです。実際の 実行結果 は、画像が 縦に並びます が、下記では 横に並べます。

from ai import ai2
mb = Marubatsu()

mb.play(ai=[ai2, ai2], gui=True)

実行結果（実行結果はランダムなので下記とは異なる場合があります）

念のため に、下記のプログラムで gui を 記述せず に play メソッドを実行してみます。実行結果 から、これまでどおり、文字列 で ゲーム盤が表示 されることが確認できました。

from ai import ai2
mb = Marubatsu()

mb.play(ai=[ai2, ai2])

実行結果（実行結果はランダムなので下記とは異なる場合があります）

Turn o
...
...
...

Turn x
...
...
.O.

Turn o
..X
...
.o.

Turn x
O.x
...
.o.

Turn o
oXx
...
.o.

Turn x
oxx
O..
.o.

Turn o
oxx
o..
.oX

winner o
oxx
o..
Oox

人間との対戦

次に、下記のプログラムを実行して、ai2 と対戦 してみることにします。

mb.play(ai=[None, ai2], gui=True)

実行すると わかる と思いますが、ゲーム盤の画像 が 描画されません。また、テキストボックスに exit を入力して ゲームを中断 すると、その時点 で ゲーム盤の画像 が下記のように描画されます。このようなことが起きる理由について少し考えてみて下さい。

exit を 入力後 の実行結果

上記のようなことがおきる理由は、以前の記事で説明したように、画像の描画 が plt.show() が実行された時点で 行われる からです。play メソッドが 行う処理の中 では、plt.show() は 実行されない ため、play メソッドが 終了するまで の間で、ゲーム盤の画像 は 描画されません。

なお、exit を 入力した後 で、ゲーム盤の画像 が 描画される のは、JupyterLab の セルの実行 が終了して 自動的 に plt.show() が 呼び出される ためです。

細かい話 ですが、AI どうし の 対戦後 に、複数の ゲーム盤の画像 が まとめて描画 されるのは、下記のような処理が行われているからです。

draw_board の中で、subplots メソッドが 実行されるたび に、新しい Figure が作成されて pyplot に登録される
draw_board は、新しく作成 した Figure に ゲーム盤の画像 の 描画を行う
従って、AI どうし の対戦が行われた場合は、draw_board が 呼ばれた数 だけ、Figure が作成 され、pyplot に登録される
plt.show() が実行された際に、複数の Figure が登録 されていた場合は、登録されている すべての Figure の画像が 順番に描画 される

play メソッドで 人間が対戦 する場合は、ゲーム が 終了するまで に、plt.show() が 実行されない ため、ゲーム盤 が 表示されません。この問題 は、下記のプログラムの 3 行目 のように、draw_board の中で、すべて の 描画の処理 を 行った後 で、plt.show() を実行するように修正することで解決することができます。なお、plt.show() を実行すると、pyplot に登録された Figure は 自動的に削除される ので、ax に代入された Axes も 利用できなくなります。そのため、ax を return 文 で 返す処理 は削除しました。

1  def draw_board(self, size=3):
元と同じなので省略
2      # ゲーム盤を描画する
3      plt.show()
4
5  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):
    fig, ax = plt.subplots(figsize=[size, size])

    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
    ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

    # ゲーム盤を描画する
    plt.show()

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):
元と同じなので省略
    # ゲーム盤を描画する
+   plt.show()
            
    # ax を返り値として返す
    return ax

Marubatsu.draw_board = draw_board

実行結果は示しませんが、下記のプログラムを実行して ai2 と対戦 すると、今度は ゲーム盤の画面 が表示されるようになることが確認できます。

mb.play(ai=[None, ai2], gui=True)

今回の記事のまとめ

今回の記事 では、〇×ゲーム の ゲーム盤 を 画像で描画 し、実際に play メソッド で ゲーム盤の画像 を表示して 遊ぶことができるよう にしました。これで GUI の出力を行う部分は完成しましたが、座標の入力 は、相変わらず 文字で入力 を行う必要が あります。

次回の記事では、GUI の 入力部分 の処理を 記述する方法 を紹介します。

本記事で入力したプログラム

以下のリンクから、本記事で入力して実行した JupyterLab のファイルを見ることができます。

以下のリンクは、今回の記事で更新した marubatsu.py です。

次回の記事

前回の記事で説明したように、本記事では、matplotlib の Axes の座標を ゲーム盤のマスの座標 と区別するために、右下に 小さな A を表記します ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Pythonで〇×ゲームのAIを一から作成する その67 画像によるマークの描画

目次と前回の記事

これまでに作成したモジュール

ルールベースの AI の一覧

図形によるマークの描画

図形による 〇 の描画

任意のマスに 〇 を描画する方法

draw_circle の定義

図形による × の描画

draw_cross の定義

ゲーム盤に配置された 〇 と × の描画

直前に着手したマークの表示色の変更

draw_circle と draw_cross の統合

静的メソッドとしての draw_mark の定義

手番と結果の描画

play メソッドの修正

人間との対戦

今回の記事のまとめ

本記事で入力したプログラム

次回の記事

Pythonで〇×ゲームのAIを一から作成する　その67　画像によるマークの描画

図形による〇の描画

任意のマスに〇を描画する方法

`draw_circle` の定義

`draw_cross` の定義

ゲーム盤に配置された〇と × の描画

`draw_circle` と `draw_cross` の統合

静的メソッドとしての `draw_mark` の定義

`play` メソッドの修正