miどりみちのブログ

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

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

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

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

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

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


完成イメージ

完成図

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


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

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

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

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

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

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

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

main.py
1
...
2
from time import sleep
3
...
4
　
5
class Game:
6
    def __init__(self):
7
        ...
8
        # アニメーション
9
        self.moving = False
10
        self.time = 1
11
        ...
12
    ...
13
　
14
    def idle_move(self):
15
        '''駒が動く時のアニメーション'''
16
        sleep(1.0 / 100)
17
        self.time += 1
18
        if self.time >= 10:
19
            self.moving = False
20
            glutIdleFunc(None)          # アニメーションの無効化
21
            glutMouseFunc(self.mouse)   # マウス操作の有効化
22
        glutPostRedisplay()
23
　
24
...
25
　
26
    def draw(self):
27
        ...
28
        if self.time == 1:
29
            self.main()
30
　
31
        ...
32
　
33
        if self.moving:
34
            # 動き中の駒を描画する
35
            if self.endpos in self.gameboard:
36
                glEnable(GL_TEXTURE_2D)
37
                draw_img(..., piece_ID[self.gameboard[self.startpos if self.time == 0 else self.endpos].name])
38
                glDisable(GL_TEXTURE_2D)
39
        ...
40
　
41
    def mouse(self, button, state, x, y):
42
        ...
43
        # 左クリック
44
        if (button == GLUT_LEFT_BUTTON
45
                and state == GLUT_DOWN):
46
            try:
47
                # 行先選択
48
                if (self.select_dest
49
                        and self.parse_mouse() in self.valid_moves(
50
                            self.gameboard[self.startpos], self.startpos, self.gameboard)):
51
                    self.select_dest = False
52
                    self.endpos = self.parse_mouse()
53
                    self.time = 0
54
                    self.moving = True
55
                    glutIdleFunc(self.idle_move)    # アニメーションの有効化
56
                    glutMouseFunc(None)             # マウス操作の無効化
57
                # 駒選択
58
                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 座標が入ります。

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

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

直線による補間

ちょっと数学の話です。

縦軸を pp、横軸を tt としたとき、この赤のグラフは

p=self.endpos−self.startpos10t+self.startposp = \frac{{\sf self.endpos} - {\sf self.startpos}}{10} t + {\sf self.startpos}

と表すことができます。

よって、

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

となります。

もっとなめらかな動きにしたいなら？

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

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

正弦曲線による補間

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

xx 軸方向に 5,y5, y 軸方向に

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

y=self.endpos−self.startpos2sin⁡(π10(x−5))    +self.startpos+self.endpos−self.startpos2=self.startpos+self.endpos−self.startpos2(sin⁡(π10(x−5))+1)\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}

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

これをコードに書くと

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

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

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


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

駒ダブル

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


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

これはで用意したdark_squares_listを使えば簡単にできます。

main.py
1
def draw(self):
2
    ...
3
    if self.moving:
4
        # 行先の駒を隠す
5
        if self.endpos in dark_squares_list:
6
            glColor(0.82, 0.55, 0.28)
7
        else:
8
            glColor(1.00, 0.81, 0.62)
9
        square(*self.endpos)
10
        # 動き中の駒を描画する
11
        if self.endpos in self.gameboard:
12
            glEnable(GL_TEXTURE_2D)
13
            draw_img(self.startpos[0] + ((self.endpos[0] - self.startpos[0]) / 2)
14
                * (sin(pi*(self.time - 5) / 10) + 1),
15
            self.startpos[1] + ((self.endpos[1] - self.startpos[1]) / 2)
16
                * (sin(pi*(self.time - 5) / 10) + 1),
17
            piece_ID[self.gameboard[self.startpos if self.time == 0 else self.endpos].name])
18
            glDisable(GL_TEXTURE_2D)
マスク後

いい感じですね。

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

main.py
1
def draw(self):
2
    ...
3
    draw_squares()
4
    # 移動開始位置のマスの色を変える
5
    if None not in self.startpos:
6
        glColor(0.0, 1.0, 0.0, 0.2)
7
        square(*self.startpos)
8
    ...

これで完成イメージと同じような動作ができるようになりました。

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

はチェスの特殊ルールのひとつであるアンパッサンを実装したいと思います。

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

では👋