optimisation<\/a><\/p>\n\n\n\n <\/p>\n\n\n\n A game loop should be able to:<\/p>\n\n\n\n SOURCE: https:\/\/gameprogrammingpatterns.com\/game-loop.html<\/a><\/p>\n\n\n\n <\/p>\n\n\n\n Performance is based upon how many things a game has to do each iteration of the loop. If you can defer a task, good. If you can store and reuse something, good. Consider if things could go in an alternative loop at a different refresh rate<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n a method called “step” that calls ‘requestAnimationFrame() <\/p>\n\n\n\n OPTIMIZATION <\/p>\n\n\n\n Work with the language and platform you are targeting – e.g. the javascript event loop is built into the browser… and the fact that it is a single threaded language…<\/p>\n\n\n\n <\/p>\n\n\n\n Make the data do its thing, then render<\/p>\n\n\n\n – such as the logic…<\/p>\n\n\n\n Start by clearing the screen<\/p>\n\n\n\n It is usual to clear the screen at the start of the game loop, then redraw the stuff.<\/p>\n\n\n\n A basic javascript game loop<\/p>\n\n\n\n Also, having a timestamp when the loop runs – then can keep the game to run evenly\u2026<\/p>\n\n\n\n delta time<\/p>\n\n\n\n time diff between now and how long ago since the last frame ran\u2026<\/p>\n\n\n\n Separating the rendering and game loop means they can run at different speeds – e.g. game loop can quite easily run at \u00bd or \u00bc the rendering frame rate of 60 fps\u2026<\/p>\n\n\n\n see: github.com\/kittykatattack\/smoothie<\/p>\n\n\n\n https:\/\/gameprogrammingpatterns.com\/game-loop.html<\/a><\/p>\n\n\n\n\n
![\"\"\/](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf65bPwElwsBMe2vHOek3NNUZtDBk9PEpWgGcjPZKCX1mGTbM_TZvzC0yE1IGKQ5jHZYcdIybgXzMNonfOlF9qcjeaws-yCm-p9wxiWDDjj15ZA9uYaXxGxsluD-XZvGOlSuQI5Ir6bjGg6jcklEUAG5ss?key=qInBJpW04kC1Sm63MHgkfg\")
Javascript – best practices for performant gameloops<\/h2>\n\n\n\n
\n
\n
\n
By having the ‘step’ called in a loop in the request animation, there is a chance for other processes to run, so it won’t crash via an infinite loop. Good!<\/p>\n\n\n\nstartGameLoop() {\n const step = () => {\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n requestAnimationFrame(() => {\n step();\n })\n }\n step();\n}\n<\/pre><\/div>\n\n\n
We currently now have a few loops running at the same time, so if we are having hundreds of objects at once, this could be an issue\u2026<\/p>\n\n\n\nwindow.requestAnimationFrame(gameLoop);\n\nfunction gameLoop() {\n draw();\n window.requestAnimationFrame(gameLoop);\n}\n\n<\/code><\/pre>\n\n\n\nrendering fps vs game loop fps<\/h3>\n\n\n\n
References<\/h2>\n\n\n\n
general<\/h3>\n\n\n\n
javascript<\/h3>\n\n\n\n
\n