Game Loops CIS 580 - Fundamentals of Game Programming Hangman - - PowerPoint PPT Presentation

▶

Jul 27, 2023 120 likes •334 views

Game Loops CIS 580 - Fundamentals of Game Programming Hangman Game Phases Game Loop Turn-based vs. Real-Time Turn-Based Real-Time Fixed-Timestep vs. Variable Timestep Example - Ballistic Motion x (delta t/timestep) Hybrid Game Loop

SLIDE 1

Game Loops

CIS 580 - Fundamentals of Game Programming

SLIDE 2

Hangman

SLIDE 3

Game Phases

SLIDE 4

Game Loop

SLIDE 5

Turn-based vs. Real-Time

SLIDE 6

Turn-Based

SLIDE 7

Real-Time

SLIDE 8

Fixed-Timestep vs. Variable Timestep

SLIDE 9

Example - Ballistic Motion

SLIDE 10

Hybrid Game Loop

x (delta t/timestep)

SLIDE 11

Variable update/render Game Loop

Every Nth loop Every Nth loop

SLIDE 12

Coding Game Loops

SLIDE 13

setTimeout game loop

function loop() { setTimeout( loop, 16.666); // Asyncronous processInput(); update(); render(); } // 0.016666s = 1/60s setTimeout( loop, 16.666);

SLIDE 14

setInterval game loop

function loop() { processInput(); update(); render(); } // 0.016666s = 1/60s var loopHandle = setInterval( loop, 16.666);

SLIDE 15

recursive game loop

function loop() { processInput(); update(); render(); loop(); }

SLIDE 16

SLIDE 17

Simple request animation frame game loop

function loop(timestamp) { processInput(); update(); render(); requestAnimationFrame(loop); } requestAnimationFrame(loop);

SLIDE 18

“Variable”-rate setTimeout game loop

var start = null; function loop(timestamp) { var progress; if (start === null) start = timestamp; progress = timestamp - start; processInput(); update(progress); render(progress); requestAnimationFrame(loop); } requestAnimationFrame(loop);

SLIDE 19

Fixed Timestep setTimeout game loop

var start = null; var timestep = 16.6666; // 0.016666s = 1/60s function loop(timestamp) { var progress; if (start === null) start = timestamp; progress = timestamp - start; processInput(); while(progress > timestep) { update(progress); progress -= timestep; start += timestep; } render(progress); requestAnimationFrame(loop); } requestAnimationFrame(loop);

SLIDE 20