Every video game, from Pong to Cyberpunk, runs on a continuous cycle called the Game Loop. This loop is the pulse of the software, responsible for processing input, updating the world, and drawing the results to the screen—thousands of times per minute.
The Core Concept
A basic game loop follows three primary steps: 1. Input: Check what the user is doing (keys, mouse, controller). 2. Update: Calculate where things have moved based on physics and logic. 3. Draw: Render the updated state to the display.
function gameLoop() {
processInput();
update();
draw();
requestAnimationFrame(gameLoop);
}
The Problem: Frame Rate Variance
If you update your character's position by a fixed 5 pixels every frame, your game will run faster on a 144Hz monitor than on a 60Hz one. To fix this, we use Delta Time (dt)—the time elapsed since the last frame.
By multiplying movement by dt, we ensure that an object moves at the same speed regardless of how fast or slow the computer is running.
Why It Matters
Observe the demo above. When you increase the Lag, the grey box (Fixed Frame) slows down significantly because it only updates when the computer has a spare moment to process a frame.
The orange box (Delta Time) maintains its velocity. Even if the frames are stuttering, it "jumps" forward to exactly where it should be according to the real-world clock. This ensures that a player with a slow computer doesn't literally move slower than a player with a fast one.
The Takeaway
Always decouple your Logic from your Rendering. Your game should know how much time has passed, and your physics should respect that time.