My current project involves creating a "simple" 3D game using Three.js and incorporating a network framework for multiplayer functionality in the future. After some research, I found that many "action" games utilize a "tick" based game loop to sync clients and servers, allowing for smooth interpolation between ticks.
I have developed a working code for the tick function that handles input, updates, and draws. I want to confirm if my implementation is correct and understand how this "deterministic" loop should function. When I increase the "tick rate," the game speeds up as the update function runs more frequently - is this the expected behavior?
this.loops = 0;
this.tick_rate = 20;
this.skip_ticks = 1000 / this.tick_rate;
this.max_frame_skip = 10;
this.next_game_tick = performance.now();
The above code snippet is part of the Game class constructor.
Game.prototype.run = function () {
this.handle_input();
this.loops = 0;
while (performance.now() > this.next_game_tick && this.loops < this.max_frame_skip){
this.up_stats.update();
this.update();
this.next_game_tick += this.skip_ticks;
this.loops++;
}
this.draw();
//monitor performance
this.stats.update();
//next update
requestAnimationFrame(this.run.bind(this));
};
For the complete code, visit: https://github.com/derezzedex/first_three_js/blob/master/js/game/main.js