フェーズ 4 歩くアニメを入れる

トップページ ／ step2 概要 ／ フェーズ 4

ゴール

いまはキーを押した瞬間に、主人公がカクッと 8 ドット飛びます。 これを8 フレームかけて、1 ドットずつすべるようにします。 押した荷物もいっしょにすべります。あわせて足踏みを入れ、 矢印キーを押しっぱなしにすると歩き続けるようにします。 フェーズ 3 のコードに 36 行ほど書き足して、できあがりは 192 行になります。

1. 考え方

1-1. キーを押した瞬間に、盤面の上ではもう着いている

「8 フレームかけて動かす」と聞くと、 1 ドット動かすたびに壁や荷物を調べ直す作りを思い浮かべるかもしれません。 それはとても大変です。ドットの途中ではマスとマスのあいだにいるので、 「いまどのマスにいるのか」がはっきりしません。

倉庫番では、そうしません。キーを押したその瞬間に、判定はぜんぶ終わらせます。 壁か、荷物か、押せるか——フェーズ 3 で書いた try_move() が、 今までどおり一瞬で答えを出し、self.player_x はもう新しいマスになります。

そのうえで、絵を描くときだけ「まだ着いていないふり」をします。 これが step2 概要の土台 3 に書いた 「マス目の位置と、目に見えている位置は別もの」です。

1-2. 歩いているあいだは、キーを見ない

歩いている 8 フレームのとちゅうで次のキーを受け付けてしまうと、 着く前に次のマスへ移ろうとして、絵の出発点がめちゃくちゃになります。 そこで止まっているときだけキーを見ることにします。

1-3. 押した荷物も、同じ 8 フレームで動かす

荷物を押したとき、主人公だけがすべって、荷物は瞬間移動すると台なしです。 押した荷物も、まったく同じ 8 フレームで、同じだけずらして描きます。

2. このフェーズで使う機能

3. 手順

8 段階に分けます。3-2 から 3-8 まで書かないと動かないので、 最後まで書いてから実行してください。

3-1. 足踏みの絵（コマ B）を 4 枚描く

リソースエディタ（pyxel edit sokoban.pyxres）を開き、 イメージバンク 0 の 3 段目（v = 16）に、主人公の 4 方向をもう 1 組描きます。 場所は フェーズ 1 の配置図のとおりです。

3-2. 定数を 2 つ足し、V_PLAYER の名前を変える

ファイルの上のほう、定数を並べているところを書き換えます。 V_PLAYER は V_PLAYER_A に名前を変えます （B と並べたときに、どちらがどちらか分かるようにするためです）。

SCREEN_WIDTH = 160
SCREEN_HEIGHT = 120
TILE = 8                # 1 マスの大きさ（ドット）
HUD_HEIGHT = 12         # 画面の上、手数などを出すために空けておく高さ
MOVE_FRAMES = 8         # 隣のマスへ移りきるまでにかけるフレーム数   ← 足す

# イメージバンク 0 の、切り出し位置
V_TILE = 0              # タイルの段
V_PLAYER_A = 8          # 主人公の段（コマ A）                      ← 名前を変える
V_PLAYER_B = 16         # 主人公の段（コマ B・足を入れ替えた絵）     ← 足す

3-3. load_stage() に、歩きの状態を足す

最初の 3 行のうしろに 2 行足し、二重ループのあとにも 2 行足します。

    def load_stage(self, rows):
        """文字の地図を読んで、壁・主人公・荷物に分ける"""
        self.tiles = []
        self.boxes = []
        self.player_dir = DIR_DOWN  # はじめは下を向いている
        self.walk_timer = 0         # 0 なら止まっている。1〜8 は歩いている途中
        self.pushing = False        # いまの一歩で、荷物を押しているか

            self.tiles.append(line)

        self.from_x = self.player_x     # 見た目の出発マス
        self.from_y = self.player_y

        # 盤面を画面の中央に置くための、ずらし幅

3-4. update() を書き換える

いまは self.handle_key() の 1 行だけです。ここが今回の心臓部になります。

    def update(self):
        """フレーム毎の更新処理"""
        if self.walk_timer > 0:                 # 歩いている途中
            self.walk_timer += 1
            if self.walk_timer > MOVE_FRAMES:   # 隣のマスに着いた
                self.walk_timer = 0
                self.from_x = self.player_x     # 見た目を、いまいるマスに合わせる
                self.from_y = self.player_y
                self.pushing = False

        if self.walk_timer == 0:                # 止まっているときだけ、キーを見る
            self.handle_key()

3-5. btnp を btn に変える

handle_key() の 4 か所を書き換えるだけです。p を消します。

    def handle_key(self):
        """矢印キーを見て、押された向きへ 1 歩進もうとする"""
        if pyxel.btn(pyxel.KEY_DOWN):
            self.try_move(DIR_DOWN)
        elif pyxel.btn(pyxel.KEY_UP):
            self.try_move(DIR_UP)
        elif pyxel.btn(pyxel.KEY_LEFT):
            self.try_move(DIR_LEFT)
        elif pyxel.btn(pyxel.KEY_RIGHT):
            self.try_move(DIR_RIGHT)

3-6. try_move() の最後に 2 行足す

荷物を動かした直後に 1 行、いちばん下に 1 行です。

            self.move_box(next_x, next_y, dx, dy)
            self.pushing = True                 # この一歩は、荷物を押している

        self.player_x = next_x
        self.player_y = next_y
        self.walk_timer = 1                     # ここから 8 フレームかけて歩く

3-7. slide_pos() を足す

try_move() と draw() のあいだに、新しいメソッドを 1 つ足します。 1-1 の式を、そのままコードにしたものです。

    def slide_pos(self, origin, from_cell, to_cell):
        """出発マスから到着マスへ、いまどこまで来たかをドットで返す"""
        moved = (to_cell - from_cell) * TILE * self.walk_timer // MOVE_FRAMES
        return origin + from_cell * TILE + moved

3-8. draw() の、荷物と主人公を書き換える

壁を描く二重ループはそのままです。その下の 2 か所を書き換えます。

        # 荷物。押している 1 つだけは、主人公といっしょにすべる
        dx, dy = MOVES[self.player_dir]
        push_x = self.player_x + dx         # 押した荷物は、主人公の目の前にいる
        push_y = self.player_y + dy
        for box in self.boxes:
            if self.pushing and box[0] == push_x and box[1] == push_y:
                bx = self.slide_pos(self.ox, box[0] - dx, box[0])
                by = self.slide_pos(self.oy, box[1] - dy, box[1])
            else:
                bx = self.ox + box[0] * TILE
                by = self.oy + box[1] * TILE
            pyxel.blt(bx, by, 0, U_BOX, V_TILE, TILE, TILE, pyxel.COLOR_BLACK)

        # 主人公
        px = self.slide_pos(self.ox, self.from_x, self.player_x)
        py = self.slide_pos(self.oy, self.from_y, self.player_y)
        v = V_PLAYER_A
        if self.walk_timer >= MOVE_FRAMES // 2: # 歩きの後半は、足を入れ替える
            v = V_PLAYER_B
        pyxel.blt(px, py, 0, self.player_dir * TILE, v, TILE, TILE, pyxel.COLOR_BLACK)

4. できあがりのコード

書き足したのは定数 2 つ、load_stage() の 4 行、update() の中身、 try_move() の 2 行、新しい slide_pos()、 そして draw() の下半分です。

# sokoban.py
# step2 フェーズ4：歩くアニメを入れる

import pyxel

SCREEN_WIDTH = 160
SCREEN_HEIGHT = 120
TILE = 8                # 1 マスの大きさ（ドット）
HUD_HEIGHT = 12         # 画面の上、手数などを出すために空けておく高さ
MOVE_FRAMES = 8         # 隣のマスへ移りきるまでにかけるフレーム数

# イメージバンク 0 の、切り出し位置
V_TILE = 0              # タイルの段
V_PLAYER_A = 8          # 主人公の段（コマ A）
V_PLAYER_B = 16         # 主人公の段（コマ B・足を入れ替えた絵）
U_FLOOR = 0
U_WALL = 8
U_GOAL = 16
U_BOX = 24

# 向き。この番号がそのまま主人公の絵の切り出し位置になる
DIR_DOWN = 0
DIR_UP = 1
DIR_LEFT = 2
DIR_RIGHT = 3

# 向きごとの、1 歩ぶんのずれ（x のずれ, y のずれ）
MOVES = [
    (0, 1),         # 下
    (0, -1),        # 上
    (-1, 0),        # 左
    (1, 0),         # 右
]

# ステージの地図
# # 壁  . 床  O ゴール  $ 荷物  @ 主人公
STAGE1 = [
    "########",
    "#......#",
    "#..O.O.#",
    "#..$.$.#",
    "#..@...#",
    "########",
]

class App:
    def __init__(self):
        """起動時の設定"""
        pyxel.init(SCREEN_WIDTH, SCREEN_HEIGHT, title="Sokoban")
        pyxel.load("sokoban.pyxres")
        self.load_stage(STAGE1)
        pyxel.run(self.update, self.draw)

    def load_stage(self, rows):
        """文字の地図を読んで、壁・主人公・荷物に分ける"""
        self.tiles = []
        self.boxes = []
        self.player_dir = DIR_DOWN  # はじめは下を向いている
        self.walk_timer = 0         # 0 なら止まっている。1〜8 は歩いている途中
        self.pushing = False        # いまの一歩で、荷物を押しているか

        for y in range(len(rows)):
            line = []
            for x in range(len(rows[y])):
                mark = rows[y][x]
                if mark == "@":
                    self.player_x = x
                    self.player_y = y
                    mark = "."      # 主人公の足元は床
                elif mark == "$":
                    self.boxes.append([x, y])
                    mark = "."      # 荷物の下も床
                line.append(mark)
            self.tiles.append(line)

        self.from_x = self.player_x     # 見た目の出発マス
        self.from_y = self.player_y

        # 盤面を画面の中央に置くための、ずらし幅
        board_w = len(self.tiles[0]) * TILE
        board_h = len(self.tiles) * TILE
        self.ox = (SCREEN_WIDTH - board_w) // 2
        self.oy = HUD_HEIGHT + (SCREEN_HEIGHT - HUD_HEIGHT - board_h) // 2

    def update(self):
        """フレーム毎の更新処理"""
        if self.walk_timer > 0:                 # 歩いている途中
            self.walk_timer += 1
            if self.walk_timer > MOVE_FRAMES:   # 隣のマスに着いた
                self.walk_timer = 0
                self.from_x = self.player_x     # 見た目を、いまいるマスに合わせる
                self.from_y = self.player_y
                self.pushing = False

        if self.walk_timer == 0:                # 止まっているときだけ、キーを見る
            self.handle_key()

    def handle_key(self):
        """矢印キーを見て、押された向きへ 1 歩進もうとする"""
        if pyxel.btn(pyxel.KEY_DOWN):
            self.try_move(DIR_DOWN)
        elif pyxel.btn(pyxel.KEY_UP):
            self.try_move(DIR_UP)
        elif pyxel.btn(pyxel.KEY_LEFT):
            self.try_move(DIR_LEFT)
        elif pyxel.btn(pyxel.KEY_RIGHT):
            self.try_move(DIR_RIGHT)

    def has_box(self, x, y):
        """そのマスに荷物があるかどうかを答える"""
        for box in self.boxes:
            if box[0] == x and box[1] == y:
                return True
        return False

    def move_box(self, x, y, dx, dy):
        """(x, y) にある荷物を、(dx, dy) だけ動かす"""
        for box in self.boxes:
            if box[0] == x and box[1] == y:
                box[0] += dx
                box[1] += dy
                return

    def try_move(self, direction):
        """その向きへ動けるか調べて、動けるときだけ 1 マス進む"""
        self.player_dir = direction     # 動けなくても、向きだけは変える

        dx, dy = MOVES[direction]
        next_x = self.player_x + dx
        next_y = self.player_y + dy

        if self.tiles[next_y][next_x] == "#":   # 行き先が壁なら
            return                              # 何もしないで戻る

        if self.has_box(next_x, next_y):        # 行き先に荷物があるなら
            far_x = next_x + dx                 # 荷物の、1 つ先のマス
            far_y = next_y + dy
            if self.tiles[far_y][far_x] == "#": # その先が壁なら押せない
                return
            if self.has_box(far_x, far_y):      # その先に別の荷物があっても押せない
                return
            self.move_box(next_x, next_y, dx, dy)
            self.pushing = True                 # この一歩は、荷物を押している

        self.player_x = next_x
        self.player_y = next_y
        self.walk_timer = 1                     # ここから 8 フレームかけて歩く

    def slide_pos(self, origin, from_cell, to_cell):
        """出発マスから到着マスへ、いまどこまで来たかをドットで返す"""
        moved = (to_cell - from_cell) * TILE * self.walk_timer // MOVE_FRAMES
        return origin + from_cell * TILE + moved

    def draw(self):
        """描画処理"""
        pyxel.cls(pyxel.COLOR_BLACK)

        # 壁を、上の行から 1 マスずつ描く
        for y in range(len(self.tiles)):
            for x in range(len(self.tiles[y])):
                mark = self.tiles[y][x]
                if mark == "#":
                    u = U_WALL
                elif mark == "O":
                    u = U_GOAL
                else:
                    u = U_FLOOR
                pyxel.blt(self.ox + x * TILE, self.oy + y * TILE,
                            0, u, V_TILE, TILE, TILE)

        # 荷物。押している 1 つだけは、主人公といっしょにすべる
        dx, dy = MOVES[self.player_dir]
        push_x = self.player_x + dx         # 押した荷物は、主人公の目の前にいる
        push_y = self.player_y + dy
        for box in self.boxes:
            if self.pushing and box[0] == push_x and box[1] == push_y:
                bx = self.slide_pos(self.ox, box[0] - dx, box[0])
                by = self.slide_pos(self.oy, box[1] - dy, box[1])
            else:
                bx = self.ox + box[0] * TILE
                by = self.oy + box[1] * TILE
            pyxel.blt(bx, by, 0, U_BOX, V_TILE, TILE, TILE, pyxel.COLOR_BLACK)

        # 主人公
        px = self.slide_pos(self.ox, self.from_x, self.player_x)
        py = self.slide_pos(self.oy, self.from_y, self.player_y)
        v = V_PLAYER_A
        if self.walk_timer >= MOVE_FRAMES // 2: # 歩きの後半は、足を入れ替える
            v = V_PLAYER_B
        pyxel.blt(px, py, 0, self.player_dir * TILE, v, TILE, TILE, pyxel.COLOR_BLACK)

App()

5. 実行する

cd step2
python sokoban.py

見た目のマス配置はフェーズ 3 と同じです。確かめてほしいのは、動きのほうです。

6. コードの解説

6-1. なぜ else ではなく、2 つめの if なのか

        if self.walk_timer > 0:
            ...
            if self.walk_timer > MOVE_FRAMES:
                self.walk_timer = 0        # ← ここで 0 になる

        if self.walk_timer == 0:           # ← だから、同じフレームで成り立つ
            self.handle_key()

矢印キーを押しっぱなしにしているときの、フレームごとの動きを追ってみます。 8 フレーム目に着いて、その同じフレームで次の一歩が始まります。

9 フレーム目に注目してください。walk_timer が 9 になって「着いた」と分かり、 0 に戻され、そのまま handle_key() が呼ばれて 1 になります。 1 フレームのあいだに 3 回書き換わっています。おかげで、 ワンコは 1 フレームに 1 ドットずつ、休まずに進み続けます。

もし else にすると、9 フレーム目は「着いた」で終わってしまい、 キーを見るのは 10 フレーム目です。9 フレーム目と 10 フレーム目で、同じ場所に立ち止まります。 1 マスごとに 1 回、わずかに引っかかる歩き方になります。

6-2. // は、切り捨ての割り算

        moved = (to_cell - from_cell) * TILE * self.walk_timer // MOVE_FRAMES

/ だと 4.0 のような小数になります。 Pyxel の blt() に小数を渡すと、思わぬ位置に描かれたりエラーになったりします。 // は小数点以下を切り捨てて整数を返すので、ドットの計算にはこちらを使います。

>>> 8 * 3 / 8
3.0
>>> 8 * 3 // 8
3
>>> 8 * 3 // 5      # 割り切れないとき
4

6-3. btn と btnp の違い

フェーズ 2・3 では、瞬間移動だったので btnp がちょうどよいブレーキになっていました。 btn にしていたら、1 秒で 30 マス進んでしまいます。

いまは「歩いているあいだはキーを見ない」というブレーキを、自分で作りました。 だから btn に変えても暴走しません。 むしろ btnp のままだと、押しっぱなしで歩き続けられず、 1 マスごとにキーを押し直すことになります。

6-4. from_x は「見た目の出発点」

self.from_x は、止まっているあいだは self.player_x と同じ値です。 だから slide_pos() の計算はこうなります。

moved  = (4 - 4) * 8 * 0 // 8   →  0
return   48 + 4 * 8 + 0          →  80      # マス目どおりの位置

つまり止まっているときも、同じ式で正しい位置が出ます。 「歩いているとき用」と「止まっているとき用」で描き分ける必要はありません。 if が 1 つ減ります。

6-5. self.pushing がないと、どうなるか

「主人公の目の前に荷物がある」だけを条件にしてしまうと、こうなります。

#..@.$.#      ← ワンコと、2 マス先のリンゴ

→ を 1 回押す（押していない。ただ近づいただけ）
#...@$.#      ← 盤面はこう

でも画面では、リンゴまで 8 ドットすべってしまう

リンゴがワンコの上に重なりながらついてきます。 self.pushing は「この一歩で本当に押したか」を覚えておくための、 True / False ひとつだけの小さな覚え書きです。

6-6. 足踏みは、たった 2 コマ

        v = V_PLAYER_A
        if self.walk_timer >= MOVE_FRAMES // 2: # 歩きの後半は、足を入れ替える
            v = V_PLAYER_B

MOVE_FRAMES // 2 は 4 です。つまり 前半（1〜3）はコマ A、後半（4〜8）はコマ B、 着いたら walk_timer が 0 になるのでコマ A に戻ります。 1 マス歩くたびに A → B → A と、足が 1 往復します。

V_PLAYER_A と V_PLAYER_B は、 イメージバンクの切り出す段（縦の位置）です。横の位置 （self.player_dir * TILE）はそのままなので、 向きと足踏みが、きれいに掛け算になっています。4 方向 × 2 コマ ＝ 8 枚の絵を、 数字 2 つで選び分けているわけです。

WALK_STEPS = [8, 16, 24, 16]     # 使いたい段を、見せたい順に並べる
v = WALK_STEPS[self.walk_timer * len(WALK_STEPS) // (MOVE_FRAMES + 1)]

7. うまくいかないときは

8. 次のフェーズ

これで「遊べる」から「気持ちよく遊べる」に一歩近づきました。 次はクリア判定と、やり直しです。 荷物がぜんぶゴールに乗ったらクリア、R キーでステージの最初から——を作ります。 これでようやく、行き詰まってもウィンドウを閉じなくてよくなります。