私は、声が小さいとかよく聞き返されるとかで長い間悩んでいました。

話すときだけでなく歌うときも、マイクの音量を大きめに、BGM を小さめにしないとうまく歌えないという状況がずっと続いていました。

しかしひょんなことから、それまでよりも大きく声を出せるようになり、聞き返されることも減りました。



 

声が小さいのには、肺活量よりももっと大事な原因が潜んでいることもあるのです。

それは自分の声に対する**自信**です。

私がそれに気づくことができたきっかけを書いていきます。

 

<toc />

## マイク

あるとき、録音用にマイクを買いました。

<affiliate asin="B08CVTBDK9" id="c83de71f8befe0c167c390fdad48457f" label="MAONO マイク USBマイク コンデンサーマイク PC用マイク 192KHZ/24BIT マイクセット 高音質 高音質 単一指向性 マイクスタンド付き 録音/生放送/YOUTUBE/ゲーム実況/ZOOM(AU-PM420T)" />

そのマイクで録った音が結構他人から聞こえている音に近いなと思って、それで声を録って聞いたりして練習していました。

それまでの録音だと、自分の声が悪いのか録音機材の音質が悪いのかよくわからないし、

ある意味それを言い訳にもできたのですが、

これは原音に近いので疑いようもなく言い訳もできません。

このマイクで録音した声がいい声なら、私はいい声なのです。笑

 

## 歌声

歌に関して持っていた問題のひとつに、

「地声と裏声はスムーズに切り替えられるけど、裏声が細々として子どもっぽく声質がまるで違う」というのがありました。

そこで、声を大人っぽくする方法に「口を縦に開ける」というのがあったので、

これを採用するといい感じになりました。

（いい感じだと気づけたのも録音に言い訳が効かないから）

 

それまではこの細々とした裏声を目立たせないために、地声のほうも弱くして歌っていて、

結果声量が小さくなってしまっていたのです。

この度裏声の細さが改善したため、強めに声を出しても声区の切り替えがスムーズになり、

自信がついたのもあって声量も改善しました。

今ではカラオケでマイク音量とミュージック音量が同じぐらいでも歌えるようになりました。

<fukidashi face="ase">

まさか声量が小さい原因がそこにあるとは…

</fukidashi>

<relpos link="koe-okisa-yoso" />

 

## 話し声

マイクで普段家の中とか静かなところで話したり歌ったりするときの声を録って聞くというのはもう慣れていたので、

もう少し大きな声を出すとどんなふうに聞こえるんだろう？と、ふと思い録音してみました。

それで聞いてみると、**意外とまとも**では！？笑

 

それまでは大きな声を出すと、なんだかきれい声じゃない気がしていたのですが、

聞いてみるとこれはこれで悪くないんじゃないかと…

話し声と録音の声は違うというのは知っていたのですが、これは意外でした。

それで自信がついて、はきはきと話すことに対する恐怖が少なくなりました。

いい声を出そうとして自信がなくて声が小さくなると、逆に悪い声になるんですよね…

<fukidashi>

何につけても自信を持つのって大事なんだね

</fukidashi>

<relpos link="tsutawariyasui-koe" />

---

参考になったらうれしいです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

私は、声が小さいとかよく聞き返されるとかで長い間悩んでいました。
話すときだけでなく歌うときも、マイクの音量を大きめに、BGM を小さめにしないとうまく歌えないという状況がずっと続いていました。
しかしひょんなことから、それまでよりも大きく声を出せるようになり、聞き返されることも減りました。
…

声が小さい原因は意外なところにあるのかも

<tltp label="Socket.IO">クライアント-サーバ間の双方向通信ができる JS ライブラリ [公式サイト](https://socket.io/)</tltp>
 で作成した通信対戦アプリをデプロイするときに結構苦労したので、その記録を書いておきます。



当該のアプリはこちらです。

→ [Geister Online](https://geister-online.netlify.app)

 

<toc />

## アプリの構造

Socket.IO を使用して、クライアント-サーバ間で通信をするアプリです。

コードは TypeScript で書き、Webpack を使って、

クライアントのコードは`public/bundle.js`として、サーバのコードは`dist/main.js`としてコンパイルしています。

`public`配下の HTML の`script`タグから`bundle.js`を読み込み、

ローカルでは`node dist/main.js`をターミナルから入力することでサーバのコードを動かしていました。

ディレクトリ構成は、このようになっていました。

```yml hide_nums
# 静的ファイル
public/
 # css、画像、音声など
 - static/
 - bundle.js
 - index.html
# サーバのコードがコンパイルされたやつ
dist/
 - main.js
# クライアントのコード
src/
# サーバのコード
server.ts
package.json
tsconfig.json
webpack.config.js
...
```

 

## デプロイ方法

`public`配下の静的ファイルは [Netlify](https://www.netlify.com/)、`dist`配下のサーバのファイルは [Heroku](https://jp.heroku.com/) で動かしています。

以下の図のように、クライアントサイドは Netlify、サーバサイドは Heroku っていう感じです。

<postimage src="relation" ext="svg" alt="デプロイの構造" />

おそらく Netlify は静的専用なので、動的なことはできないんだと思います。

この動画を参考にしながらデプロイを進めていきました。

<yout id="M9RDYkFs-EQ" />

 

しかし、ここでいくつか問題が発生してしまいました。

 

## 問題点

### Heroku でビルドできない

Heroku でビルドできなかったので、デプロイログを見ると、`package.json`がないとのこと。

Heroku のプロジェクトパスには`dist`を指定しているのですが、その中には`main.js`しかないからです。

仕方ないのでルートにあった`package.json`を`dist`に移動すると、ビルドできるようになりました。

<fukidashi face="ase">

こんなところにあっていいんだろうか…

</fukidashi>

### Heroku で Application error

`heroku logs --tail`すると、`code=H10 desc=App crashed status=503`なエラー。

ログを遡ると、`npm start`でこけてるっぽい。

実は`package.json`の中身はこうなっていました。

```json name=package.json
{
 ...
 "scripts": {
 "start": "npx webpack && node dist/main.js"
 },
 ...
}
```

このファイルのパスをさきほど変えたので、この部分のパスも変えなくてはなりません。

`webpack.config.js`をこの`dist`ディレクトリに入れてもいいかもしれないですが、

このファイルはクライアントのコードもコンパイルしているし、いろいろ面倒そうなので、

ローカルで`npx webpack`して、`npm start`には`node main.js`だけ載せることにしました。

```json name=package.json
{
 ...
 "scripts": {
 "start": "node main.js"
 },
 ...
}
```

これで Heroku 側の 503 エラーはなくなりました。

いまだに Heroku の URL には Not Found と表示されますが、本体は Netlify 側の URL なので問題ないと思います。

<fukidashi face="neut">

コードの変更があるとデプロイのたびにローカルでいちいちコンパイルしないといけないのがつらいけど、仕方ないか

</fukidashi>

### ブラウザで CORS エラー

これが一番煩わしかったです。

ブラウザで Netlify の URL にアクセスして、デベロッパーツールのコンソールを開くと、

[このエラー](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin)が表示されました。

セキュリティ的な意味で、**ドメインが違うサイト間で通信するには明示が必要**だということです。

さて、困ったのはどこにそれを書けばいいのかわからないということでした。

クライアント側か？サーバ側か？

 

クライアント側だとすれば、Netlify の`netlify.toml`や`_headers`ファイルで HTTP ヘッダを指定することができます。

ところがこれを追加してもうまくいかず…

ということはサーバ側かと思って、Express.js の CORS について調べていろいろ書いてみるも、うまくいかず…

先の動画でもそのコードでも何か特別なことをしているようには見えなかったし、八方塞がりでありました。

 

ところが、ふと「Socket.IO CORS」で調べると、

なんと**バージョンが変わってからは明示的な CORS 設定が必要**とか言うじゃないですか。

→ [Handling CORS | Socket.IO](https://socket.io/docs/v3/handling-cors/)

<fukidashi face="ase">

そんなところに原因があるとは思わなかったよ…

</fukidashi>

Netlify の設定ファイルも Express の CORS のコードも必要なく、これだけでヘッダを認識するようになりました。

 

それで、origin として設定する URL は Netlify の URL にすべきだったのですが、

Heroku の URL にするものだと勘違いしていたため、またも[エラー](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin)。

よく考えれば Socket.IO の CORS 設定のコード（サーバのコード）は Heroku 側だし、

Heroku 側が Netlify 側をブロックしてるんだから、Netlify の URL を書くべきだったんですね。

 

これでエラーもきれいになくなり、期待通りに動くようになりました。

---

お役に立てれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Socket.IO
で作成した通信対戦アプリをデプロイするときに結構苦労したので、その記録を書いておきます。
…

【Netlify + Heroku】Socket.IO アプリのデプロイ

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

<pstlk label="前回" to="geister-app-dev-5" />は駒の移動と手番の交代を実装しました。

今回は勝敗の判定と表示をしていきます。



 

<toc />

## 勝敗判定

勝敗の条件を関数で定義します。

```py name=game.py hl_lines=2-29,33-37
...
def win_req(taken, board, side, moved):
 '''
 side が勝利条件を満たすか
 -> bool

 taken : list <- [{'R': int, 'B': int}]
 取った駒
 board : dict <- {(int, int): Piece}
 ゲームボード
 side : int <- 0 | 1
 先攻(0), 後攻(1)
 moved : bool
 side が今駒を動かしたか
 '''
 assert side == 0 or side == 1, 'game.win_req の引数 side は 0, 1 の値を取ります'
 if not moved:
 # 赤を4つ取らせた
 if taken[(side+1)%2]['R'] == 4:
 return True
 else:
 # 青を4つ取った
 if taken[side]['B'] == 4:
 return True
 # 青が盤外に出た
 if side == 0 and ((0, -1) in board or (5, -1) in board):
 return True
 if side == 1 and ((0, 6) in board or (5, 6) in board):
 return True
...
def main(screen, font, font_small, orders, move_snd, chturn_snd):
 ...
 # 取った駒 [{'R': int, 'B': int}]
 _taken_pieces = [{'R': 0, 'B': 0}, {'R': 0, 'B': 0}]
 # 勝者
 # 0 - 先攻, 1 - 後攻
 _winner = -1
 ...
```

取った駒の色とその数を変数`_taken_pieces`に代入して、引数に渡します。

判定のタイミングは、駒を動かし終わったときにしますので、

マウスイベントの内部です。

```py name=game.py hl_lines=2,21-23,30-36 inline_hl=2:16-17
...
def main(screen, font, font_small, orders, move_snd, chturn_snd, win_snd):
 ...
 while True:
 ...
 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 ...
 if _square_pos in _board and _board[_square_pos].side == _turn:
 # 駒を選択したとき
 _selecting_pos = _square_pos
 else:
 # 行先を選択したとき
 if (_selecting_pos in _board
 and _square_pos in _board[_selecting_pos].covering_squares(_selecting_pos)):
 # 行先が相手の駒のとき
 if _square_pos in _board and _board[_square_pos].side != _turn:
 _taken_pieces[_turn][_board[_square_pos].color] += 1
 # 駒の移動
 move_snd.play()
 _board[_square_pos] = _board[_selecting_pos]
 del _board[_selecting_pos]
 # 移動完了
 _move_finished = True
 # 勝利判定
 if win_req(_taken_pieces, _board, _turn, True):
 win_snd.play()
 _winner = _turn
 if win_req(_taken_pieces, _board, (_turn+1)%2, False):
 win_snd.play()
 _winner = (_turn+1)%2
 _selecting_pos = None
 ...
```

自分が駒を動かした瞬間に相手が勝つ場合（相手の悪いおばけをすべて取ったとき）もあるので、

条件分岐は2つになっています。

 

## 画面に勝者を表示

次に勝敗が決まったときに画面に結果を表示します。

表示するものを関数で定義します。

```py name=draw.py
...
def win_message(screen, font, side):
 '''
 勝敗の結果を知らせるメッセージを表示する

 screen : pygame.display.set_mode
 font : pygame.font.SysFont
 フォント
 side : int <- 0 | 1
 '''
 assert side == 0 or side == 1, 'draw.win_message の引数 side は 0, 1 の値を取ります'
 _str = ('先' if side == 0 else '後') + '攻の勝ち！'
 _text = font.render(_str, True, BLACK)
 _margin = (DISP_SIZE-(3*SQUARE_SIZE, SQUARE_SIZE))/2
 screen.fill(WHITE, (*_margin, 3*SQUARE_SIZE, SQUARE_SIZE))
 screen.blit(_text, DISP_SIZE/2-(len(_str)*32/2, 32/2))
...
```

勝者が決まったときにこれを描画します。

さらに、その画面でスペースキーを押すと隠れていたすべての駒の色を表示するようにします。

```py name=game.py hl_lines=9-11,21-24
...
def main(screen, font, font_small, orders, move_snd, chturn_snd, win_snd):
 ...
 while True:
 ...
 # 盤面
 draw.board(screen, _board, _turn)
 ...
 # 勝敗
 if _winner == 0 or _winner == 1:
 draw.win_message(screen, font, _winner)
 ...
 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # キー
 if event.type == KEYDOWN:
 ...
 # Space キー
 if event.key == K_SPACE:
 if _winner >= 0:
 # 開示
 _winner = 2
 _turn = 2
 ...
```

`_winner = 2`は勝敗の表示を消すため、

`_turn = 2`はすべての駒を開示するためのものです。

`draw.board`の第三引数に`2`を指定すると<pstlk label="すべての駒の色を隠すことなく表示します" to="geister-app-dev-4/#盤面を描画する" />。

<video src="win" />

---

これでガイスターが遊べるようになりました！

コードは [GitHub](https://github.com/midorimici/py-geister) からどうぞ。

読んでくれてありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 6 回です。
前回は駒の移動と手番の交代を実装しました。
今回は勝敗の判定と表示をしていきます。
…

ガイスターアプリ開発(6) 勝敗判定

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

<pstlk label="前回" to="geister-app-dev-4" />は初期盤面を生成して描画しました。

今回は駒の移動とターン交代の画面を用意します。



ガイスターでは相手の駒が見えてはいけないので、

ターン交代のたびに引継ぎのための画面を表示します。

 

<toc />

## 駒の移動

駒をクリックしたときに行先を表示し、それをクリックするとその場所に移動するようにします。

まずは行先を表す円を描画します。

```py name=draw.py
...
def dest(screen, pos, board):
 '''
 駒の行先を円で表示する

 screen : pygame.display.set_mode
 pos : tuple <- (int, int)
 駒の位置
 board : dict <- {(int, int): Piece}
 駒の位置とオブジェクト
 '''
 for _pos in board[pos].covering_squares(pos):
 # 自分の駒を除外
 if not (tuple(_pos) in board and board[tuple(_pos)].side == board[pos].side):
 _coord = np.asarray(_pos)*SQUARE_SIZE + MARGIN + SQUARE_SIZE/2
 pygame.draw.circle(screen, LAWNGREEN, [int(c) for c in _coord], int(PIECE_SIZE/2))
...
```

`LAWNGREEN`は色の定数で、定数をまとめてある別モジュールに定義してあります。

`pygame.draw.circle`の引数には中心の座標と半径を指定します。

 

これを、駒をクリックしたときに表示します。

```py name=main.py hl_lines=2-9,15-18,30-44 inline_hl=2:6-9;15:7-8
...
def main(screen, font, font_small, orders, move_snd):
 # ボード描画に渡すパラメータ
 # 0 - 先攻, 1 - 後攻, 2 - 終了後
 _turn = 0
 # マウス選択中の駒の位置
 _selecting_pos = None
 # 動かし終わった
 _move_finished = False
 ...

 while True:
 screen.fill(IVORY)
 # 盤面
 draw.board(screen, _board, _turn)
 if _selecting_pos is not None:
 # 行先
 draw.dest(screen, _selecting_pos, _board)
 pygame.display.update()

 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))
 if _move_finished: continue
 if _square_pos in _board and _board[_square_pos].side == _turn:
 # 駒を選択したとき
 _selecting_pos = _square_pos
 else:
 # 行先を選択したとき
 if (_selecting_pos in _board
 and _square_pos in _board[_selecting_pos].covering_squares(_selecting_pos)):
 # 駒の移動
 move_snd.play()
 _board[_square_pos] = _board[_selecting_pos]
 del _board[_selecting_pos]
 # 移動完了
 _move_finished = True
 _selecting_pos = None
 ...
```

<video src="move" />

 

## ターン交代

次にターン交代の画面を用意します。

まずは引継ぎ画面を描画する関数を定義します。

```py name=draw.py
...
def confirmation(screen, font, font_small, turn):
 '''
 手番交代の確認画面を表示する

 screen : pygame.display.set_mode
 font, font_small : pygame.font.SysFont
 フォント
 turn : int <- 0 | 1
 0 - 次は先攻, 1 - 次は後攻
 '''
 assert turn == 0 or turn == 1, 'draw.confirmation の引数 turn は 0, 1 の値を取ります'
 screen.fill(WHITE, (*MARGIN, 6*SQUARE_SIZE, 6*SQUARE_SIZE))
 _str1 = ('先' if turn == 0 else '後') + '攻のターンだよ'
 _str2 = '画面をクリックしてね'
 _str3 = '動かし終わったらスペースキーを押してね'
 _text1 = font.render(_str1, True, BLACK)
 _text2 = font.render(_str2, True, BLACK)
 _text3 = font_small.render(_str3, True, BLACK)
 screen.blit(_text1, DISP_SIZE/2-(len(_str1)*32/2, 32))
 screen.blit(_text2, DISP_SIZE/2-(len(_str2)*32/2, -32))
 screen.blit(_text3, DISP_SIZE/2-(len(_str3)*16/2, -32*4))
...
```

盤面を白い矩形で覆い隠し、その上にテキストを描いています。

プレイヤーは駒を動かし終わったらスペースキーを押してこの画面を表示し、

もう一方のプレイヤーが画面をクリックするとそのプレイヤーに交代することになります。

```py name=game.py hl_lines=6-8,13-15,27-30,35-42
...
def main(screen, font, font_small, orders, move_snd, chturn_snd):
 # ボード描画に渡すパラメータ
 # 0 - 先攻, 1 - 後攻, 2 - 終了後
 _turn = 0
 # 次の番を確認する画面を表示するときに渡すパラメータ
 # 0 - 先攻, 1 - 後攻, 2 - なし
 _next = 0
 ...

 while True:
 ...
 if _next == 0 or _next == 1:
 # 交代確認画面
 draw.confirmation(screen, font, font_small, _next)
 ...

 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))
 # 確認画面のクリック
 if _next == 0 or _next == 1:
 _next = 2
 continue
 ...
 # キー
 if event.type == KEYDOWN:
 ...
 # Space キー
 if event.key == K_SPACE:
 if _move_finished:
 # ターン交代
 chturn_snd.play()
 _turn = (_turn+1)%2
 _next = _turn
 _move_finished = False
 ...
```

ゲーム開始直後も確認画面を表示するために、`_next = 0`としています。

<video src="chturn" />

---

<pstlk label="次回" to="geister-app-dev-6" />は勝利条件を判定して、勝者を表示するところまでやりたいと思います。

読んでくださってありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 5 回です。
前回は初期盤面を生成して描画しました。
今回は駒の移動とターン交代の画面を用意します。
…

ガイスターアプリ開発(5) 駒の移動・ターン交代

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

<pstlk label="前回" to="geister-app-dev-3" />はマウス操作で駒の初期配置を決められるようになりました。

今回はゲーム本番での初期盤面を描画するところまでやっていきます。



 

<toc />

## モジュールに切り分ける

駒の初期配置を決定するモジュールと、ゲーム本番での動作を規定するモジュールを分けて書きたいので、

共通部分だけ`main.py`に置いて、そこから各モジュールを呼び出す形にします。

```py name=setup.py
import sys

import pygame
from pygame.locals import *

from config import IVORY
import draw, mouse


def _check_color(colors):
 '''
 駒がすべて配置済みで赤と青が半分ずつあるか
 -> bool

 colors : list <- [str]
 色のリスト
 '''
 return (len(colors) == 8
 and len([s for s in colors if s == 'R'])
 == len([s for s in colors if s == 'B']))


def main(screen, font, select_snd, decide_snd, forbid_snd):
 # 配置を決定する側
 # 0 - 先攻, 1 - 後攻
 _state = 0
 # 決定された初期配置
 # [{(int, int): Piece}]
 _order = [{}, {}]

 while True:
 satisfied = _check_color(list(_order[_state].values()))

 screen.fill(IVORY)
 draw.setup(screen, font, _state, _order[_state], not satisfied)
 pygame.display.update()

 # イベントハンドリング
 for event in pygame.event.get():
 # 閉じるボタン
 if event.type == QUIT:
 pygame.quit()
 sys.exit()
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))

 for i in range(1, 5):
 for j in range(2, 4):
 if _square_pos == (i, j):
 select_snd.play()
 _order[_state][(i, j)] = 'R'
 
 if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
 if satisfied:
 decide_snd.play()
 _state += 1
 else:
 forbid_snd.play()
 # 右
 elif event.button == 3:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))

 for i in range(1, 5):
 for j in range(2, 4):
 if _square_pos == (i, j):
 select_snd.play()
 _order[_state][(i, j)] = 'B'
 # キー
 if event.type == KEYDOWN:
 # Esc キー
 if event.key == K_ESCAPE:
 pygame.quit()
 sys.exit()
```

```py name=game.py
import sys

import pygame
from pygame.locals import *

from config import IVORY


def main(screen):
 while True:
 screen.fill(IVORY)
 pygame.display.update()

 # イベントハンドリング
 for event in pygame.event.get():
 # 閉じるボタン
 if event.type == QUIT:
 pygame.quit()
 sys.exit()
 # キー
 if event.type == KEYDOWN:
 # Esc キー
 if event.key == K_ESCAPE:
 pygame.quit()
 sys.exit()
```

```py name=main.py hl_lines=21-22
import sys

import pygame
from pygame.locals import *

from config import DISP_SIZE
import setup, game


if __name__ == '__main__':
 pygame.init()
 # 音声の設定
 snd = pygame.mixer.Sound
 select_snd = snd('./sounds/select.wav')
 decide_snd = snd('./sounds/decide.wav')
 forbid_snd = snd('./sounds/forbid.wav')

 pygame.display.set_caption('Geister')
 font = pygame.font.SysFont('hg丸ｺﾞｼｯｸmpro', 16)


 setup.main(screen, font, select_snd, decide_snd, forbid_snd)

 game.main(screen)
```

 

`setup.py`での`while`ループが終了すれば`game.py`でのループが開始します。

 

## 駒クラスを作成する

盤面のデータは、位置：駒の辞書型にすることにします。

駒はオブジェクトとして、どちら側の駒か、色は何かなどの属性を持たせます。

```py name=piece.py
import numpy as np

class Piece:
 def __init__(self, color, side):
 self.color = color # 赤('R') or 青('B')
 self.side = side # 先攻(0) or 後攻(1)
 
 def __repr__(self):
 return self.color + str(self.side)
 
 def covering_squares(self, pos):
 '''
 可能な移動先のマスのリスト
 -> list <- [(int, int)]

 pos : tuple <- (int, int)
 現在の位置
 '''
 pos_ = np.asarray(pos) + [(0, 1), (0, -1), (-1, 0), (1, 0)]
 dest = [(x, y) for x, y in pos_ if 0 <= x <= 5 and 0 <= y <= 5]
 if self.color == 'B':
 if self.side == 0:
 if pos == (0, 0):
 dest += [(0, -1)]
 if pos == (5, 0):
 dest += [(5, -1)]
 elif self.side == 1:
 if pos == (0, 5):
 dest += [(0, 6)]
 if pos == (5, 5):
 dest += [(5, 6)]

 return dest
```

`__repr__`メソッドはデバッグのときに役立ちます。

`print`したときに出力される文字列を返しますが、これがないとオブジェクトidだけを返すので属性の情報がわかりづらくなります。

 

`convering_squares`メソッドの条件分岐は、良いおばけが相手の陣地の角から脱出することができるようにするものです。

 

## 初期盤面を生成する

プレイヤーの配置から初期盤面を生成する関数を作ります。

```py name=setup.py
...
from piece import Piece
...

def _init_board(order1, order2):
 '''
 駒の配置から初期盤面を出力
 -> dict <- {(int, int): Piece}

 order1, order2 : dict <- {(int, int): str}
 駒の初期配置. order1 が先攻
 '''
 return {**{(5-x, 3-y): Piece(s, 1) for (x, y), s in order2.items()},
 **{(x, y+2): Piece(s, 0) for (x, y), s in order1.items()}}

```

盤面は左上が`(0, 0)`から右下が`(5, 5)`までで座標を取っていて、

駒の位置は先手が`(1, 4)`から`(4, 5)`、後手が`(1, 0)`から`(4, 1)`までとなります。

マウスで登録したときには左上`(1, 2)`、右下`(4, 3)`になっているので、座標を変換しています。

先手は平行移動だけですが、後手は180度回転もしています。

 

これで`_init_board(*_order)`とすれば、初期盤面を返すことができます。

これを`setup.main()`の返り値として`main.py`に渡し、

さらに`game.py`に引数として渡すことで盤面を描画していきます。

```py name=setup.py hl_lines=14
...
 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 ...
 
 if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
 if satisfied:
 decide_snd.play()
 if _state == 1: return _init_board(*_order)
 _state += 1
 ...
```

```py name=main.py hl_lines=4-5, inline_hl=4:0;5:5-6
...
if __name__ == '__main__':
 ...
 orders = setup.main(screen, font, select_snd, decide_snd, forbid_snd)
 game.main(screen, orders)
```

```py name=game.py hl_lines=2 inline_hl=2:6-7
...
def main(screen, orders):
 ...
```

### 盤面を描画する

さて、盤面を描画する関数を定義していきます。

ガイスターでは良いおばけが盤の角から外に出ると勝ちというルールがあるので、

角に矢印を描いています。

```py name=draw.py
...
def _arrow(screen, coord, direction):
 '''
 矢印を描く

 screen : pygame.display.set_mode
 coord : tuple <- (int, int)
 矢先の座標
 direction : str <- 'U', 'D'
 'U' - 上, 'D' - 下
 '''
 assert direction == 'U' or direction == 'D',\
 'draw._arrow の引数 direction は "U", "D" の値を取ります'
 _coord = np.asarray(coord)
 if direction == 'D':
 pygame.draw.line(screen, BLACK,
 _coord, _coord + (PIECE_SIZE/2, -PIECE_SIZE/2), 2)
 pygame.draw.line(screen, BLACK,
 _coord, _coord - (PIECE_SIZE/2, PIECE_SIZE/2), 2)
 pygame.draw.line(screen, BLACK,
 _coord, _coord - (0, PIECE_SIZE), 2)
 else:
 pygame.draw.line(screen, BLACK,
 _coord, _coord + (PIECE_SIZE/2, PIECE_SIZE/2), 2)
 pygame.draw.line(screen, BLACK,
 _coord, _coord + (-PIECE_SIZE/2, PIECE_SIZE/2), 2)
 pygame.draw.line(screen, BLACK,
 _coord, _coord + (0, PIECE_SIZE), 2)
...
def board(screen, board, turn):
 '''
 ゲームボードと盤面上の駒を描く

 screen : pygame.display.set_mode
 board : dict <- {(int, int): Piece}
 駒の位置とオブジェクト
 turn : int <- 0, 1, 2
 0 - 先攻の駒を開く, 1 - 後攻の駒を開く, 2 - 両方開く,
 '''
 assert turn == 0 or turn == 1 or turn == 2, 'draw.board の引数 turn は 0, 1, 2 の値を取ります'
 # グリッド
 _grid(screen, MARGIN, 6, 6)
 # 角の矢印
 _padding = (SQUARE_SIZE - PIECE_SIZE)/2
 _arrow(screen, MARGIN+(SQUARE_SIZE/2, _padding), 'U')
 _arrow(screen, MARGIN+(11*SQUARE_SIZE/2, _padding), 'U')
 _arrow(screen, DISP_SIZE-MARGIN-(SQUARE_SIZE/2, _padding), 'D')
 _arrow(screen, DISP_SIZE-MARGIN-(11*SQUARE_SIZE/2, _padding), 'D')
 # 駒
 for pos, piece in board.items():
 if turn == 2:
 if piece.side == 0:
 _piece(screen, RED if piece.color == 'R' else BLUE, pos)
 else:
 _piece(screen, RED if piece.color == 'R' else BLUE, pos, True)
 elif turn == 0:
 if piece.side == 0:
 _piece(screen, RED if piece.color == 'R' else BLUE, pos)
 else:
 _piece(screen, GREY, pos, True)
 elif turn == 1:
 if piece.side == 0:
 _piece(screen, GREY, pos)
 else:
 _piece(screen, RED if piece.color == 'R' else BLUE, pos, True)
```

`BLACK`や`GREY`は色の定数で、`config.py`に定義しています。

 

これを`game.py`で呼び出します。

```py name=game.py hl_lines=10
...
import draw
...
def main(screen, orders):
 # ゲームボード {(int, int): Piece}
 _board = orders

 while True:
 screen.fill(IVORY)
 draw.board(screen, _board, 0)
 pygame.display.update()
 ...
```

これで駒の配置を決定したあとに、初期盤面が表示されます。

<postimage src="board" alt="初期盤面" />

---

<pstlk label="次回" to="geister-app-dev-5" />は駒の移動とターン交代時の画面を用意します。

読んでくれてありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 4 回です。
前回はマウス操作で駒の初期配置を決められるようになりました。
今回はゲーム本番での初期盤面を描画するところまでやっていきます。
…

ガイスターアプリ開発(4) 初期盤面

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

<pstlk label="前回" to="geister-app-dev-2" />はグリッドやボタンを描画しました。

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



 

<toc />

## クリックで駒を置く

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

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

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

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

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

```py name=main.py
...
def main():
 ...
 while True:
 ...
 for event in pygame.event.get():
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 print('left:', event.pos)
 # 右
 elif event.button == 3:
 print('right:', event.pos)
```

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

### 座標変換

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

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

```py name=mouse.py
from config import *

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

 pos : tuple <- (int, int)
 対象の座標
 '''
 return (pos-MARGIN)//SQUARE_SIZE
```

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

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

### 駒を置く

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

```py name=main.py hl_lines=6-11,15,24-29,32-37
...
import draw, mouse

def main():
 ...
 # 配置を決定する側
 # 0 - 先攻, 1 - 後攻
 _state = 0
 # 決定された初期配置と色
 # [{(int, int): str}]
 _order = [{}, {}]
 ...
 while True:
 screen.fill(IVORY)
 draw.setup(screen, font, _state)
 pygame.display.update()
 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))
 for i in range(1, 5):
 for j in range(2, 4):
 if _square_pos == (i, j):
 _order[_state][(i, j)] = 'R'
 # 右
 elif event.button == 3:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))
 for i in range(1, 5):
 for j in range(2, 4):
 if _square_pos == (i, j):
 _order[_state][(i, j)] = 'B'
 ...
```

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

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

```py name=main.py hl_lines=6 inline_hl=6:9-13
...
def main():
 ...
 while True:
 screen.fill(IVORY)
 draw.setup(screen, font, _state, _order[_state])
 ...
```

<video src="set_piece" />

 

## ボタンを押す

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

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

 

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

```py name=main.py
...
def _check_color(colors):
 '''
 駒がすべて配置済みで赤と青が半分ずつあるか
 -> bool

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

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

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

```py name=mouse.py
...
def on_area(x, y, left, top, w, h):
 '''
 座標 x, y が範囲内にあるか
 -> bool

 x, y : int
 対象の座標
 left, top : int
 範囲の左・上端の座標
 w, h : int
 範囲の横・縦幅
 '''
 return left <= x <= left+w and top <= y <= top+h
...
```

 

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

```py name=main.py hl_lines=5,10-12
...
def main():
 ...
 while True:
 satisfied = _check_color(list(_order[_state].values()))
 ...
 # 左
 if event.button == 1:
 ...
 if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
 if satisfied:
 _state += 1
 ...
```

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

```py name=draw.py ins=3,11 del=2,10 inline_hl=3:12-13;11:24-25
...
def setup(screen, font, turn, posdict):
def setup(screen, font, turn, posdict, disabled):
 '''
 ...
 disabled : bool
 ボタンを押せない
 '''
 ...
 _button(screen, font, (500, 530), (80, 50), 'OK')
 _button(screen, font, (500, 530), (80, 50), 'OK', disabled)
...
```

```py name=main.py hl_lines=6 inline_hl=6:14-17
...
def main():
 ...
 while True:
 ...
 draw.setup(screen, font, _state, _order[_state], not satisfied)
 ...
```

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

<video src="button" />

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

 

## 効果音をつける

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

```py name=main.py hl_lines=4-8,20,25,28
...
def main():
 pygame.init()
 # 音声の設定
 snd = pygame.mixer.Sound
 select_snd = snd('./sounds/select.wav')
 decide_snd = snd('./sounds/decide.wav')
 forbid_snd = snd('./sounds/forbid.wav')
 ...
 while True:
 ...
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))

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

 if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
 if satisfied:
 decide_snd.play()
 _state += 1
 else:
 forbid_snd.play()
 ...
```

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

<relpos link="chess-app-devel-16" />

---

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

<pstlk label="次回" to="geister-app-dev-4" />はここで決定した配置をゲーム本番での初期配置に反映していきます。

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

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 3 回です。
前回はグリッドやボタンを描画しました。
今回はマウス操作でグリッドに駒を置いたり、ボタンを押したりできるようにします。
…

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

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

<pstlk label="前回" to="geister-app-dev-1" />は pygame の導入とテキスト表示をしました。

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



 

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

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

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

 

<toc />

## グリッド

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

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

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

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

```py name=config.py
import numpy as np

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

```py name=draw.py hl_lines=5-25,33
import numpy as np

from config import *

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

 screen : pygame.display.set_mode
 coord : tuple <- (int, int)
 左上の座標
 col : int
 列数
 row : int
 行数
 '''
 _coord = np.asarray(coord)
 for i in range(row+1):
 pygame.draw.line(screen, BLACK,
 _coord + (0, SQUARE_SIZE*i),
 _coord + (SQUARE_SIZE*col, SQUARE_SIZE*i), 2)
 for i in range(col+1):
 pygame.draw.line(screen, BLACK,
 _coord + (SQUARE_SIZE*i, 0),
 _coord + (SQUARE_SIZE*i, SQUARE_SIZE*row), 2)

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

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

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

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

<postimage src="grid" alt="グリッド表示" />

 

## 駒

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

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

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

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

```py name=draw.py
...
def _piece(screen, color, pos, rev=False):
 '''
 駒を描画する

 screen : pygame.display.set_mode
 color : tuple <- (int, int, int)
 駒の色
 pos : tuple <- (int, int)
 盤面上の駒の位置
 rev : bool
 上下反転して表示する
 '''
 _padding = (SQUARE_SIZE - PIECE_SIZE)/2
 _coord = np.asarray(pos)*SQUARE_SIZE + MARGIN + _padding
 if rev:
 _points = [_coord,
 _coord + (PIECE_SIZE, 0),
 _coord + (PIECE_SIZE/2, PIECE_SIZE)]
 else:
 _points = [_coord + (0, PIECE_SIZE),
 _coord + (PIECE_SIZE, PIECE_SIZE),
 _coord + (PIECE_SIZE/2, 0)]
 pygame.draw.polygon(screen, color, _points)
```

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

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

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

<postimage src="pieces" alt="駒の表示" />

 

## ボタン

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

```py name=draw.py hl_lines=2-24,33
...
def _button(screen, font, coord, size, text, disabled=True):
 '''
 ボタンを描画する

 screen : pygame.display.set_mode
 font : pygame.font.SysFont
 フォント
 color : tuple <- (int, int, int)
 背景色
 coord : tuple <- (int, int)
 左上の座標
 size : tuple <- (int, int)
 横、縦のサイズ
 text : str
 中身のテキスト
 disabled : bool
 押せなくする
 '''
 _color = (160, 140, 120) if disabled else (200, 180, 160)
 screen.fill(_color, (*coord, *size))
 _text = font.render(text, True, BLACK)
 _fsize = np.asarray(font.size(text))
 screen.blit(_text, coord + (size-_fsize)/2)

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

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

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

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

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

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

 

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

<postimage src="button" alt="ボタンの表示" />

---

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

<pstlk label="次回" to="geister-app-dev-3" />は駒をグリッドの中にマウス操作で入れていけるようにします。

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

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 2 回です。
前回は pygame の導入とテキスト表示をしました。
今回は駒の配置を決める画面の残りの要素を描画していきます。
…

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

[ガイスター](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A4%E3%82%B9%E3%82%BF%E3%83%BC)というボードゲームがあります。

お互いが相手の駒が何かわからない状態で取り合うという心理戦の側面を兼ねたゲームです。



「いいオバケ」（青）と「悪いオバケ」（赤）の 2 種類の駒を手前の 8 マスに 1 個ずつ好きな順に配置できます。

相手の青を全部取るか、自分の赤を全部取らせるか、自分の青を相手の陣地の特定のマスから外に出すことが勝利の条件となります。

 

今回からこのガイスターを Python と [pygame](https://www.pygame.org/) を使って作っていく様子を連載したいと思います。

pygame について役に立つ日本語のサイトがあります。

→ [【Pygame入門】ゲームプログラミング【Python】 | 西住工房](https://algorithm.joho.info/programming/python/pygame/)

 

<toc />

## pygame のインストール・画面表示

まずは pygame をインストールします。

```bash hide_nums
$ pip install pygame
```

これで`import pygame`して使えるようになります。

 

ウィンドウを表示するコードは以下のようになります。

```py name=main.py
import sys

import pygame
from pygame.locals import *

# ウィンドウサイズ
DISP_SIZE = (600, 600)

# 色の設定
IVORY = (240, 227, 206)

def main():
 pygame.init() # 初期化
 screen = pygame.display.set_mode(DISP_SIZE) # 画面作成
 pygame.display.set_caption('Geister') # タイトルバーの表示

 while True:
 screen.fill(IVORY) # 背景色塗りつぶし
 pygame.display.update() # 画面更新

 # イベントハンドリング
 for event in pygame.event.get():
 # 閉じるボタン
 if event.type == QUIT:
 pygame.quit() # pygame 終了
 sys.exit() # プログラム終了

if __name__ == '__main__': main()
```

ところで`set_mode`の第二引数に`FULLSCREEN`を指定するとフルスクリーン表示できます。

コマンドライン引数を受け付けて表示変更できるようにすると、このようになります。

```py name=main.py hl_lines=4-6
...
def main():
 pygame.init()
 args = sys.argv
 _flag = FULLSCREEN if len(args) == 2 and args[1] == 'f' else 0
 screen = pygame.display.set_mode(DISP_SIZE, _flag)
 ...
```

これで`py main.py f`のようにするとフルスクリーンになります。

 

## 駒配置画面の作成

ゲームを始める前に駒をどのように配置するか、それぞれのプレイヤーに決めてもらうための画面を作ります。

いろいろ描くので、ひとつの関数にまとめて別のモジュールに置きます。

```py name=draw.py
import pygame
from pygame.locals import *

def setup():
 pass
```

```py name=main.py hl_lines=2,8
...
import draw
...
def main():
 ...
 while True:
 screen.fill(IVORY)
 draw.setup()
 pygame.display.update()
```

### テキストを描画

駒の配置を決めてほしい旨をテキストとして画面上に描いてみます。

pygame ではテキストに日本語フォントを使うこともできます。

使用できるフォントの一覧は`print(pygame.font.get_fonts())`で表示できます。

テキストを描くには、まずフォントを指定して、`render`メソッドで内容を指定し、

`blit`メソッドで位置を指定します。

```py name=main.py hl_lines=4,8
...
def main():
 ...
 font = pygame.font.SysFont('hg丸ｺﾞｼｯｸmpro', 16)

 while True:
 ...
 draw.setup(screen, font, 1)
 ...
```

```py name=draw.py
...
def setup(screen, font, turn):
 '''
 screen : pygame.display.set_mode
 font : pygame.font.SysFont
 フォント
 turn : int
 先攻(0)か後攻(1)か
 '''
 assert turn == 0 or turn == 1, 'draw.setup の引数 turn は 0, 1 の値を取ります'
 _text = font.render(
 ('先' if turn == 1 else '後') + '攻の駒の配置を決めてね（↓自分側　↑相手側）',
 True, (0, 0, 0))
 screen.blit(_text, (20, 20))
```

ここまででプログラムを起動するとこのようになります。

<postimage src="text" alt="テキスト表示" />

---

<pstlk label="次回" to="geister-app-dev-2" />はグリッドや決定ボタンの描画をしていきます。

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

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

<a href="https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A4%E3%82%B9%E3%82%BF%E3%83%BC" target="_blank" rel="noopener noreferrer">ガイスター</a>というボードゲームがあります。
お互いが相手の駒が何かわからない状態で取り合うという心理戦の側面を兼ねたゲームです。
…

ガイスターアプリ開発(1) 導入・駒を配置する画面（テキスト）

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

<pstlk label="前回" to="chess-app-devel-19" />でフェアリーチェスへのキャスリングの拡張が完了しました。

今回はポーンのプロモーションの拡張をしていきます。



拡張前のプロモーションの実装は第11回に載せています。

<relpos link="chess-app-devel-11" />

 

<toc />

## ゲーム毎にプロモーション先候補を指定

まずはゲームによって異なるプロモーション先候補を、各ゲームクラスの
<tltp label="プロパティ">オブジェクトが参照できるデータ</tltp>
として定義することが必要です。

これは<pstlk label="第15回" to="chess-app-devel-15/#ゲームを定義する" />ですでに完了しています。

```py name=games.py hl_lines=7-8
class Normal:
 '''通常のチェス'''
 # 盤面のサイズ
 size = 8
 # キャスリングの有無
 castling = True
 # プロモーション先
 promote2 = [Knight, Bishop, Rook, Queen]
 # 駒の配置
 placers = {1: [Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook],
 2: [Pawn] * size}
 # 画像IDの割り当て
 ID = {}
 for rk in placers:
 for fl in range(size):
 if placers[rk][fl] is not None:
 ID['W' + placers[rk][fl].abbr] = size * rk + fl
 ID['B' + placers[rk][fl].abbr] = -(size * rk + fl)
```

`promote2`というリストの中からポーンのプロモーション先が選択されます。

 

## プロモーション時に表示する選択肢を一般化

次にプロモーションの選択肢として表示される駒を、このリストに合わせて変更しなければなりません。

現在プロモーション選択肢の表示部分のコードは次のようになっています。

```py name=main.py hl_lines=12-15
...
class Game:
 ...
 def draw(self):
 '''描画コールバック'''
 ...
 # プロモーション
 if self.prom:
 draw_balloon(*self.endpos)
 piece_color = self.gameboard[self.endpos].color
 glEnable(GL_TEXTURE_2D)
 draw_img(2.0, 3.5, piece_ID[piece_color + 'N'])
 draw_img(3.0, 3.5, piece_ID[piece_color + 'B'])
 draw_img(4.0, 3.5, piece_ID[piece_color + 'R'])
 draw_img(5.0, 3.5, piece_ID[piece_color + 'Q'])
 glDisable(GL_TEXTURE_2D)
 ...
```

12-15行目がプロモーション先を固定してしまっているので、この部分を変更します。

どの位置座標にどの駒の画像を配置するかもゲームによって変化しますので、

表示幅は 4 列までとして行を増やしていく形で描画します。

```py name=main.py ins=10-14 del=6-9
# プロモーション
if self.prom:
 draw_balloon(*self.endpos)
 piece_color = self.gameboard[self.endpos].color
 glEnable(GL_TEXTURE_2D)
 draw_img(2.0, 3.5, piece_ID[piece_color + 'N'])
 draw_img(3.0, 3.5, piece_ID[piece_color + 'B'])
 draw_img(4.0, 3.5, piece_ID[piece_color + 'R'])
 draw_img(5.0, 3.5, piece_ID[piece_color + 'Q'])
 for i in range(len(self.kind.promote2)):
 draw_img(2.0 + i % 4,
 3.5 + ((len(self.kind.promote2) - 1)//4)/2 - i//4,
 self.kind.ID[piece_color +
 self.kind.promote2[i].abbr])
 glDisable(GL_TEXTURE_2D)
```

 

また、それに伴って吹き出しの縦幅も増やす必要があります。

吹き出しは`draw_balloon`関数が描画していますので、そちらの中身を書き換えます。

```py name=utils.py ins=2,10-11,19-22 del=1,15-18 inline_hl=2:8-11;19:6-24;20:6-24;21:2-13,18-36;22:2-13,18-36
def draw_balloon(x, y):
def draw_balloon(x, y, num=4):
 '''
 プロモーションのときの吹き出しを描画する

 Parameters
 ----------
 x, y : int
 駒の座標．
 num : int, default 4
 プロモーション選択肢数．
 '''
 glColor(0.5, 0.5, 0.5) # 色の指定
 glBegin(GL_QUADS) # 四角形を描画
 glVertex(1.0, 2.5)
 glVertex(1.0, 4.5)
 glVertex(6.0, 4.5)
 glVertex(6.0, 2.5)
 glVertex(1.0, 2.5 - ((num - 1) // 4) / 2)
 glVertex(1.0, 4.5 + ((num - 1) // 4) / 2)
 glVertex(2.0 + num if num <= 4 else 6.0, 4.5 + ((num - 1) // 4) / 2)
 glVertex(2.0 + num if num <= 4 else 6.0, 2.5 - ((num - 1) // 4) / 2)
 glEnd()
 glBegin(GL_TRIANGLES) # 三角形を描画
 glVertex(3.0, 3.5)
 glVertex(4.0, 3.5)
 glVertex(x, y)
 glEnd()
```

`glBegin`から`glEnd`までの間の４つの`glVertex`が四角形の各頂点の位置を指定しています。

新たに追加いた引数`num`=プロモーション選択肢の数によってこの座標を調整しています。

`(num - 1) // 4`は`num`が`4`までのとき`0`、`8`までのとき`1`というように増えていくので、

縦方向の座標`2.5`と`4.5`を基準に縦幅が増えていくことになります。

横幅は`2.0 + num if num <= 4 else 6.0`というふうに、選択肢が４つ以下かどうかで変えています。

 

吹き出し描画部分のコードも変更します。

```py name=main.py ins=4 del=3 inline_hl=4:6-16
# プロモーション
if self.prom:
 draw_balloon(*self.endpos)
 draw_balloon(*self.endpos, num=len(self.kind.promote2))
 piece_color = self.gameboard[self.endpos].color
 glEnable(GL_TEXTURE_2D)
 for i in range(len(self.kind.promote2)):
 draw_img(2.0 + i % 4,
 3.5 + ((len(self.kind.promote2) - 1)//4)/2 - i//4,
 self.kind.ID[piece_color +
 self.kind.promote2[i].abbr])
 glDisable(GL_TEXTURE_2D)
```

これで通常のゲームのプロモーションでは下のようになり、

<postimage src="prom1" alt="プロモーション1" />

ユニコーンが加わったゲーム（`promote2 = [Knight, Bishop, Rook, Queen, Unicorn]`）では下のようになります。

<postimage src="prom2" alt="プロモーション2" />

縦幅が大きくなりました。

 

## マウスクリックを調整

マウスクリックでこの選択肢の中から駒を選択するわけですが、今のコードは次のようになっています。

```py name=main.py hl_lines=12-23
...
class Game:
 ...
 def mouse(self, button, state, x, y):
 '''
 マウス入力コールバック
 '''
 ...
 # プロモーション
 if self.prom:
 piece_color = self.gameboard[self.endpos].color
 if on_square(*self.mousepos, 1.5, 2.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Knight(piece_color)
 self.prom = False
 if on_square(*self.mousepos, 2.5, 3.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Bishop(piece_color)
 self.prom = False
 if on_square(*self.mousepos, 3.5, 4.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Rook(piece_color)
 self.prom = False
 if on_square(*self.mousepos, 4.5, 5.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Queen(piece_color)
 self.prom = False
 ...
```

座標も駒も固定になっていますので、これを変更します。

```py name=main.py hl_lines=4-11
# プロモーション
if self.prom:
 piece_color = self.gameboard[self.endpos].color
 for i in range(len(self.kind.promote2)):
 if on_square(*self.mousepos,
 1.5 + i % 4,
 2.5 + i % 4,
 3.0 + ((len(self.kind.promote2) - 1)//4)/2 - i//4,
 4.0 + ((len(self.kind.promote2) - 1)//4)/2 - i//4):
 self.gameboard[self.endpos] = self.kind.promote2[i](piece_color)
 self.prom = False
```

`on_square`関数の最後の４つの引数`left, right, bottom, top`が有効範囲を指定しています。

この範囲内に`self.mousepos`=クリック時のマウスカーソル位置があれば、ポーンが指定の駒に置き換わります。

 

これでプロモーションの拡張が完了しました！

今回の変更も [GitHub](https://github.com/midorimici/chess-program-for-python-and-OpenGL/commit/9c258e1aea99093d34222f4ca29aa200c1057376) に上げておきます。

---

これまで20回かけてチェスのコードの編集やフェアリーチェスへの拡張をやってきました。

これにさらにチェックやメイトを知らせるダイアログを表示したり、手数を戻せるようにしたり、

あるいはコンピュータ対戦を導入しても面白いでしょう。

が、いったんこのシリーズは一区切りついたことにしたいと思います。

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

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 20 回です。
前回でフェアリーチェスへのキャスリングの拡張が完了しました。
今回はポーンのプロモーションの拡張をしていきます。
…

チェスアプリ開発(20) プロモーションの拡張

ボイストレーニングの世界でよく使われている単語に「ミックスボイス」という言葉があります。

この言葉がなかなかに曲者で、人によって意味が変わったりします。

今回は「ミックスボイス」について考えていきます。



 

<toc />

## 「ミックスボイス」の様々な定義

ざっと調べてみるとこんな感じで、いろいろな定義や宗派があるようです。

- 声区転換をなめらかにすることで得られる声色
- 高音域を地声のような音色で出すこと
- 地声と裏声が混ざったような中間の音
- 地声に裏声を足した音
- 裏声に地声を足した音
- ミドルボイスと同義
- ミドルボイスとは区別される

 

## 「ミックスボイス」という種類の声があるわけではない

**ボイス**なんて名前がついているので、地声・裏声と並ぶ第三の声みたいな誤解が生じやすいですが、

（少なくとも私の認識では）**そういう声区があるわけではありません**。

 

声区の文脈において重要となる筋肉には、

主に低音域（地声）で働く甲状披裂筋と、

主に高音域（裏声）で働く輪状甲状筋の２つがあります。

この２つの働く比率が、例えば地声だと甲状披裂筋：輪状甲状筋＝８：２とかになったりします（数値は適当です）。

これらの筋肉のコントロールがうまくできて、

例えば筋肉の状態を７：３→５：５→３：７のようにスムーズに移行できると、

声区が融合した**かのように聞こえる**のです。

 

つまり「声区（地声と裏声）の切り替えが聞き手にわからない状態」が歌にとって理想的な状態で、

それに名前をつけたところ「ミックスボイス」とか「ミドルボイス」とかいうことになったのだと思います。

<relpos link="utagoe-hanashigoe-chigai" />

 

## 別に切り替わる感覚があってもいい

ミックスボイスの感覚をつかんだら、

悟りを開いたように声区の切り替えの感覚がなくなるみたいなことがよく言われています。

確かにうまく切り替えることができると、

その感覚やそのときに地声か裏声かどちらを出しているのかの感覚がなくなることはあります。

ただそれができても、私の場合は「これがミックスボイスだ」と確信したことはなく、

**あくまでうまく切り替えているだけ**という認識です。

聞き手にばれなければ自分の感覚があってもいいんじゃないかと思います。

録音して聞いた感じに不満がないならいいでしょう。

<relpos link="messa-di-voce" />

---

魔法の言葉のように使われている「ミックスボイス」ですが、紛らわしいのであまり使いたくありません…。

参考になれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

ボイストレーニングの世界でよく使われている単語に「ミックスボイス」という言葉があります。
この言葉がなかなかに曲者で、人によって意味が変わったりします。
今回は「ミックスボイス」について考えていきます。
…