[{"data":1,"prerenderedAt":389},["ShallowReactive",2],{"content:\u002F2023\u002Fmultiplayer_frame_sync_strategies":3,"surround:\u002F2023\u002Fmultiplayer_frame_sync_strategies":378},{"id":4,"title":5,"body":6,"categories":352,"date":354,"description":355,"draft":356,"extension":357,"image":358,"meta":359,"navigation":361,"path":362,"permalink":363,"published":363,"readingTime":364,"recommend":369,"references":363,"seo":370,"sitemap":371,"stem":372,"tags":373,"type":376,"updated":363,"__hash__":377},"content\u002Fposts\u002F2023\u002Fmultiplayer_frame_sync_strategies.md","游戏帧同步",{"type":7,"value":8,"toc":342},"minimark",[9,13,26,29,33,45,48,51,54,57,60,67,70,78,84,87,90,93,96,107,110,113,116,119,122,125,128,134,137,140,148,151,154,160,163,166,169,172,175,180,186,191,197,202,208,213,219,222,225,228,231,239,242,245,248,251,257,260,263,266,269,275,282,285,299,302,313,316],[10,11,12],"h2",{"id":12},"前言",[14,15,16,20,23],"ul",{},[17,18,19],"li",{},"Lockstep state update 锁步状态更新",[17,21,22],{},"Client prediction 客户端预测",[17,24,25],{},"server reconcilation 服务端和解",[10,27,28],{"id":28},"多人游戏的运作方式",[30,31,32],"p",{},"游戏程序的玩家当前状态随时间和玩家的输入会进行变化。也就是说游戏是有状态的程序。多人游戏也不例外，但由于多人玩家之间存在交互，复杂性会更高。例如贪吃蛇游戏，我们假设它的操作会发送到服务器，那它的核心游戏逻辑应该是：",[34,35,36,39,42],"ol",{},[17,37,38],{},"客户端读取用户输入改变蛇的方向，也可以没有输入，然后发送给服务端",[17,40,41],{},"服务端接收消息，根据消息改变蛇的方向，将蛇的“头”移动一个单位空间",[17,43,44],{},"服务端检查蛇是否撞到了墙壁或者自己，如果撞到了游戏结束，给客户端发送响应消息，更新客户端的画面。如果没有撞到，则继续接收客户端发送的消息，同时也要响应给客户端消息，告诉客户端，蛇目前的状态。",[30,46,47],{},"服务端接收该消息做出对应的动作，这个过程会以固定的间隔运行。每一次循环都被称为 frame 或 tick。",[30,49,50],{},"客户端将解析服务端发送的消息，也就是每一帧的动作，渲染到游戏中。",[10,52,53],{"id":53},"锁步状态更新",[30,55,56],{},"为了确保所有客户端都同步帧，最简单的方法是让客户端以固定的间隔向服务器发送更新。发送的消息包含用户的输入，当然也可以发送 no user input。",[30,58,59],{},"服务器收集“所有用户”的输入后，就可以生成下一次 frame 帧。",[30,61,62],{},[63,64],"img",{"alt":65,"src":66},"533X404\u002FNetwork-01.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002FMszW\u002F533X404\u002FNetwork-01.png",[30,68,69],{},"上图演示了客户端与服务端的交互过程。T0 ~ T1 时间段，客户端保持等待，或者说空闲状态，直到服务器响应 frame，等待时间的大小取决于网络质量，约 50 毫秒到 500 毫秒，人眼能够注意到任何超过 100 毫秒的延迟，因此这个等待时间对于某些游戏来说是不可接受的。",[30,71,72,73,77],{},"锁步状态更新，还有一个问题。",[74,75,76],"strong",{},"游戏的延迟来自最慢的用户"," 。",[30,79,80],{},[63,81],{"alt":82,"src":83},"833X405\u002FNetwork-02.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002FBdi3\u002F833X405\u002FNetwork-02.png",[30,85,86],{},"上图有两个客户端。客户端 B 的网络比较差，A 和 B 都在 T0 时间点向服务器发送了用户输入，A 的请求在 T1 到达服务端，B 的请求在 T2 到达服务端，前面我们提到，服务器需要收集“所有用户”的请求后才开始工作，因此需要到 T2 时间点才开始生成 frame。",[30,88,89],{},"因为 Client B 比较慢，我们“惩罚”了所有的玩家。",[30,91,92],{},"假如我们不等待所有客户端的用户输入，低延迟玩家又会获得优势，因为它的输入到达服务器的时间更短，会更快处理。例如，两个玩家 A、B 同时互相射击预期是同时死亡，但是 A 玩家延迟比 B 玩家更低，因此在处理 B 玩家的用户输入时，A 玩家已经干掉 B 玩家了。",[30,94,95],{},"小结一下，锁步状态更新存在的问题，如下。",[14,97,98,101,104],{},[17,99,100],{},"游戏画面是否卡顿，取决于最慢的玩家",[17,102,103],{},"客户端需要等待来自服务器的响应，否则不会渲染画面",[17,105,106],{},"连接非常活跃，客户端需要定期发送一些无用的心跳包，以便服务器可以确定它拥有生成 frame 所需的所有信息",[30,108,109],{},"回合制类型的游戏大多数使用这种方法，因为玩家确实需要等待，例如《炉石传说》。",[30,111,112],{},"对于慢节奏的游戏，少量延迟也是可以接受的，例如《QQ农场》。",[30,114,115],{},"但是对于快节奏的游戏，锁步状态更新的这些问题都是致命的，不可能操纵游戏人物进入某一个建筑，500 毫秒后，我才能进入。我们一起来看看下一种方法。",[10,117,118],{"id":118},"客户端预测",[30,120,121],{},"客户端预测，在玩家的计算机上，运行游戏逻辑，来模拟游戏的行为，而不是等待服务器更新。",[30,123,124],{},"例如我们生成 Tn 时间点的游戏状态，我们需要 Tn-1 时间点的所有玩家状态和 Tn-1 时间点所有玩家的输入。",[30,126,127],{},"假设，我们现在的固定频率为 1 s，每 1s 需要给服务器发送一个请求，获取玩家状态并更新玩家的状态。",[30,129,130],{},[63,131],{"alt":132,"src":133},"483X405\u002FNetwork-03.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002Fjr5h\u002F483X405\u002FNetwork-03.png",[30,135,136],{},"在 T0 时间点，客户端将用户的输入发送到服务器，用于获取 T1 时间点的游戏状态。在 T1 时间点，客户端已经可以渲染画面了，实际上客户端的响应是在 T3 时刻，也就是说客户端没有等待来自服务器的响应。",[30,138,139],{},"使用这个方法，需要满足一些前置条件：",[14,141,142,145],{},[17,143,144],{},"客户端拥有游戏运行逻辑所需的所有条件",[17,146,147],{},"玩家状态的更新逻辑是确定性的，即没有随机性，或者可以以某种方式保证确定性，例如客户端和服务器使用同样的公式以及随机种子，可以保证具有随机性的同时，产生的结果具有确定性。这样保证了客户端和服务器在给定相同输入的情况下产生相同的游戏状态",[30,149,150],{},"满足这两点，客户端预测的结果也不一定总是对的。就比如刚提到的，使用相同的公式以及相同的随机种子，进行伪随机算法，但不同平台的浮点计算，可能会存在微小的差异。",[30,152,153],{},"再设想一个场景，如下图。",[30,155,156],{},[63,157],{"alt":158,"src":159},"775X399\u002FNetwork-04.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002FU8yc\u002F775X399\u002FNetwork-04.png",[30,161,162],{},"客户端 A 尝试使用 T0 时间点的信息模拟 T1 时间点上的游戏状态，但客户端 B 也在 T0 时间点提交了用户输入，客户端 A 并不知道这个用户输入。",[30,164,165],{},"这意味着客户端 A 对 T1 时间的预测将是错误的是，但！由于客户端 A 仍然从服务器接收 T1 时间点的状态，因此客户端有机会在 T3 时间点修正错误。",[30,167,168],{},"客户端需要知道，自己的预测是否正确，以及如何修正错误。",[30,170,171],{},"修正错误通常叫做 Reconcilation 和解。",[30,173,174],{},"需要根据上下文来实现和解部分，下面我们通过一个简单的例子来理解这个概念。这个例子只是抛弃我们的预测，并将其游戏状态替换为服务器响应的正确状态。",[14,176,177],{},[17,178,179],{},"客户端需要维护 2 个缓冲区，一个用于预测 PredictionBuffer，一个用于用户输入 InputBuffer 。它们是预测这个行为需要的上下文，请记住，预测 Tn 时刻，需要 Tn-1 的状态和 Tn-1 时刻的用户输入。它们一开始都为空",[30,181,182],{},[63,183],{"alt":184,"src":185},"402X219\u002FDetail-01.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002Fe0fn\u002F402X219\u002FDetail-01.png",[14,187,188],{},[17,189,190],{},"玩家点击鼠标，移动游戏角色到下一个位置。此时，玩家输入的移动信息 Input 0 存储在 InputBuffer 中，客户端将生成预测 Prediction 1，存储在 PredictionBuffer 中，预测将展示在玩家画面中",[30,192,193],{},[63,194],{"alt":195,"src":196},"520X227\u002FDetail-02.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002FE3QU\u002F520X227\u002FDetail-02.png",[14,198,199],{},[17,200,201],{},"客户端收到服务器响应的 State0 ，发现与客户端的预测不匹配，我们将Prediction 1 替换为 State 0，并使用 Input 0 和 State 0 重新计算，得到 Prediction 2，这个重新计算的过程，就是 Reconcilation 和解",[30,203,204],{},[63,205],{"alt":206,"src":207},"651X237\u002FDetail-03.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002FYT9i\u002F651X237\u002FDetail-03.png",[14,209,210],{},[17,211,212],{},"和解后，我们从缓冲区中删除 State 0 和 Input 0",[30,214,215],{},[63,216],{"alt":217,"src":218},"509X220\u002FDetail-04.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002FdMqo\u002F509X220\u002FDetail-04.png",[30,220,221],{},"这种和解的方式有一个明显的缺点，如果服务器响应的游戏状态和客户端预测差异太大，则游戏画面可能会出现错误。例如我们预测敌人在 T0 时间点向南移动，但在 T3 时间点，我们意识到它在向北移动，然后通过使用服务器的响应进行和解，敌人将从北“飞到”正确的位置。",[30,223,224],{},"有一些方法可以解决此问题，这里不展开讨论，感兴趣可以搜一下实体插值 Entity Interpolation。",[30,226,227],{},"小结一下，客户端预测技术，让客户端以自己的更新频率运行，与服务器的更新频率无关，所以服务器如果出现阻塞，不会影响客户端的帧。",[30,229,230],{},"但它也带来复杂性，如下。",[14,232,233,236],{},[17,234,235],{},"需要在客户端处理更多的状态和逻辑，比如我们前面提到的缓冲区和预测逻辑",[17,237,238],{},"需要和解来自服务器的状态（正确的游戏状态）与预测之前的冲突",[30,240,241],{},"还给我们带来了敌人从南飞到北的问题。",[30,243,244],{},"目前为止，我们都在讨论客户端，接下来看看服务端如何解决帧同步。",[10,246,247],{"id":247},"服务端和解",[30,249,250],{},"利用服务端解决帧同步问题，首先需要解决的是网络延迟带来的问题。如下图。",[30,252,253],{},[63,254],{"alt":255,"src":256},"1301X806\u002FServer-01.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002FEdd7\u002F1301X806\u002FServer-01.png",[30,258,259],{},"用户 A 在 T 处进行了操作（比如按下了一个技能键），该操作应该在 T+20ms 处理，但由于延迟，服务器在 T+120ms 才接收到输入。",[30,261,262],{},"在游戏中，用户做出指定操作后，应该立即有反应。立即有反应，这个立即是多久，取决于游戏的类型，比如之前我们提到的回合制，它的立即可能是几十秒。我们可以通过 T + X，表示立即反应的时间，T 代表用户的输入时刻，X 代表的是延迟。X 可以为 0，这代表真正的立即 :-)",[30,264,265],{},"解决这个问题的思路，与之前客户端预测中使用的办法类似，就是通过客户端的用户输入，来和解服务器中的玩家游戏状态。",[30,267,268],{},"所有的用户输入，都需要时间戳进行标记，该时间戳用于告诉服务器，什么时刻处理此用户输入。",[30,270,271],{},[63,272],{"alt":273,"src":274},"1229X1075\u002FServer-02.png","https:\u002F\u002Fimg.51shazhu.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20250731\u002F8rbp\u002F1229X1075\u002FServer-02.png",[30,276,277,278,281],{},"为什么在同一水平线上，Client A 的时间是 Time X，而 Server 的时间是 Time Y？",[279,280],"br",{},"\n因为客户端和服务端独立运行，通常时间会有所不同，在多人游戏中，我们可以特殊处理其中的差异。在特殊处理时，我们应该使客户端的时间大于服务端的时间，因为这样可以存在更大的灵活性",[30,283,284],{},"上图演示了一个客户端与服务端之间的交互。",[34,286,287,290,293,296],{},[17,288,289],{},"客户端发送带有时间戳的输入。客户端告诉服务器在 X 时间点应该发生用户输入的效果",[17,291,292],{},"服务端在 Y 时间点收到请求",[17,294,295],{},"在 Y+1 时间点，即红色框的地方，服务端开始和解，服务端将 X 时间点的用户输入应用于最新的游戏状态，以保证 X 的 Input 发生在 X 时间点",[17,297,298],{},"服务端发送响应，该响应中包含时间戳",[30,300,301],{},"服务端和解部分（上图红色底色部分），主要维护 3 个部分，如下。",[14,303,304,307,310],{},[17,305,306],{},"GameStateHistory，在一定时间范围内玩家在游戏中的状态",[17,308,309],{},"ProcessedUserInput，在一定时间范围内处理的用户输入的历史记录",[17,311,312],{},"UnprocessedUserInput，已收到但未处理的用户输入，也是在一定的时间内",[30,314,315],{},"服务端和解过程，如下。",[34,317,318,321,324,327,330,333,336,339],{},[17,319,320],{},"当服务端收到来自用户的输入时，首先将其放入 UnprocessedUserInput 中；",[17,322,323],{},"等待服务端开始同步帧，检查 UnprocessedUserInput 中是否存在任何早于当前帧的用户输入；",[17,325,326],{},"如果没有，只需要将最新的 GameState 更新为当前用户的输入，并执行游戏逻辑，然后广播到客户端；",[17,328,329],{},"如果有，则表示之前生成的某些游戏状态由于缺少部分用户输入而出错，需要和解，也就是更正。首先需要找到最早的，未处理的用户输入，假设它在时间 N 上，我们需要从 GameStateHistory 中获取时间 N 对应的 GameState 以及从 ProcessedUserInput 获取时间 N 上用户的输入；",[17,331,332],{},"使用这 3 条数据，就可以创建一个准确的游戏状态，然后将未处理的输入 N 移动到 ProcessingUserInput，用于之后的和解；",[17,334,335],{},"更新 GameStateHistory 中的游戏状态；",[17,337,338],{},"重复步骤 4 ~ 6，直到从 N 的时间点到最新的游戏状态；",[17,340,341],{},"服务端将最新帧广播给所有玩家。",{"title":343,"searchDepth":344,"depth":344,"links":345},"",4,[346,348,349,350,351],{"id":12,"depth":347,"text":12},2,{"id":28,"depth":347,"text":28},{"id":53,"depth":347,"text":53},{"id":118,"depth":347,"text":118},{"id":247,"depth":347,"text":247},[353],"技术","2023-09-11 18:34:07","介绍该问题的基本概念和常见解决方案，我并没有做过帧同步的工作，分享的知识都是我对它感兴趣，在网上看了许多经验后整理的。",false,"md","https:\u002F\u002Fimg2.tofaka.com\u002Fautoupload\u002FZ3wg1auvHGH_fxQcOFgj2SfNcKcqEnRmcljopnyJoMs\u002F20260616\u002FhMiP\u002F3840X2160\u002Fwallhaven-ly229p.png\u002Fwebp",{"slots":360},{},true,"\u002F2023\u002Fmultiplayer_frame_sync_strategies",null,{"text":365,"minutes":366,"time":367,"words":368},"16 min read",15.53,931800,3106,1,{"title":5,"description":355},{"loc":362},"posts\u002F2023\u002Fmultiplayer_frame_sync_strategies",[374,375],"游戏","帧同步","story","6pN74KoQNgZttcgDtQVUnQw56fYvLrVXqt4A2p1fy9c",[379,384],{"title":380,"path":381,"stem":382,"date":383,"type":376,"children":-1},"0 秒改 struct 性能直接提升 15%，产品姐姐都夸我好棒","\u002F2022\u002Fstruct_perf_boost_15_percent","posts\u002F2022\u002Fstruct_perf_boost_15_percent","2022-08-18 19:53:37",{"title":385,"path":386,"stem":387,"date":388,"type":376,"children":-1},"搭建 Redis 主从模式","\u002F2024\u002Fredis_master_slave","posts\u002F2024\u002Fredis_master_slave","2024-11-23 19:53:37",1781779103066]