ITKeyword,专注技术干货聚合推荐

注册 | 登录

javascript - HTML5 Game refresh rate with requestAnimationFrame

itPublisher 分享于

2021腾讯云限时秒杀,爆款1核2G云服务器298元/3年!(领取2860元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1062

2021阿里云最低价产品入口+领取代金券(老用户3折起),
入口地址https://www.aliyun.com/minisite/goods

推荐:javascript html5 game 开发的一些知识

     HTML5 在游戏开发中的运用是相当广的,17Javascript来跟大家普及一些知识,JS开发的HTML5游戏的知识产权保护,其实这里面保护了两个部分,一个是及时注册

I am developing a game using HTML5 Canvas and JavaScript. Initial fps is decent but as the game continues the fps decreases. The initial fps is around 45 fps but it reduces to 5 fps.

Following is my gameloop

var last_draw = Date.now(); //To track when last time GameDraw was called last time
var fps;
function gameloop()
{
    var elapsed = Date.now() - last_draw;
    last_draw = Date.now()
    fps = 1000/elapsed;
    context.clearRect(0,0,canvas.height,canvas.width);// This function clears the canvas.
    GameUpdate();// This function updates property of all game elements.
    GameDraw(); //This function draws all visible game elements in the canvas.
    window.requestAnimationFrame(gameloop); //Requests next frame
}

window.requestAnimationFrame(gameloop); 

It have tested this in following browsers:

  1. Mozilla Firefox 32.0.3
  2. Google Chrome 38.0.2125.101 m

My questions are:

  1. Why rAF is calling it less frequently as the game continues?
  2. Is it due to Memory leak?
  3. Is it because time taken by GameDraw and GameUpdate is very high?
  4. Is time to execute Gamedraw function is different from time taken to actually draw elements in canvas. Gamedraw calls draw function of each game element.
javascript html5 performance canvas requestanimationframe
|
  this question
edited Oct 12 '14 at 14:53 Shomz 32.4k 2 34 62 asked Oct 12 '14 at 13:26 Anubhav Choudhary 1 2 3   Your looping code looks fine. There is no way we can help you find the exact problem without more information. Chrome developer tools have excellent tools to check for memory leaks or to profile (measure execution speed) of different functions. I recommend the free course codeschool.com/courses/discover-devtools to learn how to use these tools. –  Iftah Oct 12 '14 at 14:11      Thank you sir for your reply. You are right I should first learn chrome devtools in order to eliminate my problem. –  Anubhav Choudhary Oct 12 '14 at 14:48

 | 

1 Answers
1

You'll find a lot of online tutorials about optimizing canvas performance. It's not about using this-or-that function, it's about the amount of processing that happens between each two frames.

Since your question(s) can't have one solid answer, I'll briefly address each of the sub-questions:

Why rAF is calling it less frequently as the game continues?

Like you guessed in the next question - something is leaking: it could be anything from, say, adding more textures, event listeners, DOM objects, etc. in every cycle... to simply having too many JS objects piling up because they remain referenced so the Garbage Collector can't get rid of them. But the bottom line is that you need to discover what is changing/incresing between each two frames.

Is it due to Memory leak?

推荐:javascript和html5

javascript简单总结 如果要往html中的某个元素中添加text内容,obj.innerHtml="" 简单的js验证可以省略html文件中的html,head,title,body标记。 更简单的js验

Very probable, and yet so easy to test. In Chrome, Shift+Escape opens the task manager where you can see memory, cpu, etc. usage for each open tab. Monitor that.

Is it because time taken by GameDraw and GameUpdate is very high?

Most definitely! This could also be causing memory leaks. Learn to do CPU and canvas profiling, it will help you a lot. I believe canvas profiling in Chrome is still an experimental feature, so you'd need to enable it first from the config flags. These two functions are where 99% of the lag comes from, investigate what's going on there.

Is time to execute Gamedraw function is different from time taken to actually draw elements in canvas. Gamedraw calls draw function of each game element.

That shouldn't matter because both of them are blocking codes, meaning that one will only happen after another. The time to render a frame is roughly the sum of the two. Again, proper canvas rendering optimization can do wonders here.


|
  this answer
edited Oct 12 '14 at 15:09 answered Oct 12 '14 at 15:04 Shomz 32.4k 2 34 62      Sir, i have recorded timeline of my game using chrome devtools. It seems like time to run script, render and paint is less than 16ms but there is gray bar for "others" as mentioned in chrome devtools is taking more time. Can you explain what this gray bar represents? following is link to snapshot of timeline - Timeline Snapshot –  Anubhav Choudhary Oct 13 '14 at 7:40      It could be a lot of things. Try expanding your devtools to the fullscreen, then use mouse to select a part of the timeline. A list with all the event for that period will show up below. Isolate those that take the most time and see if there's something you can do to optimize them. –  Shomz Oct 13 '14 at 8:03      In chrome browser I used task manager to monitor the memory and CPU and according to observation memory was continuously increasing with time and CPU was 25. Now it is sure that objects are being created and it is not garbage collected. So show me directions to tackle this situation. I would also like to tell that in my game most of the time I have created objects using new operator and stored its reference in an array. To clear that object I just used splice function in array to clear its reference. Is it sufficient to enable that object for garbage collection? –  Anubhav Choudhary Oct 13 '14 at 18:31      If it locks up at 25 percent, it tells me that you have a quad core CPU and one core is constantly fully used (JS doesn't support multi-threading, not going into the whole web workers story here). That might be just okay if you're using software rendering, so basically the GPU is idle the whole time. Memory usage increase tells us that something is constantly piling up. About the last question, I can't tell you a definite yes or no without seeing what it does, but it's quite possible that those objects (or their properties) have other references. Add a button to clear the whole array and test. –  Shomz Oct 13 '14 at 21:40      If the array cleanup frees the memory, then try actually deleting objects after splicing their array. Also, I assumed you're not using global variables, but if you are, fix that first. This is useful: developer.chrome.com/devtools/docs/javascript-memory-profili‌​ng –  Shomz Oct 13 '14 at 21:44

 | 

推荐:大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)

一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,


相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。