shigureni.dev

いまどの状態か — FSM

点が「いま何をしているか」を一つの変数で持つ。追っているのか、散っているのか、逃げているのか。状態と、状態が切り替わる条件。これを表にしたのが有限状態機械、FSM。

有限状態機械（FSM, Finite State Machine）は、取りうる状態を有限個に決め、状態ごとの振る舞いと、状態から状態への遷移条件だけで動きを記述する仕組み。state という一個の変数と switch の分岐で書ける。同じ「次にどう動くか」の処理を、状態という一個の値で表情を変える。状態が N 個あると遷移は最大 N² 通りで、状態が増えるほど条件分岐が爆発する。それを木構造で宣言的に解くのがビヘイビアツリー。

状態をタイマーで回す。state は 0 が追う、1 が散る、2 が逃げる。timer を毎フレーム減らし、0 になったら次の状態へ送って再充填する。状態ごとに塗りを変えて、いまどれにいるかを色で出す。

帯が上から下へ巡る。濃く塗られた帯が、いまの状態。下の横棒がタイマーの残りで、0 まで縮むと次の帯へ移る。逃げる状態だけ充填が短いので、滞在時間が他より短い。状態は 0→1→2→0 の輪を回るだけで、まだ何にも触れていない。

この state を動きに繋ぐ。標的が一つあって、点はその標的に対して状態ごとに違う向き方をする。追うときは標的へ近づく方へ、散るときは無視して漂い、逃げるときは標的から離れる方へ。四方の進み先それぞれに、標的までの距離でスコアを付け、状態によってスコアの符号を反転させて、一番高い向きを選ぶ。

const dirs = [
  [1, 0],
  [-1, 0],
  [0, 1],
  [0, -1],
]

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cell = Math.max(16, Math.min(w, h) / 22)
  const nx = Math.ceil(w / cell)
  const ny = Math.ceil(h / cell)

let state = 0
  let timer = 90
  let cx = (nx / 2) | 0
  let cy = (ny / 2) | 0
  const target = { cx: 2, cy: 2, t: 0 }
  const fill = [colors.ink, colors.tint(118), colors.tint(188)]

c.fillStyle = colors.paper
  c.fillRect(0, 0, w, h)

return () => {
    timer -= 1
    if (timer <= 0) {
      state = (state + 1) % 3
      timer = state === 1 ? 80 : 120
    }

target.t += 0.03
    target.cx = ((Math.sin(target.t) * 0.5 + 0.5) * (nx - 1)) | 0
    target.cy = ((Math.cos(target.t * 0.7) * 0.5 + 0.5) * (ny - 1)) | 0

// 四方の進み先を、標的までの距離でスコア付けする
    let best = -Infinity
    let nextX = cx
    let nextY = cy
    for (let d = 0; d < 4; d++) {
      const tx = cx + dirs[d][0]
      const ty = cy + dirs[d][1]
      if (tx < 0 || tx >= nx || ty < 0 || ty >= ny) continue
      const dist = Math.hypot(tx - target.cx, ty - target.cy)
      // 追う(0)は近づく方が高く、逃げる(2)は離れる方が高い。散る(1)はランダム
      let score = state === 0 ? -dist : dist
      if (state === 1) score = Math.random() * 6
      if (score > best) {
        best = score
        nextX = tx
        nextY = ty
      }
    }
    cx = nextX
    cy = nextY

c.fillStyle = colors.tintAlpha(238, 0.16)
    c.fillRect(0, 0, w, h)

// 標的
    c.fillStyle = colors.tintAlpha(8, 0.3)
    c.fillRect(target.cx * cell, target.cy * cell, cell, cell)

// 状態で色を変える点
    c.fillStyle = fill[state]
    c.beginPath()
    c.arc(cx * cell + cell / 2, cy * cell + cell / 2, cell * 0.42, 0, Math.PI * 2)
    c.fill()
  }
}

点が標的を追い、しばらくすると当てもなく散り、そのあと標的から逃げる。色がそのまま状態を表していて、state が切り替わる瞬間に向き方が裏返る。スコアを計算する処理は一つきりで、state === 0 ? -dist : dist の符号だけが追うと逃げるを分ける。散る状態はスコアをランダムにしているので、標的と無関係にうろつく。timer が状態の長さを決め、巡回する三状態を回し続ける。点が画面の隅に張り付いても、nx と ny が表示幅から決まるので右や下まで動ける。