NodeJS 中 requestAnimationFrame() 的服务器端实现
Server Side Implementation of requestAnimationFrame() in NodeJS
我对广泛使用的 requestAnimationFrame()
函数有一些疑问。最近我在多人游戏中遇到了一些在客户端而不是服务器端使用它的实现。
- 这样做有什么好处吗?
- 你能给我参考 NodeJS 中的任何 "best practices" 服务器端实现吗?
更新
我对动画和游戏循环有点困惑 - 我正在寻找的是 NodeJS 中的实现 => 例如 setInterval
。
示例 - 客户端实现
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}());
Is there any benefit in doing so?
在客户端- 有。虽然 setTimeout
和它的朋友 运行 在计时器队列中 - requestAnimationFrame
与浏览器对页面的呈现(绘制)同步,所以当你使用它时,没有抖动,因为你告诉它画什么和浏览器画什么同步
通常游戏有两个循环 - 渲染循环(绘制什么)和游戏循环(事物所在的逻辑)。第一个在 requestAnimationFrame
中,另一个在 setTimeout
中 - 两者都必须 运行 非常快。
这里是 Paul Irish 的 a reference on requestAnimationFrame。
Can you reference me to any "best practices" server side implementation in NodeJS?
由于服务器不呈现任何图像 - 在服务器中填充 requestAnimationFrame
没有意义。您将在 Node/io.js 中使用 setImmediate
作为您在客户端中使用 requestAnimationFrame
的内容。
简单的说——添加了requestAnimationFrame,解决了一个服务器不存在的问题(图形数据的无抖动渲染)
if(!window.requestAnimationFrame)
window.requestAnimationFrame = window.setImmediate
function requestAnimationFrame(f){
setImmediate(()=>f(Date.now()))
}
我对广泛使用的 requestAnimationFrame()
函数有一些疑问。最近我在多人游戏中遇到了一些在客户端而不是服务器端使用它的实现。
- 这样做有什么好处吗?
- 你能给我参考 NodeJS 中的任何 "best practices" 服务器端实现吗?
更新
我对动画和游戏循环有点困惑 - 我正在寻找的是 NodeJS 中的实现 => 例如 setInterval
。
示例 - 客户端实现
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}());
Is there any benefit in doing so?
在客户端- 有。虽然 setTimeout
和它的朋友 运行 在计时器队列中 - requestAnimationFrame
与浏览器对页面的呈现(绘制)同步,所以当你使用它时,没有抖动,因为你告诉它画什么和浏览器画什么同步
通常游戏有两个循环 - 渲染循环(绘制什么)和游戏循环(事物所在的逻辑)。第一个在 requestAnimationFrame
中,另一个在 setTimeout
中 - 两者都必须 运行 非常快。
这里是 Paul Irish 的 a reference on requestAnimationFrame。
Can you reference me to any "best practices" server side implementation in NodeJS?
由于服务器不呈现任何图像 - 在服务器中填充 requestAnimationFrame
没有意义。您将在 Node/io.js 中使用 setImmediate
作为您在客户端中使用 requestAnimationFrame
的内容。
简单的说——添加了requestAnimationFrame,解决了一个服务器不存在的问题(图形数据的无抖动渲染)
if(!window.requestAnimationFrame)
window.requestAnimationFrame = window.setImmediate
function requestAnimationFrame(f){
setImmediate(()=>f(Date.now()))
}