ガイスターアプリ開発(3) 駒を配置する画面（マウス操作）

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

はグリッドやボタンを描画しました。

今回はマウス操作でグリッドに駒を置いたり、ボタンを押したりできるようにします。

クリックで駒を置く

pygame ではpygame.event.get()からイベントを取得し、event.typeでイベントの種類（マウス、キーボードなど）を取得します。

マウスクリックならevent.type == MOUSEBUTTONDOWNで、

左クリックならさらにevent.button == 1、右クリックでならevent.button == 3という条件がつきます。

マウスカーソルの位置はevent.posから読み込めます。

クリックの種類とマウスカーソルの位置を表示するコードは次のようになります。

main.py
1
...
2
def main():
3
    ...
4
    while True:
5
        ...
6
        for event in pygame.event.get():
7
            # マウスクリック
8
            if event.type == MOUSEBUTTONDOWN:
9
                # 左
10
                if event.button == 1:
11
                    print('left:', event.pos)
12
                # 右
13
                elif event.button == 3:
14
                    print('right:', event.pos)

これで取得できる座標はウィンドウ座標ですが、扱いやすいようにゲーム内の座標に変換します。

座標変換

マウスで特定の位置をクリックしたとき、そのマス目の座標（(1, 2) など）を返すようにします。

この関数はマウス関連の処理をまとめるモジュールに定義します。

mouse.py
1
from config import *
2

3
def chcoord(pos):
4
    '''
5
    座標 pos がどのマス上にあるかその位置を返す
6
    -> tuple <- (int, int)
7
    (0, 0)│...│(5, 0)
8
    ──────┼───┼──────
9
           ...
10
    ──────┼───┼──────
11
    (5, 0)│...│(5, 5)
12

13
    pos : tuple <- (int, int)
14
        対象の座標
15
    '''
16
    return (pos-MARGIN)//SQUARE_SIZE

これでゲーム内の座標が取得できるので、クリックした位置がどこかを判定して、

そのマスの中に駒を置いていきます。

駒を置く

駒がどのように配置されているかを表す変数を用意して、クリックしたときにその変数を変更します。

main.py
1
...
2
import draw, mouse
3

4
def main():
5
    ...
6
    # 配置を決定する側
7
    # 0 - 先攻, 1 - 後攻
8
    _state = 0
9
    # 決定された初期配置と色
10
    # [{(int, int): str}]
11
    _order = [{}, {}]
12
    ...
13
    while True:
14
        screen.fill(IVORY)
15
        draw.setup(screen, font, _state)
16
        pygame.display.update()
17
        # イベントハンドリング
18
        for event in pygame.event.get():
19
            ...
20
            # マウスクリック
21
            if event.type == MOUSEBUTTONDOWN:
22
                # 左
23
                if event.button == 1:
24
                    _mouse_pos = event.pos
25
                    _square_pos = tuple(mouse.chcoord(_mouse_pos))
26
                    for i in range(1, 5):
27
                        for j in range(2, 4):
28
                            if _square_pos == (i, j):
29
                                _order[_state][(i, j)] = 'R'
30
                # 右
31
                elif event.button == 3:
32
                    _mouse_pos = event.pos
33
                    _square_pos = tuple(mouse.chcoord(_mouse_pos))
34
                    for i in range(1, 5):
35
                        for j in range(2, 4):
36
                            if _square_pos == (i, j):
37
                                _order[_state][(i, j)] = 'B'
38
            ...

その変数にしたがって駒を描画するようにします。

draw.py
1
...
2
def setup(screen, font, turn):
3
def setup(screen, font, turn, posdict):
4
    '''
5
    ...
6
    posdict : dict <- {(int, int): str}
7
        どの位置にどの色の駒が置かれているかを表す辞書
8
    '''
9
    ...
10
    for (x, y), s in posdict.items():
11
        _piece(screen, RED if s == 'R' else BLUE, (x, y))
12
    ...

main.py
1
...
2
def main():
3
    ...
4
    while True:
5
        screen.fill(IVORY)
6
        draw.setup(screen, font, _state, _order[_state])
7
        ...

ボタンを押す

ボタン上にマウスカーソルがあるときに左クリックすると何らかのアクションを起こすようにします。

駒は赤と青 4 個ずつでなければならないので、その条件を満たさないとボタンが押せないようにします。

条件を満たしているか判定する関数を定義します。

main.py
1
...
2
def _check_color(colors):
3
    '''
4
    駒がすべて配置済みで赤と青が半分ずつあるか
5
    -> bool
6

7
    colors : list <- [str]
8
        色のリスト
9
    '''
10
    return (len(colors) == 8
11
        and len([s for s in colors if s == 'R'])
12
            == len([s for s in colors if s == 'B']))
13
...

マウスの座標がボタンにのっているか調べるため、別の関数も定義します。

（左上のほうが座標が小さいことに注意）

mouse.py
1
...
2
def on_area(x, y, left, top, w, h):
3
    '''
4
    座標 x, y が範囲内にあるか
5
    -> bool
6

7
    x, y : int
8
        対象の座標
9
    left, top : int
10
        範囲の左・上端の座標
11
    w, h : int
12
        範囲の横・縦幅
13
    '''
14
    return left <= x <= left+w and top <= y <= top+h
15
...

そして、条件を満たしているときかつボタンがクリックされたときにのみ次の画面に進むことができます。

main.py
1
...
2
def main():
3
    ...
4
    while True:
5
        satisfied = _check_color(list(_order[_state].values()))
6
        ...
7
                # 左
8
                if event.button == 1:
9
                    ...
10
                    if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
11
                        if satisfied:
12
                            _state += 1
13
                ...

さらに、ボタンが押せるときと押せないときでボタンの色を変えます。

draw.py
1
...
2
def setup(screen, font, turn, posdict):
3
def setup(screen, font, turn, posdict, disabled):
4
    '''
5
    ...
6
    disabled : bool
7
        ボタンを押せない
8
    '''
9
    ...
10
    _button(screen, font, (500, 530), (80, 50), 'OK')
11
    _button(screen, font, (500, 530), (80, 50), 'OK', disabled)
12
...

main.py
1
...
2
def main():
3
    ...
4
    while True:
5
        ...
6
        draw.setup(screen, font, _state, _order[_state], not satisfied)
7
        ...

これで、駒が適切に配置されたときにのみボタンが押せるようになります。

右下のボタンの色が変わっていることがわかると思います。

効果音をつける

おまけですが、駒を置いたときやボタンを押したときに効果音をつけてみます。

main.py
1
...
2
def main():
3
    pygame.init()
4
    # 音声の設定
5
    snd = pygame.mixer.Sound
6
    select_snd = snd('./sounds/select.wav')
7
    decide_snd = snd('./sounds/decide.wav')
8
    forbid_snd = snd('./sounds/forbid.wav')
9
    ...
10
    while True:
11
        ...
12
                # 左
13
                if event.button == 1:
14
                    _mouse_pos = event.pos
15
                    _square_pos = tuple(mouse.chcoord(_mouse_pos))
16

17
                    for i in range(1, 5):
18
                        for j in range(2, 4):
19
                            if _square_pos == (i, j):
20
                                select_snd.play()
21
                                _order[_state][(i, j)] = 'R'
22

23
                    if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
24
                        if satisfied:
25
                            decide_snd.play()
26
                            _state += 1
27
                        else:
28
                            forbid_snd.play()
29
        ...

初期化して、パスを指定して音を取り込んで、該当部分で再生するだけです。

  関連記事チェスアプリ開発(16) 効果音の追加(Pygame)

---

これで駒の初期配置を選択できるようになりました。

はここで決定した配置をゲーム本番での初期配置に反映していきます。

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

では