2012-06-11 99 views
-1

我们正在开发街机(很多动作和速度)浏览器2D游戏使用画布。KeyDown/KeyUp 70-120ms延迟。如何减少?

有时我们的测试玩家报告我们存在延迟:玩家在锁定后仍然移动5-10个像素。

我已经挖了这个问题,你可以看到自己延迟http://jsfiddle.net/C4ev3/7/(尽可能快地尝试keydown/up任意键)。我的结果是从70到120ms。我认为这很多。 (仅供参考,我们的网络延迟为10-20ms)。

任何想法如何减少这种延迟?

upd我注意到,在良好的硬件上,这个延迟低于30-40ms。但是我测试的酷睿,WINXP,铬19 - 它不是用IE6一个P4 :)

+1

无论如何,我们可以看到更多的代码?我怀疑它是造成这个问题的关键事件。它甚至可能与使用jQuery创建速度非常重要的游戏有关。如果其所有客户端都网络延迟不会影响游戏。 – Loktar

+0

如果我离开按键无限,我有25-33 – Sebas

+0

但我的下/上箭头不检测,但... – Sebas

回答

2

在一个你可以做的,而不是使用匿名函数尝试使用自定义函数的事情,

http://jsfiddle.net/C4ev3/10/ - 为我这个报告在50-100 MS

但是我不会推荐的jQuery的画布应用程序是为你使用,你应该尽量使用原生的JavaScript

http://jsfiddle.net/C4ev3/11/非常小非常大 - 对于我这个报告30-70 MS

的JavaScript线程 一件事我注意到在评论JavaScript是不是多线程的好URM-编曲, 它的排序是setInterval的是异步不同步,但影响的窗口是一个单独的线程例如,如果你有一个类有一些数字是使用setInteval将使用另一个线程,并没有一个问题改变数学,但在任务然后需要在页面上绘制它将进入JS句柄阙的底部,

某些部分的Javascript是在不同的线程上如何改变页面的任何东西必须在任何Windows应用程序的主线程上运行,如果你的线程想要更​​改窗体你不得不调用主线程来为你做

但它是不是多线程像任何别的东西,你不能只是处理或在给定的维姆像windows中止,

其他异步任务包括AJAX必须选择两个异步和同步

更新,以显示我对FPS的评论限制:

请与我裸露,这是链接到的媒体链接内置于显示示例项目: 所以我的游戏是完全面向对象的

var elem = document.getElementById('myCanvas'); 
var context = elem.getContext("2d"); 
context.fillStyle = '#888'; 
context.lineWidth = 4; 
// Draw some rectangles. 
context.fillRect(0, 0, 800, 600); 
context.fillStyle = '#f00'; 

var ball = new Ball(); 
var leftPadel = new Padel(10, 60, 40, 120); 
var rightPadel = new Padel(750, 520, 40, 120); 

pong = new Pong(); 
pong.draw(); 

setTimeout("ball.move()", pong.redrawTime()); 

在我的乒乓类是所有游戏的主要运作去,但这里的FPS位,你需要看到

this.fps = 30; 
this.maxFPS = 60; 

this.redrawTime = function(){ 
    return (1000/this.fps) 
} 

this.lastDraw = (new Date)*1 - 1; 

然后,你可以看到我的时间间隔上球。移动这个调用主乒乓类再次在重绘的结束上重绘我有FPS检查和限制码

this.fps = ((now=new Date) - this.lastDraw); 
if(this.fps > this.maxFPS){ 
    this.fps = this.maxFPS; 
} 
this.lastDraw = (new Date)*1 - 1; 
if(this.reporting = true){ 
    console.clear(); 
    console.log("FPS: "+this.fps.toFixed(1)) 
} 
setTimeout("ball.move()", pong.redrawTime()); 

这就迫使你获得最佳的FPS无需排队主线程

+0

呃,我发布问题几分钟后更新了原生js代码的问题。我有同样的结果。 – mjey

+1

你是如何在画布上画画的? 我曾与帆布abit教我自己的乒乓球,一个最好的事情,你可以做的是有一个FPS监视器,只是一个setTimeout匹配你的FPS,这将防止绘图项目女巫可能是你的根本原因让我挖出我的乒乓球游戏,看看我是我可以告诉你 – HotHeadMartin

+0

我已经更新了我的答案,试图反映FPS的绘制速率限制器,为什么这是依赖于事实你的绑定事件页面,所以如果您有30个绘制请求,那么在绘制按键事件更改之前发生30个绘制事件的键将被删除 – HotHeadMartin

0

尝试:

e.stopPropagation()

停止的事件到父元素的冒泡,防止任何 父处理程序不被通知该事件。

e.preventDefault()

从执行默认的动作阻止浏览器。使用方法 isDefault防止知道此方法是否曾经被调用(在 表示该事件对象)。

My min。结果谷歌浏览器:7ms

+0

http://jsfiddle.net/C4ev3/17/相同。 – mjey