redux-saga 上的游戏循环答案

【问题标题】：Game loop on redux-sagaredux-saga 上的游戏循环
【发布时间】：2017-03-21 11:08:35
【问题描述】：

我正在使用 redux-saga 在 react native 中创建 snake game 的一个版本，但我不确定如何进行游戏循环实现。到目前为止我有一个工作版本，但感觉很笨拙..蛇移动速度不同，游戏不是很流畅。

这是我目前得到的：

function *tickSaga() {
  while (true) {
    yield call(updateGameSaga)
    const game = yield select(getGame)
    if (game.crashed)
      break
    yield delay(1000)
  }
}

updateGameSaga 基本上是从 store 中获取状态，处理一些逻辑（判断蛇的下一步动作是否会崩溃，移动到空的 tile 或移动到 food tile 并成长）并为其调度相应的动作.

我稍微了解requestAnimationFrame 之类的东西，我知道我应该使用它，但我不确定如何让它在传奇中工作（也许我不需要在传奇中这样做，因此这个问题）。

欢迎任何关于如何提高游戏循环流畅度的想法。

更新

我已包含redux-saga-ticker，它在内部使用setInterval（代码here）定期向频道发送更新。

function *tickSaga() {
  const channel = Ticker(1000); // game tick every 1000ms
  while (true) {
    yield take(channel);
    yield call(updateGameSaga);

    const game = yield select(getGame)
    if (game.crashed)
      break
  }
}

现在效果更好，我喜欢渠道方法，但我仍然觉得requestAnimationFrame 是要走的路，虽然我还不确定如何实现它。

【问题讨论】：

标签： react-native game-loop redux-saga

【解决方案1】：

这个怎么样。

let lastTime = 0;
function *tickSaga() {
  while (true) {
    var time = +new Date();
    var delayTime = Math.max(0, 1000 - (time - lastTime));
    lastTime = time + delayTime;
    yield call(updateGameSaga)
    const game = yield select(getGame)
    if (game.crashed)
      break
    yield delay(delayTime)
  }
}

如果您需要 60 fps，请将 1000 替换为 16 (1000/60)。对于每个刻度，您都有一个间隔（时间 - lastTime）的更正，因此刻度间隔应该是统一的。

【讨论】：