Canvas - pętla gry z książki HTML5 Canvas Receptury opinie Opcje

[Thorus]

Witam,
chciałbym zasięgnąć opinii na temat skryptu tworzącego pętle gry, czy jest on dobrze napisany, czy nie jest przestarzały i czy warto go używać .
Skrypt dynamicznie określa ilość fps'ów przeglądarki i zastanawiam się czy korzystać z tego skryptu czy lepiej napisać własny w którym będzie określona stała liczba fps'ów np 30.

CODE

[JAVASCRIPT] pobierz, plaintext 
var Animation = function(canvasId){
	this.canvas = document.getElementById(canvasId);
	this.canvas.width = this.canvas.scrollWidth;
	this.canvas.height = this.canvas.scrollHeight;
	this.context = this.canvas.getContext("2d");
	this.t = 0;
	this.timeInterval = 0;
	this.startTime = 0;
	this.lastTime = 0;
	this.frame = 0;
	this.animating = false;
 
	window.requestAnimFrame = (function(callback){
		return window.requestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function(callback){
			window.setTimeout(callback, 1000 / 60);
		};
	})();
};
 
Animation.prototype.getContext = function(){
	return this.context;
};
 
Animation.prototype.getCanvas = function(){
	return this.canvas;
};
 
Animation.prototype.clear = function(){
	this.context.clearRect(0,0, this.canvas.width, this.canvas.height);
};
 
Animation.prototype.setDrawStage = function(func) {
	this.drawStage = func;
};
 
Animation.prototype.isAnimating = function(){
	return this.animating;
};
 
Animation.prototype.getFrame = function(){
	return this.frame;
};
 
Animation.prototype.start = function(){
	this.animating = true;
	var date = new Date();
	this.startTime = date.getTime();
	this.lastTime = this.startTime;
 
	if (this.drawStage !== undefined) {
		this.drawStage();
	}
 
	this.animationLoop();
 
};
 
Animation.prototype.stop = function(){
	this.animating = false;
};
 
Animation.prototype.getTimeInterval = function(){
	return this.timeInterval;
};
 
Animation.prototype.getTime = function(){
	return this.t;
};
 
Animation.prototype.getFps = function(){
	return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
};
 
Animation.prototype.animationLoop = function(){
	var that = this;
 
	this.frame++;
	var date = new Date();
	var thisTime = date.getTime();
	this.timeInterval = thisTime - this.lastTime;
	this.t += this.timeInterval;
	this.lastTime = thisTime;
 
	if(this.drawStage !== undefined) {
		this.drawStage();
	}
 
	if(this.animating) {
		requestAnimFrame(function(){
			that.animationLoop();
		});
	}
};
[JAVASCRIPT] pobierz, plaintext 

[Comandeer]

Nie jest przestarzały i używa najlepszej z możliwych technik do przerysowywania canvas: requestAnimationFrame. Fakt, że metoda ta nie wywołuje się co sztywny interwał, jest optymalizacją (przeglądarka sama ustala, kiedy może sobie pozwolić na animację), stąd należy za każdym razem ustalić, ile ramek przeleciało i w jaki sposób przerysować płótno.

[Lord]

Nie jest przestarzały i używa najlepszej z możliwych technik do przerysowywania canvas: requestAnimationFrame. Fakt, że metoda ta nie wywołuje się co sztywny interwał, jest optymalizacją (przeglądarka sama ustala, kiedy może sobie pozwolić na animację), stąd należy za każdym razem ustalić, ile ramek przeleciało i w jaki sposób przerysować płótno.

To znaczy, że mogą następować spadki klatek? kiedyś bawiłem się tym i miałem spadki klatek co powodowało "przyspieszanie" zwalnianie gry. To normalne zachowanie?

[Thorus]

Zastanawiają mnie właśnie ścinki. Podczas gdy mam otwarte z 3,4 karty przeglądarki i np youtube w tle to są widoczne spadki fps'ów i gra się ścina, odpaliłem skrypt na trochę starszym komputerze to gra ścinała tragicznie. Przeglądając internet wpadłem na grę napisaną także w canvas, która jest o wiele bardziej rozbudowana niż jakiś tam ping pong i działa ona bez ścinek.
Dlatego chciałbym się dowiedzieć czego jest to wina, pętli gry czy może jakiś inny czynnik wpływa na to że gra się ścina?

Link do gita z grą
https://github.com/BlowofDeath/Canvas.git

Link do przykładowej gry
http://www.merixstudio.pl/skytte/

[Comandeer]

Tak, mogą następować spadki klatek, dlatego używa się techniki delta timingu (czyli za każdym razem przelicza się faktyczną liczbę sekund, jaka upłynęła pomiędzy poszczególnymi klatkami).

Bardzo wiele czynników może wpływać, np. złe zarządzanie obiektami w grze, co może doprowadzić do włączania się co jakiś czas garbage collectora i chrupania, niewydajny sposób rysowania, brak akceleracji sprzętowej (np. WebGL paradoksalnie może działać szybciej niż 2D) itp. itd. Dawno się nie bawiłem gamedevem w JS, więc nie jestem w stanie dokładnie podać, czemu ścina. Niemniej na ten temat napisano bardzo dużo artykułów, można poszukać.