Loop

The Loop it used to decouple the progression of game time from user input and processor speed. Almost every type of game needs one. A game loop runs continuously during gameplay. Each turn of the loop, it processes user input without blocking, updates the game state, and renders the game. It tracks the passage of time to control the rate of gameplay. This part of the program is really important as it will be the running code about 90% of the time the game is active.

In the first approximation after loading the resources, the loop will start running through 4 defined stages for each frame:

• process: The initial stage, its purpose is to take care of actions such as input management.
• update: Runs zero or more times per frame depending on the frame rate. It is used to compute anything affected by time - typically physics and AI movements.
• render: Update the screen, by changing the DOM or painting a canvas.
• postRender: Runs at the end of each frame and is typically used for cleanup tasks such as adjusting the visual quality based on the frame rate.

Each of the stages will contain a bucket of functions to execute, the user will add or remove functions from these buckets to add or delete functionality. The interface requires one add and remove function for every bucket present. The execution of the function buckets will be delegated to de implementation as added functionality may be needed at these steps.

##FPS

Frames per second is a typical unit of control for performance of the loop. It sets how many times the loop will be executed every second, being crucial to the user experience. With the actual technology, 60 FPS are considered the standar for pc and consoles so the library will aim to this speed, however as web games can run in environmets with lower resources, the user has to be able to change the desired FPS value.

##Start

Even though the loop will run for most of the game, there are some times when it is not necessary, at loading time for an instance (always speaking of a simple approximation, a more complex engine will have a specific loop through the loading that will show a loading splash). a Start method is needed.

##Interface

loopInterface = {
  FPS : 60,
  start: function(){...},
  process: function( bucket ){...},
  update: function( bucket ){...},
  render: function( bucket ){...},
  postRender: function( bucket ){...},
  getFPS: function(){...},
  setFPS: function( number ){...},
  addProcess: function( func ){...},
  removeProcess: function( func ){...},
  addUpdate: function( func ){...},
  removeUpdate: function( func ){...},
  addRender: function( func ){...},
  removeRender: function( func ){...},
  addPostRender: function( func ){...},
  removePostRender: function( func ){...}
}