Html5 optimization canvas

Question

Now I have two game loops in the game that I am doing. A drawing cycle that intersects an array of objects on the screen and a logical cycle that executes the logic of the game. I have a logical loop on which 10 more frames are running than the drawing loop. This is set up for me because it may take longer to complete the logic of the game, and I do not want this to interfere with anyone's.

I create a logical loop as follows:

vs.logicloop = function(){ vs.Gameloop(); //do the updating of object scripts if(vs.windowActive){ var l = vs.scenegraph.length; var i = 0; while(i < l){ vs.scenegraph[i].logicScript(); i++; } } //restart loop setTimeout(vs.logicloop, 1000/(vs.fps+10)); }; 

and a drawing cycle as follows:

 vs.drawloop = function(){ //clear the screen vsd.clr(); //goes through everything in the scene //graph and draws it and runs each object's //personal draw code if(vs.windowActive){ var l = vs.scenegraph.length; var i = 0; while(i < l){ vs.ctx.save(); vs.scenegraph[i].update(); vs.scenegraph[i].draw(); vs.scenegraph[i].drawScript(); vs.ctx.restore(); i++; } } //restart loop setTimeout(vs.drawloop, 1000/vs.fps); }; 

I use setTimeout because I heard that setInterval will cause the loops to overlap if it is not finished yet. Are there any optimizations I can do to really get some speed? Especially optimized game cycles.

I heard that some javascript engines get thousands of objects on the screen right away. I can’t imagine how they do it, in most cases my computer can get up to 100 objects on the screen on a very old computer and about 700 on a fairly spare computer. And this is without a lot of game code running in the background, and before I developed how to make perfect collision detection and physics.

My process is to draw a fillRect background color over the canvas for each drawing cycle, then iterate over all the objects and draw their drawing code. Also, he does not try to bring objects out of sight.

This is my first paid job, and I really want to impress. Plus, I can keep ownership of the engine as soon as I'm done with the game.

Thank you Lot

Answer 1

• If you use floating values ​​for sprites, try converting them to integers. it will cost you a loss of subpixel rendering, but you will get more speed.
• Do not use images with an odd width. always use width with powers of 2.
• In some cases, it is difficult to implement, but if your game is suitable, do not clear the screen and do not redraw all frames. draw the changed parts instead.
• If you need to clear the canvas, do not draw an empty rectangle. try setting the canvas width / height to the same size again. which should reset pixels faster than drawing a rectangle.

the rest of the methods that I can offer are independent of HTML5 canvas, but common subjects, such as using bit shifts, inverse loops and operator, and not modulo, when possible, preliminary calculations, etc.

Answer 2

Oh god, I could write you a complete sonnet here if you put all your code. Here is a summary:

Read Emir’s answer. All this is good, with the exception of the latter, which is very dependent on the situation. Setting canvas.width = canvas.width to clear the canvas may be faster in some browsers, but also clobbers the entire state of the canvas (i.e. the last set to fill and the font), which can slow down, because setting these properties actually hurts slow.

Read my Canvas Performance articles: http://simonsarris.com/blog/tag/performance

I have many other tips accumulated in a private document, of which I write a small e-book. If you want early access to it, I will probably allow this.

Lift Zakas High Performance JavaScript and read it.

Do not use save () and restore (), as in the cited code, unless you should . They just slow down.

For a timer see http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Several foreground-background-middleground canvases can definitely help. Caching things on pages in memory can definitely help. It all depends on what you draw.

Many performance issues are associated with the death of thousands of tiny cuts. For instance:

  vs.scenegraph[i].update(); vs.scenegraph[i].draw(); vs.scenegraph[i].drawScript(); 

For

  var scene = vs.scenegraph[i]; scene.update(); scene.draw(); scene.drawScript(); 

The minute amount will help. How many opportunities for the little things that you have, I do not know - we will need to see a lot more code.

Answer 3

I heard that setInterval will cause the loops to overlap if it is not finished yet.

This is not true, JavaScript is single-threaded. This means that if your first interval is still running when it reaches the next step, the next step will be delayed until the first step completes the calculation. It also means that you cannot rely on setInterval to be accurate if you start a lot of calculations.

Answer 4

I would say that much of what other people said. Integer values, using frame animation queries, etc. If your drawing text is careful, how often do you install fonts. You may also find that using an object pool can help if you create many temporary objects per frame.

As a general reading in game cycles, I would recommend the following: http://www.koonsolo.com/news/dewitters-gameloop/