ガイスターアプリ開発(2) 駒を配置する画面（グリッド・駒・ボタン）

Python でつくるガイスター、連載第 2 回です。

は pygame の導入とテキスト表示をしました。

今回は駒の配置を決める画面の残りの要素を描画していきます。

ガイスターでの駒の開始時の並べ方はプレイヤーが自由に決めることができますが、

その位置は赤と青の 4 つずつを手前の 8 マスの中と決まっています。

8 マスを表すグリッドを描き、左クリックで赤、右クリックで青の駒をクリックしたマスに入れていくことにします。

グリッド

まずマスを表すグリッドを描画します。

グリッド描画はゲーム本番のマス目の描画にも使いたいので関数としました。

ベクトルの計算がやりやすいように NumPy を使用します。

定数は別モジュールにまとめておきます。

config.py
1
import numpy as np
2

3
# ウィンドウサイズ
4
DISP_SIZE = (600, 600)
5
# 色の設定
6
IVORY = (240, 227, 206)
7
BLACK = (0, 0, 0)
8
# マスの大きさ
9
SQUARE_SIZE = 90
10
# マージン幅
11
MARGIN = (np.asarray(DISP_SIZE) - 6*SQUARE_SIZE)/2

draw.py
1
import numpy as np
2

3
from config import *
4

5
def _grid(screen, coord, col, row):
6
    '''
7
    一辺が SQUARE_SIZE のマスのグリッドを描く
8

9
    screen : pygame.display.set_mode
10
    coord : tuple <- (int, int)
11
        左上の座標
12
    col : int
13
        列数
14
    row : int
15
        行数
16
    '''
17
    _coord = np.asarray(coord)
18
    for i in range(row+1):
19
        pygame.draw.line(screen, BLACK,
20
            _coord + (0, SQUARE_SIZE*i),
21
            _coord + (SQUARE_SIZE*col, SQUARE_SIZE*i), 2)
22
    for i in range(col+1):
23
        pygame.draw.line(screen, BLACK,
24
            _coord + (SQUARE_SIZE*i, 0),
25
            _coord + (SQUARE_SIZE*i, SQUARE_SIZE*row), 2)
26

27
def setup(screen, font, turn):
28
    ...
29
    _text = font.render(
30
        ('先' if turn == 1 else '後') + '攻の駒の配置を決めてね（↓自分側　↑相手側）',
31
        True, BLACK)
32
    screen.blit(_text, (20, 20))
33
    _grid(screen, MARGIN + SQUARE_SIZE + (0, SQUARE_SIZE), 4, 2)

線分の描画にはpygame.draw.lineを使います。

引数はスクリーン、色、端点の座標、もう片方の端点の座標、太さです。

これで次のようになります。

駒

次に指定の色の駒を指定の位置に描く関数を定義します。

駒は三角形として描画します。

相手の駒なら逆三角形です。

config.py
1
...
2
# ウィンドウサイズ
3
DISP_SIZE = (600, 600)
4
# 色の設定
5
IVORY = (240, 227, 206)
6
RED = (200, 0, 0)
7
BLUE = (0, 0, 200)
8
BLACK = (0, 0, 0)
9
# マスの大きさ
10
SQUARE_SIZE = 90
11
# マージン幅
12
MARGIN = (np.asarray(DISP_SIZE) - 6*SQUARE_SIZE)/2
13
# 駒の大きさ
14
PIECE_SIZE = 60

draw.py
1
...
2
def _piece(screen, color, pos, rev=False):
3
    '''
4
    駒を描画する
5

6
    screen : pygame.display.set_mode
7
    color : tuple <- (int, int, int)
8
        駒の色
9
    pos : tuple <- (int, int)
10
        盤面上の駒の位置
11
    rev : bool
12
        上下反転して表示する
13
    '''
14
    _padding = (SQUARE_SIZE - PIECE_SIZE)/2
15
    _coord = np.asarray(pos)*SQUARE_SIZE + MARGIN + _padding
16
    if rev:
17
        _points = [_coord,
18
            _coord + (PIECE_SIZE, 0),
19
            _coord + (PIECE_SIZE/2, PIECE_SIZE)]
20
    else:
21
        _points = [_coord + (0, PIECE_SIZE),
22
            _coord + (PIECE_SIZE, PIECE_SIZE),
23
            _coord + (PIECE_SIZE/2, 0)]
24
    pygame.draw.polygon(screen, color, _points)

pygame.draw.polygonで多角形を描画できます。

ためしに一か所に赤駒を置いてみます。

draw.py
1
def setup(screen, font, turn):
2
    ...
3
    _text = font.render(
4
        ('先' if turn == 1 else '後') + '攻の駒の配置を決めてね（↓自分側　↑相手側）',
5
        True, BLACK)
6
    screen.blit(_text, (20, 20))
7
    _grid(screen, MARGIN + SQUARE_SIZE + (0, SQUARE_SIZE), 4, 2)
8
    _piece(screen, RED, (3, 2))

ボタン

配置を決定したあとに押す確定ボタンを描きます。

draw.py
1
...
2
def _button(screen, font, coord, size, text, disabled=True):
3
    '''
4
    ボタンを描画する
5

6
    screen : pygame.display.set_mode
7
    font : pygame.font.SysFont
8
        フォント
9
    color : tuple <- (int, int, int)
10
        背景色
11
    coord : tuple <- (int, int)
12
        左上の座標
13
    size : tuple <- (int, int)
14
        横、縦のサイズ
15
    text : str
16
        中身のテキスト
17
    disabled : bool
18
        押せなくする
19
    '''
20
    _color = (160, 140, 120) if disabled else (200, 180, 160)
21
    screen.fill(_color, (*coord, *size))
22
    _text = font.render(text, True, BLACK)
23
    _fsize = np.asarray(font.size(text))
24
    screen.blit(_text, coord + (size-_fsize)/2)
25

26
def setup(screen, font, turn):
27
    ...
28
    _text = font.render(
29
        ('先' if turn == 1 else '後') + '攻の駒の配置を決めてね（↓自分側　↑相手側）',
30
        True, BLACK)
31
    screen.blit(_text, (20, 20))
32
    _grid(screen, MARGIN + SQUARE_SIZE + (0, SQUARE_SIZE), 4, 2)
33
    _button(screen, font, (500, 530), (80, 50), 'OK')

fillは矩形を描くメソッドです。

sizeメソッドはテキストに必要な幅と高さを返します。

これを使ってテキストをボタンの中央に配置しています。

disabledという引数をとっているのは、すべてを配置するまでボタンを押せないようにするため、

それを視覚的に示すためです。

ついでに左クリックで赤、右クリックで青の駒が配置できることを説明するテキストを加えておきます。

---

これ表示するものはすべて表示できました。

は駒をグリッドの中にマウス操作で入れていけるようにします。

お読みいただきありがとうございました。

では