Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Canvas - pętla gry z książki HTML5 Canvas Receptury opinie
Thorus
post 11.09.2017, 23:04:06
Post #1





Grupa: Zarejestrowani
Postów: 14
Pomógł: 1
Dołączył: 1.06.2016

Ostrzeżenie: (0%)
-----


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
  1. var Animation = function(canvasId){
  2. this.canvas = document.getElementById(canvasId);
  3. this.canvas.width = this.canvas.scrollWidth;
  4. this.canvas.height = this.canvas.scrollHeight;
  5. this.context = this.canvas.getContext("2d");
  6. this.t = 0;
  7. this.timeInterval = 0;
  8. this.startTime = 0;
  9. this.lastTime = 0;
  10. this.frame = 0;
  11. this.animating = false;
  12.  
  13. window.requestAnimFrame = (function(callback){
  14. return window.requestAnimationFrame ||
  15. window.webkitRequestAnimationFrame ||
  16. window.mozRequestAnimationFrame ||
  17. window.oRequestAnimationFrame ||
  18. window.msRequestAnimationFrame ||
  19. function(callback){
  20. window.setTimeout(callback, 1000 / 60);
  21. };
  22. })();
  23. };
  24.  
  25. Animation.prototype.getContext = function(){
  26. return this.context;
  27. };
  28.  
  29. Animation.prototype.getCanvas = function(){
  30. return this.canvas;
  31. };
  32.  
  33. Animation.prototype.clear = function(){
  34. this.context.clearRect(0,0, this.canvas.width, this.canvas.height);
  35. };
  36.  
  37. Animation.prototype.setDrawStage = function(func) {
  38. this.drawStage = func;
  39. };
  40.  
  41. Animation.prototype.isAnimating = function(){
  42. return this.animating;
  43. };
  44.  
  45. Animation.prototype.getFrame = function(){
  46. return this.frame;
  47. };
  48.  
  49. Animation.prototype.start = function(){
  50. this.animating = true;
  51. var date = new Date();
  52. this.startTime = date.getTime();
  53. this.lastTime = this.startTime;
  54.  
  55. if (this.drawStage !== undefined) {
  56. this.drawStage();
  57. }
  58.  
  59. this.animationLoop();
  60.  
  61. };
  62.  
  63. Animation.prototype.stop = function(){
  64. this.animating = false;
  65. };
  66.  
  67. Animation.prototype.getTimeInterval = function(){
  68. return this.timeInterval;
  69. };
  70.  
  71. Animation.prototype.getTime = function(){
  72. return this.t;
  73. };
  74.  
  75. Animation.prototype.getFps = function(){
  76. return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
  77. };
  78.  
  79. Animation.prototype.animationLoop = function(){
  80. var that = this;
  81.  
  82. this.frame++;
  83. var date = new Date();
  84. var thisTime = date.getTime();
  85. this.timeInterval = thisTime - this.lastTime;
  86. this.t += this.timeInterval;
  87. this.lastTime = thisTime;
  88.  
  89. if(this.drawStage !== undefined) {
  90. this.drawStage();
  91. }
  92.  
  93. if(this.animating) {
  94. requestAnimFrame(function(){
  95. that.animationLoop();
  96. });
  97. }
  98. };
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
Comandeer
post 13.09.2017, 09:43:06
Post #2





Grupa: Zarejestrowani
Postów: 1 262
Pomógł: 251
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
Lord
post 13.09.2017, 13:04:25
Post #3





Grupa: Zarejestrowani
Postów: 151
Pomógł: 26
Dołączył: 10.03.2004

Ostrzeżenie: (0%)
-----


Cytat(Comandeer @ 13.09.2017, 10:43:06 ) *
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?
Go to the top of the page
+Quote Post
Thorus
post 13.09.2017, 15:49:14
Post #4





Grupa: Zarejestrowani
Postów: 14
Pomógł: 1
Dołączył: 1.06.2016

Ostrzeżenie: (0%)
-----


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/
Go to the top of the page
+Quote Post
Comandeer
post 14.09.2017, 10:59:42
Post #5





Grupa: Zarejestrowani
Postów: 1 262
Pomógł: 251
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----


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ć.


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 24.02.2018 - 19:19