miどりみちのブログ

チェスアプリ開発(7) Pillow で駒を表示

プログラミング
プログラミング
Python
Python
OpenGL
OpenGL
アプリ開発
アプリ開発
チェス
チェス

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 7 回です。

で駒を乗せるための盤面が準備できました。

今回は、盤面に配置する駒の画像を準備して読み込んで画面に表示していきたいと思います。


画像を準備

こちらの画像を使わせていただいています。

→ Clker-Free-Vector-ImagesによるPixabayからの画像

こちらをダウンロードして、画像編集ソフト（私は GIMP を使っています）で各 100x100 のサイズのものを白黒合わせて 12 枚作りました。

画像の名前は、例えば白のクイーンなら WQ.png、黒のナイトなら BN.png というように、

色と棋譜における駒を表す記号をもとにしています。

当初この画像ファイルは、メインのプログラムと同一階層に新たなフォルダをつくってその下に配置していました。

▼ chess
├─ main.py
├─ pieces.py
├▼ img
│├─ BB.png
│├─ ...
│└─ WR.png

今はコードが増えたので、 Python ファイルをまとめるフォルダを作り、次のような構成になっています。

▼ chess
├▼ codes
│├─ main.py
│└─ pieces.py
├▼ img
│├▼ B
││├─ BB.png
││├─ ...
││└─ BR.png
│├▼ W
││├─ WB.png
...

ここでは後者の構成に基づいてコードを書いていきます。


画像の読み込みと設定

を使って画像を処理します。

pip でインストールします。

pip install Pillow

テクスチャの設定

ところで、画像の表示にはテクスチャマッピングというものを使っています。

テクスチャとは画像を貼り付ける板みたいなもので、板の角の座標と画像の角の座標を対応させることで、

板を移動させたり回転させたりしても画像が動いているように見えるという感じですね。

それでテクスチャの設定が必要なのですが、正直言って何をやっているかよくわかっていません。笑

こちらの記事とか読むとなんとなくわかるかも。

→ OpenGL でゲームを作る　テクスチャを表示する

utils.py
1
from PIL import Image
2
...
3
　
4
　
5
def set_img(name, path, imgID):
6
    '''画像の設定: name.pngを読み込む
7


8
    Parameters
9
    ----------
10
    name : str
11
        画像のファイル名．
12
    path : str > 'W', 'B'
13
        画像があるフォルダ名．
14
    imgID : int
15
        指定する画像ID．
16
    '''
17
    img = Image.open(f'../img/{path}/{name}.png')   # 画像を読み込む
18
    w, h = img.size                                 # 画像の横幅、縦幅
19
    glBindTexture(GL_TEXTURE_2D, imgID)             # imgID のテクスチャを有効化する
20
    # 画像とテクスチャを関連づける
21
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, w, h, 0,
22
        GL_RGBA, GL_UNSIGNED_BYTE, img.tobytes())
23
    # テクスチャの設定
24
    glTexParameter(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR)
25
    glTexParameter(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR)
26
　
27
　
28
def draw_img(x, y, imgID):
29
    '''画像を描画する
30


31
    Parameters
32
    ----------
33
    x, y : float
34
        描画する座標．
35
    imgID : int
36
        画像ID．
37
    '''
38
    glPushMatrix()          # 変形範囲の開始
39
    glBindTexture(GL_TEXTURE_2D, imgID)     # imgID のテクスチャを有効化する
40
    glTranslate(x, y, 0)    # 平行移動
41
    glColor(1, 1, 1)        # 色指定
42
　
43
    # テクスチャ座標を指定する
44
    glBegin(GL_QUADS)
45
    glTexCoord(0.0, 1.0)
46
    glVertex(-1.0 / 2, -1.0 / 2)
47
    glTexCoord(1.0, 1.0)
48
    glVertex(1.0 / 2, -1.0 / 2)
49
    glTexCoord(1.0, 0.0)
50
    glVertex(1.0 / 2, 1.0 / 2)
51
    glTexCoord(0.0, 0.0)
52
    glVertex(-1.0 / 2, 1.0 / 2)
53
    glEnd()
54
　
55
    glPopMatrix()           # 変形範囲の終了
56
　
57
　
58
def draw_pieces(gameboard, imgID_dict, size=8):
59
    '''駒を描画する
60


61
    Parematers
62
    ----------
63
    gameboard : dict > {(int, int): obj, ...}
64
        盤面．
65
    imgID : int
66
        画像ID．
67
    size : int, default 8
68
        盤面の大きさ．
69
    '''
70
    glEnable(GL_TEXTURE_2D)    # テクスチャマッピングを有効化
71
    for i in range(size):
72
        for j in range(size):
73
            piece = gameboard.get((i, j))    # (i, j)にある駒オブジェクトを取得
74
            if piece:
75
                draw_img(i, j, imgID_dict[piece.name])
76
    glDisable(GL_TEXTURE_2D)   # テクスチャマッピングを無効化

テクスチャは整数の番号で管理されています。

glTexImage2D()の最後の引数はimg.tobytes()というふうに、バイトに変換しなければならないようです。

imgID_dictは{'WN': 1, 'WR': 2, ...}みたいな感じの

にしています。
pieces.py
1
class Knight(Piece):
2
    abbr = 'N'
3
    def availableMoves(self, x, y, gameboard, Color=None):
4
        ...
5
　
6
class Rook(Piece):
7
    abbr = 'R'
8
    def availableMoves(self, x, y, gameboard, Color=None):
9
        ...
10
...
11
　
12
piece_names = [Knight, Rook, Bishop, Queen, King, Pawn]
13
　
14
# 画像IDの割り当て
15
piece_ID = {}
16
for i, piece in enumerate(piece_names):
17
    piece_ID['W' + piece.abbr] = i + 1
18
    piece_ID['B' + piece.abbr] = -(i + 1)

元のコードのuniDictは、あとからまとめて指定している感じですが、

これから駒が増えていくのに備えて、各駒のクラス内で駒を表す新たな

（`abbr`）を定義しました。

uniDictを使わなくなったので、関係各所で調整を入れつつ、

画像関連の処理も入れ込みます。

main.py
1
def placePieces(self):
2
    for i in range(0, 8):
3
        self.gameboard[(i, 1)] = Pawn(WHITE, uniDict[WHITE][Pawn], 1)
4
        self.gameboard[(i, 6)] = Pawn(BLACK, uniDict[BLACK][Pawn], -1)
5
        self.gameboard[(i, 1)] = Pawn(WHITE, 'WP', 1)
6
        self.gameboard[(i, 6)] = Pawn(BLACK, 'BP', -1)
7
　
8
    placers = [Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook]
9
　
10
    for i in range(0, 8):
11
        self.gameboard[(i, 0)] = placers[i](WHITE,uniDict[WHITE][placers[i]])
12
        self.gameboard[(i, 7)] = placers[i](BLACK,uniDict[BLACK][placers[i]])
13
        self.gameboard[(i, 0)] = placers[i](WHITE, 'W' + placers[i].abbr)
14
        self.gameboard[(i, 7)] = placers[i](BLACK, 'B' + placers[i].abbr)
15
...
16
　
17
def draw(self):
18
    ...
19
    draw_pieces(self.gameboard, piece_ID)
20
    ...
21
...
22
　
23
def glmain(self):
24
    ...
25
    # 画像の設定
26
    for name, num in piece_ID.items():
27
        set_img(name, name[0], num)
28
　
29
    glutMainLoop()

これでいったん表示させてみます。

画像透過なし

おっと、透過の設定をしなければいけませんね。

透過の設定

一応画像は透過情報も入っているのですが、 OpenGL に透過情報を含めて描画してもらう必要があります。

main.py
1
def draw(self):
2
    '''描画コールバック'''
3
    glClearColor(0.6, 0.4, 0.2, 1.0)
4
    glClear(GL_COLOR_BUFFER_BIT)
5
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)    # 混合処理の演算方法を指定
6
    glEnable(GL_BLEND)        # 混合処理を有効化
7
    ...
8
    draw_pieces(self.gameboard, piece_ID)
9
    glDisable(GL_BLEND)        # 混合処理を無効化
10
    glutSwapBuffers()
画像透過あり

問題なく表示できました！

これで表示はできたわけですが、まだ駒を動かすことができません。

はマウス操作で駒を動かせるようにしたいと思います。

この記事がお役に立てたならうれしいです☺️

それでは～👋