- change delta time and timestep calculation

- add throttling ability to application
- reformat most files

Author: joonlabs

README.md

@@ -239,10 +239,10 @@ Components are attached to a GameObject like a sprite or a light. These have amo
 class PlayerMovement extends fox.Component {
     onCalc({timestep, object} = {}) {
         // move player according to arrow keys
-        if (fox.Input.isKeyDown({key: "ArrowLeft"})) object.position.x -= 5
-        if (fox.Input.isKeyDown({key: "ArrowRight"})) object.position.x += 5
-        if (fox.Input.isKeyDown({key: "ArrowUp"})) object.position.y -= 5
-        if (fox.Input.isKeyDown({key: "ArrowDown"})) object.position.y += 5
+        if (fox.Input.isKeyDown({key: "ArrowLeft"})) object.position.x -= 5 * timestep
+        if (fox.Input.isKeyDown({key: "ArrowRight"})) object.position.x += 5 * timestep
+        if (fox.Input.isKeyDown({key: "ArrowUp"})) object.position.y -= 5 * timestep
+        if (fox.Input.isKeyDown({key: "ArrowDown"})) object.position.y += 5 * timestep
     }
 }
 

src/packages/animator/animation.js

@@ -24,10 +24,10 @@ export class Animation {
      * @returns {*}
      */
     getTexture({frame}) {
-        if(!this.loop && frame >= this.animationLength){
+        if (!this.loop && frame >= this.animationLength) {
             // returns the last frame
-            return this.frames[this.frames.length-1].texture
-        }else{
+            return this.frames[this.frames.length - 1].texture
+        } else {
             // calculate current texture
             let frameTime = frame % this.animationLength
 

src/packages/animator/animator.js

@@ -3,7 +3,7 @@ import {Component} from "../components/index.js";
 /**
  * An Animator is a GameObject-Component for Sprites that holds different animations and changes them accordingly.
  */
-export class Animator extends Component{
+export class Animator extends Component {
     /**
      * Creates an Animator object.
      * @param {object} animations Animations mapped by name (e.g. [{"idleAnim":Animation}])
@@ -20,21 +20,22 @@ export class Animator extends Component{
 
     /**
      * Called every frame, up to 60 times per second
+     * @param {number} timestep
      * @param {object} object
      */
-    onCalc({object} = {}) {
-        this.framecounter ++
+    onCalc({timestep, object} = {}) {
+        this.framecounter += timestep
 
-        object.texture = this.animations[this.activeAnimation].getTexture({frame:this.framecounter})
+        object.texture = this.animations[this.activeAnimation].getTexture({frame: parseInt(this.framecounter)})
         object.applyTexture()
     }
 
     /**
      * Changes the active animation by the name provided in the animations parameter of the constructor.
      * @param {string} name Name of the animation
      */
-    setActiveAnimation({name}){
-        if(this.activeAnimation!==name){
+    setActiveAnimation({name}) {
+        if (this.activeAnimation !== name) {
             this.activeAnimation = name
             this.framecounter = 0
         }

src/packages/application/application.js

@@ -11,13 +11,13 @@ export class Application {
      * Construct method of the object
      * @returns Application
      */
-    constructor({width, height, renderer, logFPS} = {}) {
+    constructor({width, height, renderer, logFPS, minFrameTime} = {}) {
         let _this = this
 
         this.scenes = {
             all: [],
             active: undefined,
-            activeName : undefined
+            activeName: undefined
         }
 
         //settings
@@ -34,15 +34,15 @@ export class Application {
         }
 
         this.frames = {
-            "frame": 0,
+            frame: 0,
+            minFrameTime: minFrameTime !== undefined ? Math.floor(1000 / minFrameTime) : undefined,
+            lastTimestamp: undefined
         }
 
-        this.fps = {
-            "starttime": undefined,
-            "rate": 1000 / 60,
-            "deltatime": 0,
-            "timestep": 1,
-            "maxskippingframes": 5
+        this.time = {
+            startTime: undefined,
+            deltaTime: 0,
+            timestep: 1
         }
 
         if (logFPS) {
@@ -81,14 +81,22 @@ export class Application {
      */
     render(timestamp, _this = this) {
         //calc fps rate
-        if (_this.fps.starttime === undefined) {
-            _this.fps.starttime = timestamp
-            _this.fps.lastFrame = Math.round((timestamp - _this.fps.starttime) / _this.fps.rate)
+        if (_this.time.startTime === undefined) {
+            _this.time.startTime = timestamp
+            _this.frames.lastTimestamp = timestamp
         } else {
-            let currentFrame = Math.round((timestamp - _this.fps.starttime) / _this.fps.rate);
-            _this.fps.deltatime = (currentFrame - _this.fps.lastFrame) * (1000 / 60);
-            _this.fps.timestep = Math.min(_this.fps.deltatime / _this.fps.rate, _this.fps.maxskippingframes)
-            _this.fps.lastFrame = currentFrame
+            let deltaTime = timestamp - _this.frames.lastTimestamp
+            _this.frames.lastTimestamp = timestamp
+            _this.time.deltaTime += deltaTime
+
+            if (_this.time.minFrameTime !== undefined && _this.time.deltaTime < _this.frames.minFrameTime) {
+                window.requestAnimationFrame(function (t) {
+                    _this.render(t, _this)
+                })
+                return
+            }
+
+            _this.time.timestep = _this.time.deltaTime / (1000 / 60)
         }
 
         // TODO: check every timestep needed?
@@ -98,13 +106,17 @@ export class Application {
             if (_this.project.logFPS) this.stats.begin()
 
             // calc the next frame
-            _this.scenes.active.calc({timestep: _this.fps.timestep})
+            _this.scenes.active.calc({timestep: _this.time.timestep})
 
             // render the camera-views to the offscreen canvases
             _this.scenes.active.render({app: _this})
 
             if (_this.project.logFPS) this.stats.end()
         }
+
+        // reset delta time
+        _this.time.deltaTime = 0
+
         window.requestAnimationFrame(function (t) {
             _this.render(t, _this)
         })
@@ -140,16 +152,16 @@ export class Application {
     /**
      * Destructs the current scene
      */
-    destroyCurrentScene(){
-        if(this.scenes.activeName){
+    destroyCurrentScene() {
+        if (this.scenes.activeName) {
             this.scenes.all[this.scenes.activeName].destroy()
         }
     }
 
     /**
      * Re-inits the current scene
      */
-    reloadCurrentScene(){
+    reloadCurrentScene() {
         // destroy current scene
         this.destroyCurrentScene()
 
@@ -160,7 +172,7 @@ export class Application {
     /**
      * Re-inits the current scene
      */
-    getCurrentSceneName(){
+    getCurrentSceneName() {
         // init scene
         return this.scenes.activeName
     }

src/packages/application/index.js

@@ -1,2 +1,3 @@
 import {Application} from './application.js'
+
 export {Application}

src/packages/assetmanager/assetmanager.js

@@ -1,5 +1,5 @@
 /**
- * Represents the AssetManager of the game engine. It is responsible 
+ * Represents the AssetManager of the game engine. It is responsible
  * for holding all necessary assets in a global and static scope.
  * @class AssetManager
  */
@@ -47,10 +47,10 @@ export class AssetManager {
      * @returns {object}
      */
     static getTexture({name} = {}) {
-        if(AssetManager.objects.texture[name] !== undefined){
+        if (AssetManager.objects.texture[name] !== undefined) {
             return AssetManager.objects.texture[name]
         }
-        console.warn("src: assetmanager: the texture you are trying to load does not exists: \""+name+"\"")
+        console.warn("src: assetmanager: the texture you are trying to load does not exists: \"" + name + "\"")
     }
 
     /**

src/packages/assets/assets/asset.js

@@ -1,23 +1,23 @@
 /**
- * Represents the blueprint for all asset based objects, like images, audios, animations... 
+ * Represents the blueprint for all asset based objects, like images, audios, animations...
  * @class Asset
  */
-export class Asset{
+export class Asset {
     /**
-    * Constructs the Asset Object 
+     * Constructs the Asset Object
 
-    * @return Asset
-    */
-    constructor(){
+     * @return Asset
+     */
+    constructor() {
         this.loaded = false
     }
-    
-    
+
+
     /**
-    * Returns the raw data of the object
-    * @return {object}
-    */
-    getData(_this=this){
-        
+     * Returns the raw data of the object
+     * @return {object}
+     */
+    getData(_this = this) {
+
     }
 }

src/packages/assets/assets/audio.js

@@ -3,25 +3,25 @@ import {Asset} from './asset.js'
 /**
  * An Audio-Asset holds an audio file for playback.
  */
-export class Audio extends Asset{
+export class Audio extends Asset {
     /**
      * Creates an Audio object.
      * @param src
      * @param volume
      */
-    constructor({src, volume}={}){
+    constructor({src, volume} = {}) {
         super()
-        
-        let _this = this 
+
+        let _this = this
         this.loaded = false
 
         this.src = src
-        
+
         _this.data = new window.Audio(src);
-        _this.data.onloadeddata = function(){
+        _this.data.onloadeddata = function () {
             _this.loaded = true
         }
-        _this.data.volume = volume==undefined ? 1 : volume/100
+        _this.data.volume = volume == undefined ? 1 : volume / 100
     }
 
     /**
@@ -30,14 +30,14 @@ export class Audio extends Asset{
      * @param {number} jumpToSecsAfterLoop
      * @param _this
      */
-    play({loop,jumpToSecsAfterLoop}={}, _this=this){
+    play({loop, jumpToSecsAfterLoop} = {}, _this = this) {
         _this.data.currentTime = 0
         _this.data.play()
-        if(loop){
-            _this.data.addEventListener("timeupdate", function(){
+        if (loop) {
+            _this.data.addEventListener("timeupdate", function () {
                 let buffer = .64
-                if(this.currentTime > this.duration-buffer){
-                    this.currentTime = jumpToSecsAfterLoop==undefined ? 0 : jumpToSecsAfterLoop
+                if (this.currentTime > this.duration - buffer) {
+                    this.currentTime = jumpToSecsAfterLoop == undefined ? 0 : jumpToSecsAfterLoop
                     this.play()
                 }
             })
@@ -47,15 +47,15 @@ export class Audio extends Asset{
     /**
      * Pauses audio playback.
      */
-    pause(){
+    pause() {
         this.data.pause()
     }
 
     /**
      * Sets the volume of the audio
      * @param volume
      */
-    setVolume({volume}={}){
-        this.data.volume = volume/100
+    setVolume({volume} = {}) {
+        this.data.volume = volume / 100
     }
 }

src/packages/assets/assets/texture.js

@@ -36,7 +36,7 @@ export class Texture extends Asset {
         }
 
         this.rendererData = {
-            texture : undefined
+            texture: undefined
         }
 
         if (src !== undefined) {
@@ -60,7 +60,7 @@ export class Texture extends Asset {
         }
     }
 
-    static fromCanvas({canvas, ctx}){
+    static fromCanvas({canvas, ctx}) {
         let instance = new Texture({src: undefined, width: canvas.width, height: canvas.height})
         instance.rendering.canvas = canvas
         instance.rendering.ctx = ctx || canvas.getContext("2d")
@@ -74,7 +74,7 @@ export class Texture extends Asset {
      * Returns the id of the texture
      * @returns {string}
      */
-    getId(){
+    getId() {
         return this.id
     }