requestAnimationFrame
Hallo,
Op dit moment ben ik bezig met een klein spelletje en tot nu toe heb ik altijd setInterval gebruikt voor de gameloop (zowel voor het updaten als renderen).
Nu zou ik graag eens gebruik maken van requestAnimationFrame, echter kan ik nergens een goede uitleg vinden over het gebruik hiervan. Alle tutorials / stukjes uitleg spreken elkaar namelijk tegen.
Is het de bedoeling dat het updaten (nog steeds) gebeurd via setInterval of setTimeout, waarbij het renderen dan gebeurd via requestAnimationFrame. Of komt het updaten óók in requestAnimationFrame?
Kan iemand me dit uitleggen?
Alvast bedankt!
Op dit moment ben ik bezig met een klein spelletje en tot nu toe heb ik altijd setInterval gebruikt voor de gameloop (zowel voor het updaten als renderen).
Nu zou ik graag eens gebruik maken van requestAnimationFrame, echter kan ik nergens een goede uitleg vinden over het gebruik hiervan. Alle tutorials / stukjes uitleg spreken elkaar namelijk tegen.
Is het de bedoeling dat het updaten (nog steeds) gebeurd via setInterval of setTimeout, waarbij het renderen dan gebeurd via requestAnimationFrame. Of komt het updaten óók in requestAnimationFrame?
Kan iemand me dit uitleggen?
Alvast bedankt!
Iemand?
Op dit moment neig ik de volgende aanpak te hanteren:
Echter heb ik hier zo mijn twijfels over, ik zie namelijk het volgende:
De naam en omschrijving spreken elkaar nogal tegen. Houdt deze variabel het aantal steps per seconde of de lengte van 1 step in milliseconden?
Als tweede, deltaTime wordt berekend door de tijd van de vorige tick in microseconden, af te trekken van de huidige tijd in microseconden. deltaTime is dus het verschil in microseconden, maar even later wordt deze vergeleken met this.stepSize, waarvan de waarde ofwel wordt uitgedrukt in milliseconden of steps. Dit kun je toch niet met elkaar vergelijken?
Klopt het wat ik zeg, of zie ik dit verkeerd?
Op dit moment neig ik de volgende aanpak te hanteren:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
class Game {
constructor() {
// Holds a timestamp indicating when the last tick occurred.
// Initially set to null, indicating that no tick has taken place.
this.time = null;
// Holds the accumulative time remaining for physics steps.
this.accumulator = 0.0;
// Holds the size of a single timestep in milliseconds, in this
// case we will perform around 60 steps per second.
this.stepSize = 60 / 1;
// Request an animation frame to invoke this.tick
requestAnimationFrame(this.tick.bind(this));
}
step(deltaTime) {
// ...
}
draw(deltaTime) {
// ...
}
tick(time) {
// requestAnimationFrame's callback gives a very high resolution
// timestamp (DOMHighResTimeStamp) as an argument. The timestamp
// is accurate to a microsecond so we no longer need, nor want to
// call Date.now as it is only accurate to the millisecond.
// On the first tick delta time should be 0.
var deltaTime = time - (this.time || time);
this.time = time;
// Add delta time to our accumulator, iterate over the steps we
// can do, and carry the leftovers over to the next frame.
this.accumulator += this.deltaTime;
while(this.accumulator >= this.stepSize) {
this.step(this.stepSize);
this.accumulator -= this.stepSize;
}
this.draw(deltaTime);
// Request an animation frame to invoke this.tick again
requestAnimationFrame(this.tick.bind(this));
}
}
constructor() {
// Holds a timestamp indicating when the last tick occurred.
// Initially set to null, indicating that no tick has taken place.
this.time = null;
// Holds the accumulative time remaining for physics steps.
this.accumulator = 0.0;
// Holds the size of a single timestep in milliseconds, in this
// case we will perform around 60 steps per second.
this.stepSize = 60 / 1;
// Request an animation frame to invoke this.tick
requestAnimationFrame(this.tick.bind(this));
}
step(deltaTime) {
// ...
}
draw(deltaTime) {
// ...
}
tick(time) {
// requestAnimationFrame's callback gives a very high resolution
// timestamp (DOMHighResTimeStamp) as an argument. The timestamp
// is accurate to a microsecond so we no longer need, nor want to
// call Date.now as it is only accurate to the millisecond.
// On the first tick delta time should be 0.
var deltaTime = time - (this.time || time);
this.time = time;
// Add delta time to our accumulator, iterate over the steps we
// can do, and carry the leftovers over to the next frame.
this.accumulator += this.deltaTime;
while(this.accumulator >= this.stepSize) {
this.step(this.stepSize);
this.accumulator -= this.stepSize;
}
this.draw(deltaTime);
// Request an animation frame to invoke this.tick again
requestAnimationFrame(this.tick.bind(this));
}
}
Echter heb ik hier zo mijn twijfels over, ik zie namelijk het volgende:
Code (php)
1
2
3
2
3
// Holds the size of a single timestep in milliseconds, in this
// case we will perform around 60 steps per second.
this.stepSize = 60 / 1;
// case we will perform around 60 steps per second.
this.stepSize = 60 / 1;
De naam en omschrijving spreken elkaar nogal tegen. Houdt deze variabel het aantal steps per seconde of de lengte van 1 step in milliseconden?
Als tweede, deltaTime wordt berekend door de tijd van de vorige tick in microseconden, af te trekken van de huidige tijd in microseconden. deltaTime is dus het verschil in microseconden, maar even later wordt deze vergeleken met this.stepSize, waarvan de waarde ofwel wordt uitgedrukt in milliseconden of steps. Dit kun je toch niet met elkaar vergelijken?
Klopt het wat ik zeg, of zie ik dit verkeerd?
Gewijzigd op 09/09/2015 20:01:18 door Lord Gaga
Wellicht een idee om naar three.js te kijken, die schijnt aardig goed te zijn.
in je voorbeeld wat je doet:
je hebt time die DOMHighResTimeStamp is
je hebt een float stepsize, die 60/1 is waarin deze wellicht beter naar fps kan worden hernoemd.
en de accumulator krijgt als het goed is, de rest waarde van time (het niet gedeeld door this.stepsize gedeelte).
in je voorbeeld wat je doet:
je hebt time die DOMHighResTimeStamp is
je hebt een float stepsize, die 60/1 is waarin deze wellicht beter naar fps kan worden hernoemd.
en de accumulator krijgt als het goed is, de rest waarde van time (het niet gedeeld door this.stepsize gedeelte).
Waarom maak je niet gebruik van een bestaande game engine?
Er zijn er genoeg te vinden, en als je echt iets zelf wilt maken, kan je eens kijken hoe hun het aanpakken?
Er zijn er genoeg te vinden, en als je echt iets zelf wilt maken, kan je eens kijken hoe hun het aanpakken?




