- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
如何动态地为具有不同硬件容量的不同设备获得更好的动画,即使在浏览器繁忙或空闲时也是如此。
我尝试了很多方法,仍然找不到合适的方法让游戏显示更好的动画。
这是我尝试过的:
var now;
var then = Date.now();
var delta;
window.gamedraw = function(){
now = Date.now();
delta = now - then;
if(delta > 18){
then = now - (delta % 18);
game_update();
}
}
window.gameloop = setInterval(window.gamedraw,1);
18是更新游戏的间隔值,但是当浏览器繁忙时这个间隔不好,需要降低。如何动态地获得更好的动画,即使在浏览器空闲或忙碌时也是如此?
我认为间隔值是问题所在,因为如果间隔较低则游戏动画非常快,如果该值是 18 则游戏动画很好但当浏览器繁忙时则不是,我不知道如何动态地改变它。
最佳答案
要获得流畅的动画,您必须:
• 在屏幕上同步。
• 计算游戏中耗时。
• 只使用这段游戏时间制作动画。
通过使用 requestAnimationFrame (rAF) 与屏幕同步。
当你写的时候:
requestAnimationFrame( myCalbBack ) ;
您正在注册 myCalbBack
被调用一次,下次屏幕可供绘制时。
(如果你知道双缓冲( Canvas 总是双缓冲的),这次是 GPU 下一次将绘图缓冲区与显示缓冲区交换。)
另一方面,如果您不使用 rAF 而是使用间隔/超时来安排抽奖,将会发生的情况是抽奖不会真正显示直到下一次显示刷新 .从现在到 16.6 毫秒后的任何时间都可能发生(在 60Hz 显示器上)。
下面是 20 毫秒的间隔和 16 毫秒的屏幕,您可以看到实际显示的图像将在 16 毫秒或 2 * 16 毫秒之外交替出现 - 当然不会是 20 毫秒。您只是无法从间隔回调中知道实际抽奖何时显示。由于 rAF 和间隔都不是 100% 准确,您甚至可以有 3 帧增量。
现在您已经与屏幕同步了,这里有一个坏消息:requestAnimationFrame 并没有完全规律地跳动。由于各种原因,两帧之间耗时可能会变化 1 毫秒或 2 毫秒,甚至更多。因此,如果您每帧使用固定移动,您将在不同的时间移动相同的距离:速度总是在变化。
(说明:每个 rAF +10 像素,
16.6 显示 -->> rAF 时间为 14、15、16 或 17 毫秒
--> 表观速度从 0.58 到 0.71 px/ms 不等。 )
答案是测量时间...并使用它!
希望 requestAnimationFrame 为您提供当前时间,这样您甚至不必使用 Date.now()。第二个好处是,在具有准确计时器(Chrome 桌面)的浏览器上,这个时间将非常准确。
下面的代码显示了如何知道自上一帧以来耗时,并计算应用程序时间:
function animate(time) {
// register to be called again on next frame.
requestAnimationFrame(animate);
// compute time elapsed since last frame.
var dt = time-lastTime;
if (dt<10) return;
if (dt >100) dt=16; // consider only 1 frame elapsed if unfocused.
lastTime=time;
applicationTime+=dt;
//
update(dt);
draw();
}
var lastTime = 0;
var applicationTime = 0;
requestAnimationFrame(animate);
现在最后一步是始终在所有公式中使用时间。所以不要做
x += xSpeed ;
你必须做:
x += dt * xSpeed ;
现在不仅会考虑帧之间的微小变化,而且无论设备屏幕如何(20Hz、50Hz、60Hz 等),您的游戏都将以相同的表观速度运行。
我做了一个小演示,您可以在其中选择同步,如果使用固定时间,您将能够判断差异:
http://jsbin.com/wesaremune/1/
关于javascript - 为 Canvas 游戏获得流畅的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28256197/
我想在单击按钮时进行移动:向左。这是针对移动运动的... 问题在于它的移动,但只有一次。我需要点击按钮发送垃圾邮件... 代码: 在创建中: this.buttonleft.inputEnabled
前言 今天大姚给大家分享一个.NET开源(MIT License)、免费、现代化、流畅、可测试、可移植的URL构建器和HTTP客户端库:Flurl。 项目介绍 Flurl是一个集现代性、流畅性、
我不确定其他与我的问题明显相似的问题是否归结为同一主题。 请考虑这段代码(为更清楚起见,为 head 部分提取了 CSS 代码): body { margin: 0;
我是一名学习 html/css 的学生,我在创建第一个网站时遇到了问题。我在配置页面时遇到了很多困难,因此它是流动的而不是固定的。我配置了一个框、图像和一些文本,因此它们在页面上是绝对的,但我无法使页
在我的游戏中,我已将角色设置为移动。它的设置方式是: if game_over_state == False: if event.type == pygame.KEYDOWN:
我一直在研究代码,但似乎无法让它工作。我用谷歌搜索,在这个网站上搜索了 13 页,但仍然找不到我要找的答案。 我希望视频以特定尺寸开始,然后随着我调整浏览器大小(从桌面到 iPad/iPhone)而缩
我已经从 sql server 2005 切换到 mysql,这并不是一个真正的问题。 我对 sql server 中存在的 (n)varchar 有一个小问题。通常我用过: mapping.Map(
我必须使用自定义 odbc 驱动程序。 我需要作为连接字符串传递的只是 DSN。 我如何使用(流畅)nhibernate 做到这一点? FluentNHibernate.Cfg.Db 仅提供带有 DS
我无法找到我们网站上动态显示的弹出窗口。最初该元素处于以下 html 状态: 使用jquery的show和hide,div显示5秒,稍后隐藏。 在我的 Selenium 脚本中,我尝试使用以下语句等
我有一个 two/three基于屏幕尺寸的列布局。 如果窗口大小大于 1000比我需要遵循 3 column其他布局我需要遵循 two column布局。 我是用JS实现的,但是代码很乱。现在我想用
我有一个 Flutter 应用程序,随着时间的推移和添加的功能越来越多,它变得越来越笨拙。因此,是否有一些实用程序可以使其像 60FPS 一样流畅? 我知道这里有一些官方指南:https://docs
我在如何实现 $(window).smartresize() 上纠结了几个小时使我的 div 流畅的功能。 我使用了这个 theme 中的 javascript但是当我尝试自己实现它时,我的 div
当我尝试通过 canvas.getContext('2d') 和 canvas.getContext('webgl') 将相同的 PNG 文件加载到 Canvas 中时,发现与canvas2d相比,w
我有一个所有实体的基类: public class BaseClass { public int SomeProperty {get; set;} } public class SomeEnt
我正在从事一个对时间相当敏感的元素。任务是制作一个微型网站,用户可以通过他们的智能手机访问该网站,在那里他们可以访问许多电影。他们会扫描二维码(我知道他们已经死了,我没有计划这次事件)。并登陆这个网站
我们正在使用Entity Framework 5.0。和数据库MySQL。当我们尝试迁移时间时出现异常。 could not be created because the principal key
快速问题:如何将传递给shiny.fluent::Text函数的文本设置为粗体?更广泛地说,如何将样式选项传递给此函数?。在函数的帮助页面中,它是这样写的。但我不明白如何使用这个变量参数。。我试着在不
我是一名优秀的程序员,十分优秀!