Loop Control of HTML5 game development (2 )-

3) The ideal state of How to debug the frame rate is to control the game to 60 frames, so as to make full use of the capabilities of the display to provide users with a smooth picture. However, it is usually difficult. with the complexity of the game logic, the frame rate usually drops. If there can be a visual ......,. 3) How to debug the Frame Rate

The ideal state is to control the game at 60 frames, so as to make full use of the capabilities of the display to provide users with a smooth picture. However, it is usually difficult. with the complexity of the game logic, the frame rate usually drops. If you can use a visual method to help developers observe the execution time of each RequestAnimationFrame, developers can promptly discover time-consuming operations, ensure that the execution time of each RequestAnimationFrame is controlled within 16 Ms.

Although the same method has not yet been found, Chrome provides the abut: tracing tab to help developers find out exactly the RequestAnimationFrame. However, the difficulty is that if you want to fully understand the about: tracing, you need to be familiar with chrome architecture and rendering methods. In addition to the GPU, it is difficult to fully understand the entire page at once.

Here is a simple usage, such as copying images from my colleague Seth's Blog. (For more information, see Box2D, Web workers, better performance), you can note that there are two red lines in the figure, the interval between the red lines is 16 milliseconds, it is easy to think that this is the best time to execute each frame. On the about: tracing page, double-click each square to enlarge and display the name of each function. Press G to display the red lines on both sides immediately. There is a pan-blue module in it, which indicates WebViewImp: animate. It is responsible for executing RquestAnimationFrame. It seems that the execution time is less than 16 ms, but unfortunately, after the RequestAnimationFrame is executed, the browser also performs assembly and rendering operations on the elements to be rendered. Obviously, the rendering time exceeds the red line, that is, 16 ms, the rendering efficiency is naturally reduced to 60 frames.

function handleVisibilityChange() {if (document.webkitHidden) {if (playAnimation is true)//continue to do this animation}}document.addEventListener(“webkitvisibilitychange”, handleVisibilityChange, false);

1. The above is a simple piece of code. When you find that the page is not displayed, You can execute some animations that must be executed.



5) functions of Webworker


3. Nowadays, many games use Box2d or other gravity engines, and the computing of this gravity engine is quite time-consuming. If you put these computing in RequestAnimationFrame, it is easy to take over 16 ms for each execution. It is best to put this type of high-cost computing in a separate thread. Each time RequestAnimationFrame only needs to get the results.

The above is the loop control of HTML5 game development (2) content. For more information, please follow the PHP Chinese Network (www.php1.cn )!