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

<pstlk label="前回" to="chess-app-devel-18" />はキャスリングの条件判定のコードを編集しました。

今回は曖昧な場合にキャスリングするかどうかの確認をするようにして、キャスリング時の駒の再配置のコードの編集もしていきます。



 

<toc />

## キャスリングするかどうか確認

キングがルーク方向に１歩だけ動いたとき、

それがキャスリングを意図してのものか、はたまた単に動いただけなのかが曖昧です。

これをはっきりさせるために、「その動きはキャスリングを意図していますか？」とユーザに尋ねるダイアログを表示させます。

この表示には、<pstlk label="第11回" to="chess-app-devel-11/#選択肢を表示する吹き出しを描画" />で作成した吹き出しを利用します。

 

まず、確認が必要な場合とそうでない場合があるので、確認が必要かどうかを示す変数、

そして確認の結果キャスリングすることを選択したかを示す変数を設定します。

```py name=main.py hl_lines=7-10
class Game:
 def __init__(self):
 ...
 # キャスリング
 # キャスリングのポテンシャルが残っているか
 self.can_castling = {'W': [True, True], 'B': [True, True]}
 # キャスリングするかどうかをプレイヤーに確認するか
 self.confirm_castling = False
 # キャスリングできる状態にあるか
 self.do_castling = False
 ...
```

確認が必要な場合とは曖昧な場合、つまりキャスリング完了位置にキングがただ１歩動いた場合ですので、

このときの条件を記述していきます。

```py name=main.py
class Game:
 ...
 def castle_or_not(self, piece, endpos):
 '''
 キャスリングするかしないかを確認するか

 Parameters
 ----------
 piece : obj
 駒．
 endpos : tuple > (int, int)
 終了位置．絶対座標．

 Notes
 -----
 if文の条件式について．

 キングの移動終了位置が，キャスリング終了位置としてありうる4つの位置のうちのいずれかにあてはまる
 and (クイーンサイドキャスリングの条件にあてはまる
 or キングサイドキャスリングの条件にあてはまる)
 and キングの初期位置とキャスリング終了位置のx座標の差 == 1
 and 移動先に駒がない（＝キングが敵駒を取ったのではない）
 '''
 if (endpos in [(2, 0), (self.kind.size - 2, 0), (2, self.kind.size - 1), (self.kind.size - 2, self.kind.size - 1)]
 and (self.castling_requirements(piece, endpos, 0, self.gameboard)
 or self.castling_requirements(piece, endpos, 1, self.gameboard))
 and abs(self.kind.placers[1].index(King) - endpos[0]) == 1
 and endpos not in self.gameboard):
 self.confirm_castling = True
```

次に、この判定をマウスクリック時に行わせ、

```py name=main.py
class Game:
 ...
 def mouse(self, button, state, x, y):
 ...
 # 駒選択
 elif (self.parse_mouse() in self.gameboard
 and not self.prom and not self.confirm_castling):
 ...
 # キャスリングするかしないかの確認
 if self.kind.castling:
 if self.startpos in self.gameboard:
 self.castle_or_not(
 self.gameboard[self.startpos], self.endpos)
 ...
```

キャスリングを確認するときには、吹き出しとボタンで確認ダイアログを作成して表示します。

```py name=utils.py
def draw_castling_confirmation(endpos):
 '''キャスリング確認ダイアログを表示する'''
 draw_balloon(*endpos)
 glColor(1.0, 1.0, 1.0)
 draw_str(2.0, 4.0, 'Castling?')
 draw_button(1.5, 3.0, 3.0, 3.5, 'Yes',
 (1.0, 1.0, 1.0), (0.0, 0.0, 0.0))
 draw_button(4.0, 5.5, 3.0, 3.5, 'No',
 (1.0, 1.0, 1.0), (0.0, 0.0, 0.0))
```

```py name=main.py
class Game:
 ...
 def draw(self):
 ...
 if self.time == 1 and not self.confirm_castling:
 self.main()
 ...
 # キャスリングするかどうかの確認
 if self.confirm_castling:
 draw_castling_confirmation(self.endpos)
 ...
```

表示されたボタンをクリックすることで、キャスリングの意図があるかどうかが確認できます。

```py name=main.py hl_lines=10-22
class Game:
 ...
 def mouse(self, button, state, x, y):
 ...
 # キャスリングするかしないかの確認
 if self.kind.castling:
 if self.startpos in self.gameboard:
 self.castle_or_not(
 self.gameboard[self.startpos], self.endpos)
 if self.confirm_castling:
 if on_square(*self.mousepos, 1.5, 3.0, 3.0, 4.0):
 self.do_castling = True
 self.confirm_castling = False
 self.time = 0
 self.moving = True
 glutIdleFunc(self.idle_move)
 if on_square(*self.mousepos, 4.0, 5.5, 3.0, 4.0):
 self.do_castling = False
 self.confirm_castling = False
 self.time = 0
 self.moving = True
 glutIdleFunc(self.idle_move)
 ...
```

これで確認ができるようになりました。

<postimage src="castling_confirmation" alt="キャスリング確認" />

 

## 駒の再配置

キャスリングした後には、ルークが特定の位置に移動します。

コードでは、もとの位置にあった駒（＝ルーク）を削除して特定の位置に再配置しています。

```py name=main.py
def renew_gameboard(self, startpos, endpos, gameboard):
 '''
 盤面を更新する

 Parameters
 ----------
 startpos, endpos : tuple > (int, int)
 開始位置，終了位置．絶対座標．
 gameboard : dict > {(int, int): obj, ...}
 盤面．
 '''
 color = gameboard[startpos].color
 gameboard[endpos] = gameboard[startpos]
 del gameboard[startpos]
 ...
 # キャスリング
 if (gameboard[endpos].abbr == 'K'
 and abs(startpos[0] - endpos[0]) == 2):
 # クイーンサイド
 # 白
 if endpos == (2, 0):
 del gameboard[(0, 0)]
 gameboard[(3, 0)] = Rook('W')
 # 黒
 if endpos == (2, 7):
 del gameboard[(0, 7)]
 gameboard[(3, 7)] = Rook('B')
 # キングサイド
 # 白
 if endpos == (6, 0):
 del gameboard[(7, 0)]
 gameboard[(5, 0)] = Rook('W')
 # 黒
 if endpos == (6, 7):
 del gameboard[(7, 7)]
 gameboard[(5, 7)] = Rook('B')
```

まず駒の移動先に移動前の駒<tltp label="インスタンス">クラスをもとに作られた実体</tltp>を移してから、もとの位置を削除しています（キングの動き）。

キャスリングが起こるのはキングが２歩動いたときのみであることを利用して条件文を立て、

位置によってキャスリングが起こる箇所を判定し、ルークを消して別の位置に新たなルークを置いています（ルークの動き）。

 

キングの動きに関しては、キングが１歩も動かないこともありえるので、`startpos != endpos`のときのみ`del gameboard[startpos]`を実行するようにします。

そうしないとキングが消えてしまうからです。

ルークの動きのほうは、キャスリング発生の条件を主に`do_castling`によって判定し、

ルークの初期位置にある駒がルークであれば、その駒を消して新たなルークを置いています。

これをもとに拡張して書き換えると、以下のようになります。

```py name=main.py
def renew_gameboard(self, startpos, endpos, gameboard):
 '''
 盤面を更新する

 Parameters
 ----------
 startpos, endpos : tuple > (int, int)
 開始位置，終了位置．絶対座標．
 gameboard : dict > {(int, int): obj, ...}
 盤面．
 '''
 color = gameboard[startpos].color
 gameboard[endpos] = gameboard[startpos]
 del gameboard[startpos]
 if startpos != endpos:
 del gameboard[startpos]
 ...
 # キャスリング
 # キャスリングできるゲームである
 # キャスリング確認中でない
 # キャスリングできる
 # 終了位置指定がある
 if (self.kind.castling
 and not self.confirm_castling
 and self.do_castling
 and None not in endpos):
 rook_init_pos = [pos for pos, piece in enumerate(self.kind.placers[1])
 if piece == Rook]
 size = self.kind.size
 piece = gameboard[endpos]
 # クイーンサイド
 rook_pos = rook_init_pos[0]
 # 白
 if (endpos == (2, 0)
 and piece.color == 'W'
 and (rook_pos, 0) in gameboard):
 if gameboard[(rook_pos, 0)].abbr == 'R':
 del gameboard[(rook_pos, 0)]
 gameboard[(3, 0)] = Rook('W')
 # 黒
 if (endpos == (2, size - 1)
 and piece.color == 'B'
 and (rook_pos, size - 1) in gameboard):
 if gameboard[(rook_pos, size - 1)].abbr == 'R':
 del gameboard[(rook_pos, size - 1)]
 gameboard[(3, size - 1)] = Rook('B')
 # キングサイド
 rook_pos = rook_init_pos[1]
 # 白
 if (endpos == (size - 2, 0)
 and piece.color == 'W'
 and (rook_pos, 0) in gameboard):
 if gameboard[(rook_pos, 0)].abbr == 'R':
 del gameboard[(rook_pos, 0)]
 gameboard[(size - 3, 0)] = Rook('W')
 # 黒
 if (endpos == (size - 2, size - 1)
 and piece.color == 'B'
 and (rook_pos, size - 1) in gameboard):
 if gameboard[(rook_pos, size - 1)].abbr == 'R':
 del gameboard[(rook_pos, size - 1)]
 gameboard[(size - 3, size - 1)] = Rook('B')
```

これでキャスリングの曖昧性の排除、そして駒の再配置ができるようになりました。

<video src="castling1" />

<video src="castling2" />

 

ここ数回分の変更は [GitHub](https://github.com/midorimici/chess-program-for-python-and-OpenGL/commit/06886ba60cbe2856db1e7cc52bc9fba67693c328#diff-6707418c2a43eec365d78e30985aafe1) で見ることができます。

---

フェアリーチェスが作れるようになって、

ゲームによって出現する駒が変わるので、

<pstlk label="次回" to="chess-app-devel-20" />はプロモーションの拡張について書きたいと思います。

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

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

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 19 回です。
前回はキャスリングの条件判定のコードを編集しました。
今回は曖昧な場合にキャスリングするかどうかの確認をするようにして、キャスリング時の駒の再配置のコードの編集もしていきます。
…

チェスアプリ開発(19) キャスリングの拡張（曖昧性の排除と駒の再配置）

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

<pstlk label="前回" to="chess-app-devel-10" />はチェスの特殊ルールのひとつ、アンパッサンを実装しました。

今回はポーンが昇格して強くなるプロモーションを実装していきます。



 

<toc />

## プロモーションとは

promotion は英語で昇格という意味です。

ポーンが相手の陣地の最深部（白から見れば８ランク、黒から見れば１ランク）まで進むと、**ポーンとキングを除くいずれかの駒に変身します。**

どの駒になるかは選択可能ですので、

選択肢を表示して選んでもらう、ユーザとの双方向的なやりとりが必要となります。

 

動作のプロセスは次のようになります。

1. ポーンが最深部にたどり着く
1. どの駒にプロモーションするか選択肢を表示する
1. ユーザが駒を選択する
1. 選択された駒を認識する
1. ポーンが選択された駒に変化する

 

## プロモーションの条件を定義

まずはプロモーションの条件を定義します。

```py name=main.py hl_lines=5,19,24-41
class Game:
 def __init__(self):
 ...
 # プロモーションの条件を満たすか
 self.prom = False
 ...
 ...
　
 def main(self):
 ...
 if None not in startpos + endpos:
 try:
 target = self.gameboard[startpos]
 except:
 self.message = "could not find piece; index probably out of range"
 target = None
 ...
 self.renew_gameboard(startpos, endpos, self.gameboard)
 self.promotion(target, endpos)
 if self.is_check(target.color, self.gameboard):
 self.message = f"{target.color} player is in check"
 ...
　
 def promotion(self, piece, endpos):
 '''
 プロモーションできるとき，True

 Parameters
 ----------
 piece : obj
 駒．
 endpos : tuple > (int, int)
 終了位置．
 
 Returns
 -------
 bool
 '''
 if (piece.name == 'WP' and endpos[1] == 7
 or piece.name == 'BP' and endpos[1] == 0):
 self.prom = True
```

動くたびにプロモーションができる状態かどうかを判定し、その結果を変数に入れて管理します。

 

## 選択肢を表示する吹き出しを描画

プロモーションするポーンから吹き出しをのばして、その吹き出しの中に選択肢となる駒を描画することにします。

`glVertex()`で指定しているのはワールド座標であり、このプログラムでは縦横軸ともに -1.0 ～ 8.0 の値をとるように調整しています（<pstlk label="第６回" to="chess-app-devel-6/#四角形の描画" />）。

```py name=utils.py
def draw_balloon(x, y):
 '''
 プロモーションのときの吹き出しを描画する
 
 Parameters
 ----------
 x, y : int
 駒の座標．
 '''
 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)
 glEnd()
 glBegin(GL_TRIANGLES) # 三角形を描画
 glVertex(3.0, 3.5)
 glVertex(4.0, 3.5)
 glVertex(x, y)
 glEnd()
```

プロモーションできる状態にある、すなわちさきほど設定した変数`self.prom`が`True`となるときに、この吹き出しを描画させます。

```py name=main.py hl_lines=9-11
def draw(self):
 ...
 # 可能な移動先の表示
 if self.select_dest and None not in self.startpos:
 piece = self.gameboard[self.startpos]
 draw_available_moves(
 self.valid_moves(piece, self.startpos, self.gameboard),
 opponent=self.playersturn != piece.color)
 # プロモーション
 if self.prom:
 draw_balloon(*self.endpos)
 glDisable(GL_BLEND)
 glutSwapBuffers()
```

ここでいったん動作を見てみましょう。

<postimage src="fukidashi" ext="gif" alt="プロモーション 吹き出し" />

選択肢として４つの駒をこの吹き出しの上に並べて乗せることになります。

駒の描画は`draw_img()`を使えばできます（定義は<pstlk label="第７回" to="chess-app-devel-7/#テクスチャの設定" />にて）。

```py name=main.py hl_lines=6-12
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)
 ...
```

ちなみに、`piece_color`はこの時点では`white`か`black`になってしまうので、エラーになってしまいます。

駒色の文字列を変更します。

```py name=pieces.py ins=2,4 del=1,3 inline_hl=1:3;2:3;3:3;4:3
WHITE = "white"
WHITE = "W"
BLACK = "black"
BLACK = "B"
```


これで選択肢を表示することができました。

<postimage src="fukidashi_sentakushi" alt="プロモーション 吹き出し 駒あり" />

 

## 選択された駒を認識

どれがクリックされたのかを認識させます。

特定の範囲内をクリックしたときに`True`となるような関数を作ります。

```py name=utils.py
def on_square(x, y, left, right, bottom, top):
 '''
 left < x < right かつ bottom < y < top のとき，True
 
 Parameters
 ----------
 x, y : float
 測定する座標．
 left, right, bottom, top : float
 ボタンの左右下上端の座標．

 Returns
 -------
 bool
 '''
 if left < x < right and bottom < y < top:
 return True
```

これを使って、マウスでクリックした位置をもとに、どの駒が選択されたか認識し、


選択された駒の
<tltp label="インスタンス">クラスをもとに作られた分身のようなもの</tltp>
を生成してポーンと置き換えます。


```py name=main.py hl_lines=7,9-23
def mouse(self, button, state, x, y):
 ...
 self.mousepos = window2world(x, y, WSIZE)
 ...
 # 駒選択
 elif (self.parse_mouse() in self.gameboard
 and not self.prom):
 ...
 # プロモーション
 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, piece_color + 'N')
 self.prom = False
 if on_square(*self.mousepos, 2.5, 3.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Bishop(piece_color, piece_color + 'B')
 self.prom = False
 if on_square(*self.mousepos, 3.5, 4.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Rook(piece_color, piece_color + 'R')
 self.prom = False
 if on_square(*self.mousepos, 4.5, 5.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Queen(piece_color, piece_color + 'Q')
 self.prom = False
```

これでプロモーションが実装できました！

<postimage src="promotion" ext="gif" alt="プロモーション 完成" />

今回の変更も GitHub に置いておきます。

→ [Release codes after 11 articles · midorimici/chess-program-for-python-and-OpenGL](https://github.com/midorimici/chess-program-for-python-and-OpenGL/releases/tag/v.1.1)

---

<pstlk label="次回" to="chess-app-devel-12" />はついに最後の特殊ルール、キャスリングを実装していきます。

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

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

Python プログラムで動かすフェアリーチェスアプリ開発、連載第11回です。
前回はチェスの特殊ルールのひとつ、アンパッサンを実装しました。
今回はポーンが昇格して強くなるプロモーションを実装していきます。
…

チェスアプリ開発(11) プロモーションの実装

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

<pstlk label="前回" to="chess-app-devel-8" />はマウス操作で駒を動かせるようにしました。

しかし、その駒の移動がカクカクしているので、

今回は駒の移動にアニメーションを追加してスムーズに動いているように表示させます。



 

<toc />

## 完成イメージ

<postimage src="goal" ext="gif" alt="完成図" />

もともといたマスからクリックしたマスまでスムーズに移動しています。

 

## GLUT でアニメーションさせる

GLUT でアニメーションを実現するには、一定時間後に指定した関数を実行する`glutTimerFunc()`を使う方法と、

プログラムが待ち時間にあるときに指定した関数を実行する`glutIdleFunc()`を使う方法があります。

今回は後者を使っています。

マウスが移動先のマスをクリックしたときにアニメーションが始まり、

その時点からの経過時間によって駒の位置が変化します。

アニメーション中であることを示す変数`self.moving`と、経過時間を表す変数`self.time`を追加します。

```py name=main.py hl_lines=2,8,9,10,14-22,28,33-38,53-56
...
from time import sleep
...
　
class Game:
 def __init__(self):
 ...
 # アニメーション
 self.moving = False
 self.time = 1
 ...
 ...
　
 def idle_move(self):
 '''駒が動く時のアニメーション'''
 sleep(1.0 / 100)
 self.time += 1
 if self.time >= 10:
 self.moving = False
 glutIdleFunc(None) # アニメーションの無効化
 glutMouseFunc(self.mouse) # マウス操作の有効化
 glutPostRedisplay()
　
...
　
 def draw(self):
 ...
 if self.time == 1:
 self.main()
　
 ...
　
 if self.moving:
 # 動き中の駒を描画する
 if self.endpos in self.gameboard:
 glEnable(GL_TEXTURE_2D)
 draw_img(..., piece_ID[self.gameboard[self.startpos if self.time == 0 else self.endpos].name])
 glDisable(GL_TEXTURE_2D)
 ...
　
 def mouse(self, button, state, x, y):
 ...
 # 左クリック
 if (button == GLUT_LEFT_BUTTON
 and state == GLUT_DOWN):
 try:
 # 行先選択
 if (self.select_dest
 and self.parse_mouse() in self.valid_moves(
 self.gameboard[self.startpos], self.startpos, self.gameboard)):
 self.select_dest = False
 self.endpos = self.parse_mouse()
 self.time = 0
 self.moving = True
 glutIdleFunc(self.idle_move) # アニメーションの有効化
 glutMouseFunc(None) # マウス操作の無効化
 # 駒選択
 elif ...
```

`sleep`というのは、指定時間プログラムを待機させるための関数です。

これを指定しないと目にも止まらぬ速さで変化してしまうため、アニメーションの意味がありません（マシンのスペックにもよりますが…）。

そもそもアニメーションというのは、パラパラ漫画のように時間差で違う画像を表示させることで動いているように見せているだけです。

`idle_move()`では、1/100 秒（マシンのスペックによって変化する）ごとに１コマ進めていき（`self.time += 1`）、

それが 10 回行われたらアニメーションを終了させます。

26 行目の`if self.time == 1:`は必須ではありませんが、パフォーマンスの向上のためにつけています。

`idle_move()`が`glutPostRedisplay()`を毎回のアニメーションで 10 回も呼び出す（つまり`draw()`も 10 回呼び出される）のですが、

`main()`は１回だけ通れば十分です。

これの関係で、`self.time == 0`のときのみ動く駒の存在するとされる位置は`self.startpos`に、

それ以外のときは`self.endpos`に入っています。

 

## 駒の時間-位置関数を指定する

さきほどのコードの 37 行目の`draw_img()`の第一、第二引数にはそれぞれ、画像を描画する位置の x 座標と y 座標が入ります。

ここにどんな関数を入れるかによって、動き方が変わってきます。

とりあえず、直線的な動きをさせてみます。

<postimage src="linear-interpolation" ext="png" alt="直線による補間" />

ちょっと数学の話です。

縦軸を $p$、横軸を $t$ としたとき、この赤のグラフは

$$
p = \frac{{\sf self.endpos} - {\sf self.startpos}}{10} t + {\sf self.startpos}
$$

と表すことができます。

よって、

```py
draw_img(self.startpos[0] + (self.endpos[0] - self.startpos[0]) * self.time / 10,
 self.startpos[1] + (self.endpos[1] - self.startpos[1]) * self.time / 10,
 piece_ID[self.gameboard[self.startpos if self.time == 0 else self.endpos].name])
```

となります。

<details>
<summary>もっとなめらかな動きにしたいなら？</summary>

直線的な補間の場合、動き始めから終わりまでつねに同じ速さです。

正弦曲線（サインカーブ）を用いて、動き始めと終わりは減速させるようなもっとなめらかな動きをさせることができます。

<postimage src="sin-curve-interpolation" ext="png" alt="正弦曲線による補間" />

コードを導くには、しっかりとした（高校レベルぐらいの）数学の計算をやらなければならなりません。

（でも決してこの計算ができなければいけないわけではありません！）

正弦曲線 $y = \sin x$ のグラフを拡大縮小・平行移動して、この赤いグラフに重なるようにします。

$y = \sin x$ のグラフは２点 $\left(-\frac{\pi}{2}, -1 \right), \left(\frac{\pi}{2}, 1 \right)$ を通ります。

この２点が変形後に $(0, {\sf self.startpos}), (10, {\sf self.endpos})$ に重なるようにします。

 

まず、拡大縮小操作をして幅と高さを合わせます。

幅が $\frac{\pi}{2} - \left(-\frac{\pi}{2} \right) = \pi$ だったのを $10$ にするので、$x$ 軸方向に $\frac{10}{\pi}$ 倍に拡大して

$$
y = \sin \left(\frac{\pi}{10} x \right)
$$

高さが $1 - (-1) = 2$ だったのを ${\sf self.endpos} - {\sf self.startpos}$ にするので、

$y$ 軸方向に $\frac{{\sf self.endpos} - {\sf self.startpos}}{2}$ 倍に拡大して

$$
y = \frac{{\sf self.endpos} - {\sf self.startpos}}{2} \sin \left(\frac{\pi}{10} x \right)
$$

あとは平行移動をします。

今の変形で点 $\left(-\frac{\pi}{2}, -1 \right)$ が

点 $\left(-5, -\frac{{\sf self.endpos} - {\sf self.startpos}}{2} \right)$ に移ったので、

これが点 $(0, {\sf self.startpos})$ に来るようにします。

$x$ 軸方向に $5, y$ 軸方向に

${\sf self.startpos} + \frac{{\sf self.endpos} - {\sf self.startpos}}{2}$ だけ平行移動して

$$
\begin{aligned}
 y &= \frac{{\sf self.endpos} - {\sf self.startpos}}{2} \sin \left(\frac{\pi}{10} (x - 5) \right) \\\\ 
 &\ \ \ \ + {\sf self.startpos} + \frac{{\sf self.endpos} - {\sf self.startpos}}{2} \\\\ 
 &= {\sf self.startpos} + \frac{{\sf self.endpos} - {\sf self.startpos}}{2} \left(\sin \left(\frac{\pi}{10} (x - 5) \right) + 1 \right)
\end{aligned}
$$

これで式は出来上がりました。

これをコードに書くと

```py
draw_img(self.startpos[0] + ((self.endpos[0] - self.startpos[0]) / 2)
 * (sin(pi*(self.time - 5) / 10) + 1),
 self.startpos[1] + ((self.endpos[1] - self.startpos[1]) / 2)
 * (sin(pi*(self.time - 5) / 10) + 1),
 piece_ID[self.gameboard[self.startpos if self.time == 0 else self.endpos].name])
```

この場合`from math import pi, sin`が必要になります。

同様に計算ができれば他の曲線によって補間することもできます。

</details>

 

さて、ここで一度動作を見てみましょう。

<postimage src="before-masking" ext="gif" alt="駒ダブル" />

おっと、移動中は移動先に表示される駒を隠さないといけませんね。

 

## 行先に表示される駒を隠す

これは<pstlk label="第６回" to="chess-app-devel-6" />で用意した`dark_squares_list`を使えば簡単にできます。

```py name=main.py hl_lines=4-9
def draw(self):
 ...
 if self.moving:
 # 行先の駒を隠す
 if self.endpos in dark_squares_list:
 glColor(0.82, 0.55, 0.28)
 else:
 glColor(1.00, 0.81, 0.62)
 square(*self.endpos)
 # 動き中の駒を描画する
 if self.endpos in self.gameboard:
 glEnable(GL_TEXTURE_2D)
 draw_img(self.startpos[0] + ((self.endpos[0] - self.startpos[0]) / 2)
 * (sin(pi*(self.time - 5) / 10) + 1),
 self.startpos[1] + ((self.endpos[1] - self.startpos[1]) / 2)
 * (sin(pi*(self.time - 5) / 10) + 1),
 piece_ID[self.gameboard[self.startpos if self.time == 0 else self.endpos].name])
 glDisable(GL_TEXTURE_2D)
```

<postimage src="after-masking" ext="gif" alt="マスク後" />

いい感じですね。

ついでですが、開始位置がわかりやすいようにマスに色付けをします。

```py name=main.py hl_lines=4-7
def draw(self):
 ...
 draw_squares()
 # 移動開始位置のマスの色を変える
 if None not in self.startpos:
 glColor(0.0, 1.0, 0.0, 0.2)
 square(*self.startpos)
 ...
```

これで<inlink to="#完成イメージ">完成イメージ</inlink>と同じような動作ができるようになりました。

---

アニメーションが追加されて、より迫力のある遊び心地になりました。

<pstlk label="次回" to="chess-app-devel-10" />はチェスの特殊ルールのひとつであるアンパッサンを実装したいと思います。

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

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

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 9 回です。
前回はマウス操作で駒を動かせるようにしました。
しかし、その駒の移動がカクカクしているので、
今回は駒の移動にアニメーションを追加してスムーズに動いているように表示させます。
…

チェスアプリ開発(9) 駒の動きをアニメーションにする

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

<pstlk label="前回" to="chess-app-devel-7" />は
<tltp label="Pillow">Python の画像処理ライブラリ</tltp>
で画像を読み込み、盤面上に駒を表示しました。

今回はマウス操作で駒を動かせるようにしていきます。



 

<toc />

## 完成イメージ

<postimage src="goal" ext="gif" alt="完成図" />

駒をクリックすると移動可能なマスが表示され、移動先をクリックするとそこに移動するようにします。

 

## 丸の描画

駒をクリックしたら丸を表示するので、丸を描画する関数を定義します。

```py name=utils.py
from math import pi, sin, cos
　
...
　
def circle(x, y, opponent, r=0.25):
 '''
 円を描画する

 Parameters
 ----------
 x, y : float
 中心の座標．
 opponent : bool
 True のとき，赤色で描画する．
 r : float, default 0.25
 半径．
 '''
 glPushMatrix() # 変形範囲の開始
 glTranslate(x, y, 0) # 平行移動

 # 色の指定
 if opponent:
 glColor(1.0, 0.5, 0.5, 0.7) # 赤
 else:
 glColor(0.5, 0.5, 1.0, 0.7) # 青

 # 円の描画
 glBegin(GL_POLYGON) # 多角形の描画
 for k in range(12):
 xr = r * cos(2 * pi * k / 12)
 yr = r * sin(2 * pi * k / 12)
 glVertex(xr, yr, 0)
 glEnd()
 　
 glPopMatrix() # 変形範囲の終了
```

円の描画としていますが、実は正十二角形を描画しているだけです。

数学の話になりますが、三角関数の引数は
<tltp label="弧度法">度数法に 180 で割って円周率をかけたもの</tltp>
で表されるので、

360 度は円周率の 2 倍の値（$2\pi$）になります。

角度と座標の関係は次の図のようになるので、

30-31 行目のような式が出来上がります。

<postimage src="sin-cos" ext="png" alt="角度と座標" />

 

## マウスポインタ座標の取得

OpenGL では、`glutMouseFunc()` にユーザ定義の関数を登録しておけば、

**マウスのどのボタンが押され離されたか、そのときのマウスポインタの位置はどこかなどの情報を取得できます。**

マウスで動作を制御できるようになるので、キーボードからコマンドを入力するための関数や、

盤面が画面に表示されるので、コマンドラインに盤面を表示する関数は消してしまいます。

（赤は削除行です。可読性のため、キャメルケース CamelCase からスネークケース snake_case に変更するなど、表記を変えた部分があります。）

```py name=main.py ins=4-9,18-20,44-52,56-93,99 del=13,16-17,22-43 inline_hl=16:4-8;18:4-10
class Game:
 def __init__(self):
 ...
 # マウスポインタの位置
 self.mousepos = [-1.0, -1.0]
 # 行先の指定
 self.select_dest = False
 # 始点・終点
 self.startpos, self.endpos = (None, None), (None, None)
 ...
 ...
 def main(self):
 self.printBoard()
 print(self.message)
 self.message = ""
 startpos, endpos = self.parseInput()
 ...
 startpos, endpos = self.startpos, self.endpos
 if None not in startpos + endpos:
 ...
	...
 def parseInput(self):
 try:
 a,b = input().split()
 a = ((ord(a[0])-97), int(a[1])-1)
 b = (ord(b[0])-97, int(b[1])-1)
 print(a,b)
 return (a,b)
 except:
 print("error decoding input. please try again")
 return((-1,-1),(-1,-1))
　
 def printBoard(self):
 print(" 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |")
 for i in range(0,8):
 print("-"*32)
 print(chr(i+97),end="|")
 for j in range(0,8):
 item = self.gameboard.get((i,j)," ")
 print(str(item)+' |', end = " ")
 print()
 print("-"*32)
　
 def parse_mouse(self):
 '''マウスポインタの位置から指定したマス目を出力'''
 a, b = self.mousepos
 file_, rank = None, None
 for i in range(8):
 if abs(a - i) < 0.5: file_ = i
 for i in range(8):
 if abs(b - i) < 0.5: rank = i
 return (file_, rank)
　
	...
　
 def mouse(self, button, state, x, y):
 '''
 マウス入力コールバック

 Parameters
 ----------
 button : GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON or int > 0, 1, 2
 マウスボタン．
 GLUT_LEFT_BUTTON, 0 -- 左
 GLUT_MIDDLE_BUTTON, 1 -- 中
 GLUT_RIGHT_BUTTON, 2 -- 右
 state : GLUT_DOWN, GLUT_UP or int > 0, 1
 ボタンの状態．
 GLUT_DOWN, 0 -- 押された
 GLUT_UP, 1 -- 離された
 x, y : int
 ウィンドウ座標．
 '''
 # ウィンドウ座標をワールド座標に変換する
 self.mousepos = window2world(x, y, WSIZE)
 # 左クリック
 if (button == GLUT_LEFT_BUTTON
 and state == GLUT_DOWN):
 try:
 # 行先選択
 if (self.select_dest
 and self.is_valid_move(self.gameboard[self.startpos],
 self.startpos, self.parse_mouse(), self.gameboard)):
 self.select_dest = False
 self.endpos = self.parse_mouse()
 # 駒選択
 elif self.parse_mouse() in self.gameboard:
 self.startpos, self.endpos = (None, None), (None, None)
 self.select_dest = True
 self.startpos = self.parse_mouse()
 except KeyError: pass
　　
 glutPostRedisplay() # 再描画
　
 ...
　
 def glmain(self):
 ...
 glutMouseFunc(self.mouse) 	# マウス入力コールバック
 ...
```

クリック操作をするたびに`mouse()`メソッドが呼び出されて処理をします。

`parse_mouse()`で、クリック時のマウスポインタの位置をもとに盤面上のどのマスが指定されたかを出力し、

駒やその移動先を指定することができます。

予期せぬ場所がクリックされたときのために、`try-except`で例外処理をしています。

[`glutPostRedisplay()`](http://wisdom.sakura.ne.jp/system/opengl/gl10.html)は画面の再描画を行う関数で、`draw()`メソッドを呼び出します。

19 行目の`if None not in startpos + endpos:`は、開始位置と終了位置の両方が指定されていることを保証するものです。

### ウィンドウ座標をワールド座標に変換

`mouse()`メソッドの引数として渡される`x, y`は**ウィンドウ座標**です。

ウィンドウ座標は、表示されているウィンドウの左上を(0, 0)とし、ピクセルを単位とする座標系です。

つまり、ウィンドウのサイズを 600x400 だとすると、右下の座標は(600, 400)となります。

これに対して、実際に描画に使用されているのは**ワールド座標**です。

ワールド座標はユーザが定義できます。

<pstlk label="第6回" to="chess-app-devel-6#四角形の描画" />で
<icode>glOrtho()</icode>を使って指定しているのもワールド座標です。

さて、実際にマウスポインタの位置を情報として使用するにあたっては、

**ワールド座標に変換したほうが何かと便利**です。

そこで、ウィンドウ座標をワールド座標に変換する関数を作ります。

```py name=utils.py
def window2world(x, y, wsize):
 '''
 ウィンドウ座標を世界座標に変換する

 Parameters
 ----------
 x, y : int
 変換するもとの座標．
 wsize : int
 画面の大きさ．

 Returns
 -------
 list > [float, float]
 変換先の座標．
 '''
 return [9*x / wsize - 1, 7 - (9*y / wsize - 1)]
```

この変換によって、左下端をクリックしたときには(-1, -1)という座標が、右上端をクリックしたときには(8, 8)という座標が取得できることになります。

<postimage src="world_coord" ext="png" alt="ワールド座標" />

 

## 移動可能なマスに丸を表示

さきほど定義した丸を描画する関数を使って、駒を指定したときにその駒が移動可能なマスに丸を表示するようにします。

まずは、指定された位置すべてに丸を描画する関数を定義します。

```py name=utils.py
def draw_available_moves(poslist, opponent=None):
 '''動かせる位置を描画する

 Parameters
 ----------
 poslist : list > [(int, int), ...]
 移動先の座標のリスト．
 opponent : bool or None, default None
 True のとき，赤色で描画する．
 '''
 for pos in poslist:
 circle(*pos, opponent)
```

`*pos`はアンパックというもので、`pos`に格納されているデータのそれぞれをそのまま関数の引数に渡すために使っています。

これで、移動可能なマスの座標のリストを渡せばそこに丸を書いてくれるようになります。

```py name=main.py hl_lines=4-10
def draw(self):
 ...
 draw_pieces(self.gameboard, piece_ID)
 # 可能な移動先の表示
 if self.select_dest and None not in self.startpos:
 piece = self.gameboard[self.startpos]
 draw_available_moves(
 [move for move in piece.available_moves(*self.startpos, self.gameboard, color=piece.color)
 if self.is_valid_move(piece, self.startpos, move, self.gameboard)],
 opponent=self.playersturn != piece.color)
 ...
```

条件文は、行先選択中であり、開始位置が指定されているということ。

それで、`draw_available_moves()`の`opponent`では、自分の手番ではないときに相手の駒を触ったときに`True`となるような条件式を与えています。

ただ、8-9 行目の内包表記が面倒くさいです。

`available_moves()`は移動先のリストを返しますが、**チェック回避を考慮していないので、そのままでは使えません。**

そのため、<pstlk label="第4回" to="chess-app-devel-4#盤面を仮定する" />でチェック回避を考慮した`is_valid_move()`を作ったのですが、

こちらは移動可能かどうかを判定するだけで、**移動先の座標のリストを返すわけではありません。**

なんでこうしたんだろう、とちょっと後悔。

このままにしておいても面倒なので、移動先の座標のリストを返すように`is_valid_move()`を書き換えます。

```py name=main.py ins=14-39 del=1-13
def is_valid_move(self, piece, startpos, endpos, gameboard):
 if endpos in piece.availableMoves(*startpos, gameboard, color=piece.color):
 # 盤面の複製
 gameboardTmp = copy(gameboard)
 # 複製した盤面の更新
 self.renew_gameboard(startpos, endpos, gameboardTmp)
 # チェック判定
 if self.is_check(piece.color, gameboardTmp):
 return False
 else:
 return True
 else:
 return False
def valid_moves(self, piece, startpos, gameboard):
 '''
 動ける位置を出力．味方駒上には移動不可．

 Parameters
 ----------
 piece : obj
 駒．
 startpos : tuple > (int, int)
 開始位置．絶対座標．
 gameboard : dict > {(int, int): obj, ...}
 盤面．

 Returns
 -------
 result : list > [(int, int), ...]
 '''
 result = piece.available_moves(*startpos, gameboard, color=piece.color)
 # チェック回避のため動き縛り
 result_tmp = copy(result)
 for endpos in result_tmp:
 gameboard_tmp = copy(gameboard)
 self.renew_gameboard(startpos, endpos, gameboard_tmp)
 if self.is_check(piece.color, gameboard_tmp):
 result.remove(endpos)
 return result
```

それに伴って関係各所の調整をします。

ところで、マウス操作では移動可能な場所をクリックしないと動作しないようにしているので、

`main()`内部の条件式は省いても構いません。

```py name=main.py ins=10-13,23,38-39 del=3-9,21-22,36-37
def main(self):
 ...
 if target:
 print("found "+str(target))
 if target.color != self.playersturn:
 self.message = "you aren't allowed to move that piece this turn"
 if self.is_valid_move(target, startpos, endpos, self.gameboard):
 self.message = "that is a valid move"
 ...
 if target and target.color == self.playersturn:
 print("found "+str(target))
 self.message = "that is a valid move"
 ...
...
　
def draw(self):
 ...
 if self.select_dest and None not in self.startpos:
 piece = self.gameboard[self.startpos]
 draw_available_moves(
 [move for move in piece.available_moves(*self.startpos, self.gameboard, color=piece.color)
 if self.is_valid_move(piece, self.startpos, move, self.gameboard)],
 self.valid_moves(piece, self.startpos, self.gameboard),
 opponent=self.playersturn != piece.color)
 ...
...
　
def mouse(self, button, state, x, y):
 ...
 # 左クリック
 if (button == GLUT_LEFT_BUTTON
 and state == GLUT_DOWN):
 try:
 # 行先選択
 if (self.select_dest
 and self.is_valid_move(self.gameboard[self.startpos],
 self.startpos, self.parse_mouse(), self.gameboard)):
 and self.parse_mouse() in self.valid_moves(
 self.gameboard[self.startpos], self.startpos, self.gameboard)):
 ...
```

これでマウス操作で駒を動かせるようになりました！

<postimage src="mouse-action-result" ext="gif" alt="結果" />

---

これで結構ゲームっぽくなってきましたね。

ただ、駒の動きがカクカクしています。

<pstlk label="次回" to="chess-app-devel-9" /> はおまけ的な感じで、駒の動きをスムーズにしてみたいと思います。

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

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

Python プログラムで動かすフェアリーチェスアプリ開発、連載第８回です。
前回は
Pillow
で画像を読み込み、盤面上に駒を表示しました。
今回はマウス操作で駒を動かせるようにしていきます。
…

チェスアプリ開発(8) マウス操作で駒を動かす

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

<pstlk label="前回" to="chess-app-devel-6" />で駒を乗せるための盤面が準備できました。

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



 

<toc />

## 画像を準備

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

→ [Clker-Free-Vector-Images](https://pixabay.com/ja/users/Clker-Free-Vector-Images-3736/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=26774)による[Pixabay](https://pixabay.com/ja/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=26774)からの[画像](https://pixabay.com/ja/vectors/%E3%83%81%E3%82%A7%E3%82%B9-%E4%BD%9C%E5%93%81-%E8%A8%AD%E5%AE%9A-%E3%82%B7%E3%83%B3%E3%83%9C%E3%83%AB-26774/)

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

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

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

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

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

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

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

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

 

## 画像の読み込みと設定


<tltp label="[Pillow](https://pillow.readthedocs.io/en/stable/)">Python の画像処理ライブラリ</tltp>
を使って画像を処理します。


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

```bash hide_nums
pip install Pillow
```

### テクスチャの設定

ところで、画像の表示には[テクスチャマッピング](http://wisdom.sakura.ne.jp/system/opengl/gl23.html)というものを使っています。

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

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

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

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

→ [OpenGL でゲームを作る　テクスチャを表示する](http://nn-hokuson.hatenablog.com/entry/2014/02/05/001602)

```py name=utils.py
from PIL import Image
...
　
　
def set_img(name, path, imgID):
 '''画像の設定: name.pngを読み込む

 Parameters
 ----------
 name : str
 画像のファイル名．
 path : str > 'W', 'B'
 画像があるフォルダ名．
 imgID : int
 指定する画像ID．
 '''
 img = Image.open(f'../img/{path}/{name}.png') # 画像を読み込む
 w, h = img.size # 画像の横幅、縦幅
 glBindTexture(GL_TEXTURE_2D, imgID) # imgID のテクスチャを有効化する
 # 画像とテクスチャを関連づける
 glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, w, h, 0,
 GL_RGBA, GL_UNSIGNED_BYTE, img.tobytes())
 # テクスチャの設定
 glTexParameter(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR)
 glTexParameter(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR)
　
　
def draw_img(x, y, imgID):
 '''画像を描画する

 Parameters
 ----------
 x, y : float
 描画する座標．
 imgID : int
 画像ID．
 '''
 glPushMatrix() # 変形範囲の開始
 glBindTexture(GL_TEXTURE_2D, imgID) # imgID のテクスチャを有効化する
 glTranslate(x, y, 0) # 平行移動
 glColor(1, 1, 1) # 色指定
　
 # テクスチャ座標を指定する
 glBegin(GL_QUADS)
 glTexCoord(0.0, 1.0)
 glVertex(-1.0 / 2, -1.0 / 2)
 glTexCoord(1.0, 1.0)
 glVertex(1.0 / 2, -1.0 / 2)
 glTexCoord(1.0, 0.0)
 glVertex(1.0 / 2, 1.0 / 2)
 glTexCoord(0.0, 0.0)
 glVertex(-1.0 / 2, 1.0 / 2)
 glEnd()
　
 glPopMatrix() # 変形範囲の終了
　
　
def draw_pieces(gameboard, imgID_dict, size=8):
 '''駒を描画する

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

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

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

`imgID_dict`は`{'WN': 1, 'WR': 2, ...}`みたいな感じの
<tltp label="ディクショナリ">キーと値が 1 対 1 に対応する形でまとめられた構造</tltp>
にしています。

```py name=pieces.py
class Knight(Piece):
 abbr = 'N'
 def availableMoves(self, x, y, gameboard, Color=None):
 ...
　
class Rook(Piece):
 abbr = 'R'
 def availableMoves(self, x, y, gameboard, Color=None):
 ...
...
　
piece_names = [Knight, Rook, Bishop, Queen, King, Pawn]
　
# 画像IDの割り当て
piece_ID = {}
for i, piece in enumerate(piece_names):
 piece_ID['W' + piece.abbr] = i + 1
 piece_ID['B' + piece.abbr] = -(i + 1)
```

[元のコードの`uniDict`](https://gist.github.com/rsheldiii/2993225#file-chess-py-L234)は、あとからまとめて指定している感じですが、

これから駒が増えていくのに備えて、各駒のクラス内で駒を表す新たな
<tltp label="プロパティ">オブジェクトが参照できるデータ</tltp>
（`abbr`）を定義しました。

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

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

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

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

<postimage src="board1" ext="png" alt="画像透過なし" />

おっと、[透過の設定](http://wisdom.sakura.ne.jp/system/opengl/gl17.html)をしなければいけませんね。

### 透過の設定

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

```py name=main.py hl_lines=5,6,9
def draw(self):
 '''描画コールバック'''
 glClearColor(0.6, 0.4, 0.2, 1.0)
 glClear(GL_COLOR_BUFFER_BIT)
 glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) # 混合処理の演算方法を指定
 glEnable(GL_BLEND) # 混合処理を有効化
 ...
 draw_pieces(self.gameboard, piece_ID)
 glDisable(GL_BLEND) # 混合処理を無効化
 glutSwapBuffers()
```

<postimage src="board2" ext="png" alt="画像透過あり" />

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

---

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

<pstlk label="次回" to="chess-app-devel-8" />はマウス操作で駒を動かせるようにしたいと思います。

この記事がお役に立てたならうれしいです<img className="emoji" draggable="false" alt="☺️" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/263a.png"/>

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

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 7 回です。
前回で駒を乗せるための盤面が準備できました。
今回は、盤面に配置する駒の画像を準備して読み込んで画面に表示していきたいと思います。
…

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

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

<pstlk label="前回" to="chess-app-devel-5" />で機能面はある程度整いました。

しかし、現在はコマンドラインでテキストで絵を描いて表示し、ユーザのコマンドで動かしている状態なので、

インタフェース的にもう少し楽しくしたいですねー。

ということで、今回からは **OpenGL** というものを使って、画面に絵を描いたりマウス入力を受け付けたりできるようにしましょう！ 



 

<toc />

## OpenGL とは

OpenGL はコンピュータグラフィックスライブラリのひとつです。

競合は DirectX とか。

Windows と Python で OpenGL をインストールする方法はこちらが参考になります。

→ [WindowsのPythonでOpenGLを使う](http://tadaoyamaoka.hatenablog.com/entry/2017/02/28/064625)

 

ちょっとはまったのですが、ダウンロードしてきた freeglut の中の dll ファイルを `C:\Windows\SysWOW64`にコピーしてこないと GLUT が認識されないもようです。

私の場合、いろいろいじりすぎてよくわからないんですが、最終的に`SysWOW64`に`glut32.dll`を入れれば動いてくれました。

ちなみに`glut32.dll`を取り除くとこんなエラーが出ました。

```txt hide_nums
OpenGL.error.NullFunctionError: Attempt to call an undefined function glutInit, check for bool(glutInit) before calling
```

これは後述のプログラム中の`glutInit()`関数を認識できていないことを示します。

何をどこに入れればいいのかはビット数によっても変わってくるみたいなので、

とりあえず当たって砕けろ方式でダウンロードしてきた dll を全部`System32`か`SysWOW64`にぶち込めば成功した、なんてこともあります。

ちなみに私の実行環境は Windows 10 64bit と Python 3.7.4 on win32 です。

 

後に Python 3.8.3 / PyOpenGL 3.1.5 に変更するとまた動かなくなってしまいました。

PyOpenGL を[公式サイト](http://pyopengl.sourceforge.net/#installation)から直接ダウンロード・解凍して、

`OpenGL/DLLS/`以下の`freeglut64.vc9.dll`, `freeglut64.vc10.dll`, `freeglut64.vc14.dll`を

`System32`に入れると動きました。

どれが効いているのかはわかりません。

ちなみに、`freeglut32.vc9.dll`とかもありました。

 

## ウィンドウ表示

描いた絵を表示する領域を作ります。

```py name=main.py del=16
from OpenGL.GL import *
from OpenGL.GLUT import *
　
...
　
WSIZE = 720 # 画面サイズ
　
...
　
class Game():
 def __init__(self):
 ...
 self.glmain()
 ...
 def main(self):
 # while True
 ...
 ...
 def draw(self):
 '''描画コールバック'''
 glClearColor(0.6, 0.4, 0.2, 1.0)
 glClear(GL_COLOR_BUFFER_BIT)
　
 def glmain(self):
 glutInit(sys.argv)
 glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA) # 表示設定
 glutInitWindowSize(WSIZE, WSIZE) # 画面サイズ
 glutInitWindowPosition(0, 0) # 画面の表示位置
 glutCreateWindow(b'Chess') # ウィンドウの名前
 glutDisplayFunc(self.draw) # 描画
 glutMainLoop()
```

何をやっているのか詳しく知りたい方は、こちらのサイトなどをご覧ください。

→ [はじめての OpenGL](http://wisdom.sakura.ne.jp/system/opengl/gl2.html)

`glutMainLoop()`がループ処理をしてくれるので、`main()`内の`while`文は不要になります。

これで茶色い画面が表示されるはずです。

 

## 盤面の描画

チェス盤、いわゆるチェッカーボードを描くために、ちょっと準備がいります。

### 四角形の描画

とりあえず、新しいファイルを作り、四角形を描画する関数を定義します。

```py name=utils.py
from OpenGL.GL import *
from OpenGL.GLUT import *
　
def square(x, y):
 '''
 正方形を描画する
 
 Parameters
 ----------
 x, y : float
		中心の座標．
 '''
 glPushMatrix() # 変形が及ぶ範囲の開始
 glTranslate(x, y, 0) # 以下の対象を平行移動
 glBegin(GL_QUADS) # 四角形の描画を宣言
 glVertex(-1.0 / 2, -1.0 / 2) # 頂点１の座標
 glVertex(1.0 / 2, -1.0 / 2) # 頂点２
 glVertex(1.0 / 2, 1.0 / 2) # 頂点３
 glVertex(-1.0 / 2, 1.0 / 2) # 頂点４
 glEnd() # 描画終了
 glPopMatrix() # 変形が及ぶ範囲の終了
```

`glPushMatrix()`と`glPopMatrix()`は[行列スタックを扱う関数](http://wisdom.sakura.ne.jp/system/opengl/gl14.html)なのですが、

コメントにあるぐらいの理解で使っています。

これがないと変形（`glTranslate()`とか）が後ろの図形にまで及んでしまいます。

あと、座標ですが、特に指定しない限り画面は左下(-1.0, -1.0)、右上(1.0, 1.0)となっています。

とりあえず、これを使って四角形を表示してみましょう。

```py name=main.py hl_lines=11-13
from utils import *
　
...
　
class Game():
 ...
 def draw(self):
 '''描画コールバック'''
 glClearColor(0.6, 0.4, 0.2, 1.0)
 glClear(GL_COLOR_BUFFER_BIT)
 glColor(1, 0, 0) # 色の指定
 square(0, 0)
 glutSwapBuffers() # 強制描画
```

中心に赤い正方形が表示されたと思います。

<postimage src="img1" ext="png" alt="赤い正方形" />

さて、チェス盤は 8x8 の計 64 の正方形が並んでいるので、大きさを合わせていきたいのですが、

正方形を縮小するという手段の他にも、描画範囲を広げるという手もあります。

フェアリーチェスでは盤面のサイズが広がる可能性が十二分にあるので、そこへの拡張を考えて後者の方法にしたいと思います。

さきほど、特に指定しない限り画面は左下(-1.0, -1.0)、右上(1.0, 1.0)となっていると言いましたが、

[`glOrtho()`](http://wisdom.sakura.ne.jp/system/opengl/gl12.html)を用いてこの範囲を指定することができます。

```py name=main.py hl_lines=3
def glmain(self):
 ...
 glOrtho(-1.0, 8.0, -1.0, 8.0, -4, 4)
 glutMainLoop()
```

これで左下(-1.0, -1.0)、右上(8.0, 8.0)になりました。

<postimage src="img2" ext="png" alt="赤い正方形左下" />

この大きさの正方形なら、左下(-0.5, -0.5)、右上(7.5, 7.5)の盤面ができるので、

ちょうどいい感じにマージンもできますね。

### 互い違いに四角形を配置

チェス盤は暗い色のマスと明るい色のマスが互い違いになって並んでいます。

暗い色のマスの位置を示すリストを利用することにします。

```py name=utils.py
dark_squares_list = ([(i, j) for i in range(0, 8, 2) for j in range(0, 8, 2)]
 + [(i, j) for i in range(1, 8, 2) for j in range(1, 8, 2)])
　
def draw_squares():
 '''マス目を描画する'''
 for i in range(8):
 for j in range(8):
 if (i, j) in dark_squares_list:
 glColor(0.82, 0.55, 0.28)
 square(i, j)
 else:
 glColor(1.00, 0.81, 0.62)
 square(i, j)
```

リスト内包表記というものを使っています。

`range()`の第三引数はスキップで、`range(0, 8, 2)`の場合「0-7までひとつおき」という意味になります。

さきほど`draw()`の中で四角形を描画していた部分を`draw_squares()`に書き換えれば、盤面が表示されます。

```py name=main.py hl_lines=7
class Game():
 ...
 def draw(self):
 '''描画コールバック'''
 glClearColor(0.6, 0.4, 0.2, 1.0)
 glClear(GL_COLOR_BUFFER_BIT)
 draw_squares()
 glutSwapBuffers() # 強制描画
```

<postimage src="board1" ext="png" alt="盤面" />

### 文字を設置

前後左右がわかりやすいように、
<tltp label="ファイル">縦の列 アルファベットで表す</tltp>
と
<tltp label="ランク">横の行 数字で表す</tltp>
の文字を入れましょう。

OpenGL 単体はあまり文字描画に強くない印象ですが、それでも一応間に合ってはいるので大丈夫だと思います。

またやりたくなったら何か手を打つかもしれません。

まずは文字列を描画する関数を定義します。

```py name=utils.py
def draw_str(x, y, string, font=GLUT_BITMAP_HELVETICA_18, gap=0.25):
 '''
 文字列を描画する

 Parameters
 ----------
 x, y : float
 描画する座標．
 string : str
 描画する文字列．
 font : , default GLUT_BITMAP_HELVETICA_18
 フォント．以下から指定．
 GLUT_BITMAP_8_BY_13
 GLUT_BITMAP_9_BY_15
 GLUT_BITMAP_TIMES_ROMAN_10
 GLUT_BITMAP_TIMES_ROMAN_24
 GLUT_BITMAP_HELVETICA_10
 GLUT_BITMAP_HELVETICA_12
 GLUT_BITMAP_HELVETICA_18
 gap : float, default 0.25
 文字間隔．
 '''
 for k in range(len(string)):
 glRasterPos2f(x + gap*k, y) # 描画位置指定
 glutBitmapCharacter(font, ord(string[k])) # 文字列描画
```

文字列描画に関してはこちらが参考になります。

→ [情報メディア実験](http://slis.tsukuba.ac.jp/~fujisawa.makoto.fu/lecture/iml/text/screen_character.html)

次にファイルとランクの文字を描画する関数です。

```py name=utils.py
def draw_file():
 '''ファイルの文字を描画する'''
 glColor(1.0, 1.0, 1.0)
 for x in range(8):
 draw_str(x, -0.75, chr(x + 97))
　
def draw_rank():
 '''ランクの文字を描画する'''
 glColor(1.0, 1.0, 1.0)
 for y in range(8):
 draw_str(-0.75, y, str(y + 1))
```

`chr()`は文字の番号をもとに文字に変換するもので、

```py hide_nums
>>> chr(97) == 'a'
True
```

となります（`ord()`はその逆です）。

これを`draw()`の中に書き加えていけばOKです。

```py name=main.py hl_lines=8-9
class Game():
 ...
 def draw(self):
 '''描画コールバック'''
 glClearColor(0.6, 0.4, 0.2, 1.0)
 glClear(GL_COLOR_BUFFER_BIT)
 draw_squares()
 draw_file()
 draw_rank()
 glutSwapBuffers() # 強制描画
```

<postimage src="board2" ext="png" alt="盤面 文字付き" />

---

これで盤面が表示されたので、<pstlk label="次回" to="chess-app-devel-7" />は駒の画像をこの上に配置していきます！

最後までご覧いただきありがとうございました<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第6回です。
前回で機能面はある程度整いました。
しかし、現在はコマンドラインでテキストで絵を描いて表示し、ユーザのコマンドで動かしている状態なので、
インタフェース的にもう少し楽しくしたいですねー。
ということで、今回からは OpenGL というものを使って、画面に絵を描いたりマウス入力を受け付けたりできるようにしましょう！
…

OpenGL

チェスアプリ開発(19) キャスリングの拡張（曖昧性の排除と駒の再配置）

チェスアプリ開発(11) プロモーションの実装

チェスアプリ開発(9) 駒の動きをアニメーションにする

チェスアプリ開発(8) マウス操作で駒を動かす

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

チェスアプリ開発(6) PyOpenGL で盤面を描画