鼠标下移和移动滴铬画布到30FPS使用CreateJS [英] Mouse down and moving drops chrome canvas to 30FPS using CreateJS
问题描述
我一直在使用createjs Easeljs库来完成几个canvas游戏项目。在所有我印象深刻，但我最近遇到了一个问题，铬，这是抱着我回来。
当鼠标左键按下，鼠标移动FPS是在Chrome上下降到30（由开发人员工具报告）。这对于游戏通常运行的60FPS来说是显而易见的。
为了尝试理解这一点，我已经剥离了一个空白的画布和自动收报机，问题仍然存在。所以我迷路了。该问题可以由我用此代码复制：
< html>
< head>
< script src =./ javascript / easeljs-0.8.1.combined.js>< / script>
< script>
function init（）{
canvas = document.getElementById（gameCanvas）;
createjs.Ticker.setFPS（60）;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNC
stage = new createjs.Stage（canvas）;
createjs.Ticker.on（tick，tick）;
};
function tick（evt）
{
stage.update（）;
}
< / script>
< / head>
< body onLoad =init（）; bgcolor =＃ffffff>
< canvas id =gameCanvaswidth =1136pxheight =640pxstyle =border：thin black solid; margin：0 auto;>< / canvas&
< / body>
< / html>
我知道这个问题： Html Canvas在鼠标向下移动和移动时滞后，但我不能看到它在这种情况下可以如何帮助。 / p>
有没有人有任何想法或资源来帮助这个？
编辑：
通过将代码设置为
createjs.Ticker，我发现了一个解决方法。 timingMode = createjs.Ticker.RAF;
这解决了这些问题和我得到的间隔帧丢失（但没有提到） p>
无论如何，任何人都可以了解为什么会发生这种情况，为什么我会使用同步的Ticker，如果它导致这个？
RAF提供了一个非确定性的帧率（即你不能保证任何特定的帧率），这意味着浏览器可以自由地调节或增加fps任意响应任何数量的事情。似乎Chrome可能会在鼠标停止时触发额外的RAF事件，以便更频繁地重绘，并提供更平滑的鼠标交互。
RAF_SYNC 通过尝试排列指定的帧速率与任意帧速率。它有一些公差，以允许它工作时，帧速率不排队好，但是当指定的帧率显着低于现实世界的RAF帧率（例如目标20或30帧/秒），这工作得更好。 p>
从文件：
差异通常是
RAF频率的除数。这通常为60，因此10，
12，15，20和30的帧率效果很好。
case，因为你的目标fps是相当高（基本上最大的RAF可能去），它没有太多的摆动的空间。当Chrome浏览器超过60fps时，RAF_SYNC开始无法排序框架到达其尝试命中的帧率。在前一帧和当前帧之间没有足够的时间，因此它等待一个额外的帧。结果是，帧速率下降到略高于指定速率的一半。在20或30帧/秒，你可能不会注意到这一点，因为它可以对齐得很好。
例如，说Chrome跳到80fps，在RAF_SYNC模式下重新定位60fps：
- Chrome会触发RAF事件。
- Chrome会触发另一个RAF事件。 $ b $ b
- 股票经纪人看起来并且看到超过16.67毫秒已经过去了，自从最后一刻，并立即火灾打勾，但在这一点25ms已过。
- 重复。你现在以〜40fps而不是60fps的速度运行，即使真正的帧率在〜80fps。
我希望这很有意义。
I've been using the createjs Easeljs library for a few canvas game projects. In all I am impressed, but I have recently encountered a problem within chrome that is holding me back.
When the left mouse button is down and the mouse moves the FPS is dropped to 30 on chrome (as reported by the developer tools). This is painfully obvious against the 60FPS the game normally runs at.
To try to understand this I have stripped down a bare canvas and ticker, and the problem persists. So I am lost. The problem can be reproduced by me with this code:
<html>
<head>
<script src="./javascript/easeljs-0.8.1.combined.js"></script>
<script>
function init() {
canvas = document.getElementById("gameCanvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNC;
stage = new createjs.Stage(canvas);
createjs.Ticker.on("tick", tick);
};
function tick(evt)
{
stage.update();
}
</script>
</head>
<body onLoad="init();" bgcolor="#ffffff">
<canvas id="gameCanvas" width="1136px" height="640px" style="border: thin black solid; margin: 0 auto;"></canvas>
</body>
</html>
I am aware of the question: Html Canvas lag when Mouse is down and moving but I can't see how it can help in this case.
Does anyone have any ideas or resources to help with this?
EDIT:
Apologies, I have found one work-around by setting the ticker to
createjs.Ticker.timingMode = createjs.Ticker.RAF;
This solves these problems and the intermitted frame drops I was getting (but didn't mention)
Regardless, can anyone shed any light on why this is happening, and why on earth I would use a synced Ticker if it results in this?
RAF provides a non-deterministic framerate (ie. you are not guaranteed any particular framerate), which means the browser is free to throttle or increase the fps arbitrarily in response to any number of things. It seems like Chrome may be firing extra RAF events when the mouse is down in order to repaint more frequently and offer smoother mouse interactions.
RAF_SYNC works by trying to line up a specified framerate with the arbitrary framerate. It has some tolerances to allow it work when the framerate isn't lining up well, but this works a lot better when the specified framerate is significantly lower than the real-world RAF framerate (ex. targeting 20 or 30 fps).
From the docs:
Variance is usually lowest for framerates that are a divisor of the RAF frequency. This is usually 60, so framerates of 10, 12, 15, 20, and 30 work well.
In this case, because your target fps is quite high (basically the maximum RAF is likely to go), it doesn't have much wiggle room. When Chrome gets too far above 60fps, RAF_SYNC starts having trouble lining up the frames to the framerate its trying to hit. Not enough time has passed between the previous frame and the current one, so it waits an extra frame. The result is that the framerate drops to a little over half your specified rate. At 20 or 30 fps, you likely wouldn't notice this at all, because it could align fairly well.
For example, say Chrome jumps to 80fps, and you're targeting 60fps in RAF_SYNC mode:
- Chrome fires RAF event.
- Ticker looks at elapsed time since last tick, sees it's only 12ms, decides that's not close enough to its target of 16.67ms, and waits for the next RAF event
- Chrome fires another RAF event.
- Ticker looks and sees more than 16.67ms have passed since last tick, and immediately fires tick, but at this point 25ms have elapsed.
- Repeat. You're now running at ~40fps instead of 60fps, even though real framerate is at ~80fps.
I hope that makes sense.
这篇关于鼠标下移和移动滴铬画布到30FPS使用CreateJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
