Feature: Game loop addon

[sc0ttj]

Do a "Game loop" addon - a proper fixed-time loop, with variable render loop.

See these links:

Game loops:

• https://github.com/IceCreamYou/MainLoop.js (or refactored version in TypeScript, with export default)
• https://github.com/robertcorponoi/deltaframe
• https://github.com/robertcorponoi/deltaframe-extra
• https://github.com/mezei/gameloop
• https://gist.github.com/greypants/3739036

Libraries & Game engines:

• https://straker.github.io/kontra/api/gameLoop
• https://github.com/mikolalysenko/game-shell
• https://github.com/myphysicslab/myphysicslab (has various methods - euler, semi-implicit euler, rk4)

Articles on proper game loops:

• http://blog.sklambert.com/using-time-based-animation-implement/
• https://gafferongames.com/post/integration_basics/
• https://gafferongames.com/post/fix_your_timestep/
• http://gameprogrammingpatterns.com/game-loop.html
• https://www.viget.com/articles/time-based-animation/
• https://github.com/jackrugile/start-making-games (great slides on making a pong game)
• https://spicyyoghurt.com/tutorials/html5-javascript-game-development/create-a-proper-game-loop-with-requestanimationframe

NOTES:

Dont use Euler loops, use semi-implicit Euler loops, or RK4..

Euler will crash with springs that don't end, RK4 is most accurate, but might be too "heavy"..

See https://gafferongames.com/post/integration_basics/ for explanation of these 3 types of loops.

[sc0ttj]

Ideally, to make this as generic, and reusable as possible, it should be done as a "ticker" ... something like so:

import { Component, onTick } from '@scottjarvis/component' 

Component.onTick = onTick;

const Game = new Component({ ... });

Game.onTick(props => {
  // the code here executes on a fixed-time loop
  // ..update your game state here  
});

Game.view = props => {
  // define what to draw to canvas here  
};

// render executes at a variable frame rate, namely as close to 60fps as possible
Game.render('.container')

[sc0ttj]

Done, closing.