requestAnimationFrame

Nitamud · 24. Mai 2015

Ich war gerade ein wenig dabei mit JavaScript und dem Canvas-Element zu spielen, als ich folgende Fehlermeldung bekam:

"Maximum call stack size exceeded"

Nach einer kurzen Suchanfrage weiß ich nun, dass dies daher rührt, dass eine rekursive Funktion zu oft aufgerufen wird.
Ich dachte aber genau für viele Animation/Positionsänderungen sei window.requestAnimatonFrame geeignet

Würde mich freuen , wenn jemand einen Tipp kennt um dies zu umgehen

Hier noch der Code dazu:

JavaScript

function Spielfeld() {




  //Welt
  this.test = document.getElementById('test');
  this.ctx = this.test.getContext("2d");




    //Objekte
    this.ball = new Ball("white", 5);




    //Fenstergröße erkennen




    this.getSize = function() {




      var width = window.innerWidth - 50;
      var height = window.innerHeight - 50;




      return [width, height];
    };




  //Spielgeschehen behandeln




  this.uptade = function() {




    this.size = this.getSize();




    this.test.width = this.size[0];
    this.test.height = this.size[1];
    this.ctx.fillStyle = "black";
    this.ctx.fillRect(0, 0, this.size[0], this.size[1]);




    this.ball.uptade();




    requestAnimationFrame(this.uptade());




  };




  requestAnimationFrame(this.uptade());




}




function Ball(color, diameter) {




  //Unveränderlich
  this.color = color;
  this.r = diameter / 2;




  //Veränderbar 
  this.world = document.getElementById('test');
  this.ctx = this.world.getContext("2d");




  //Position:




  this.x = 50;
  this.y = 50;




  //Geschwindigkeit:




  this.vx = 3;
  this.vy = 6;




  //Methoden
  this.draw = function() {




      //Ball zeichnen




      this.ctx.beginPath();
      this.ctx.fillStyle = this.color;
      this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
      this.ctx.fill();




    };




    this.uptade = function() {




      //Änderungen in der Umgebung behandeln        
      this.world = document.getElementById('test');
      this.ctx = this.world.getContext("2d");




      //Neue Spielgröße speichern
      var size = [this.world.height, this.world.width];




      //Kollision mit dem Rand?




      if (this.y >= size[1]) {
        this.y = size[1];
        this.vy = -this.vy;
      } else if (this.y <= 0) {
        this.y = 0;
        this.vy = -this.vy;




      }




      if (this.x >= size[0]) {
        this.x = size[0];
        this.vx = -this.vx;
      } else if (this.x <= 0) {
        this.x = 0;
        this.vx = -this.vx;




      }




      //Position ändern
      this.x += this.vx;
      this.y += this.vy;




      //Ball neu zeichen
      this.draw();




    };




}




function init() {

  var Spiel = new Spielfeld();
  Spiel.uptade();




}

Alles anzeigen

mfg Nita

Basi · 24. Mai 2015

Du hast einen kleinen Schönheitsfehler gemacht. Du rufst die update-Funktion direkt auf anstatt sie als Argument zu übergeben (Callback und so):

JavaScript

// Falsch
requestAnimationFrame(this.uptade());
// Richtig
requestAnimationFrame(this.uptade);

Wenn du Argumente übergeben willst:

JavaScript

requestAnimationFrame(function() {
    // Funktion aufrufen, viel Spaß beim leidigen Spiel mit dem Namensraum
});

Javascript ist leider alles andere als optimal geeignet für Animationen, siehe hier. Ich hatte auch meine Probleme und der Garbage Collector läuft einfach Amok wenn man eigentlich ganz normale Scripts für z.B. Spiel-Engines schreiben will.

Man könnte auch einfach eine Referenz mittels bind() erstellen:

JavaScript

function auto(name)
{
    this.name = name;
    this.position = 0;




    this.fahren = function()
    {
        console.log(this);
    }




    requestAnimationFrame(this.fahren);
    requestAnimationFrame(this.fahren.bind(this));
}




var benz = new auto("Müslibox");

Alles anzeigen

Konsole (Feuerfuchs) meint:

Code

Zeile 11: Window -> file:///path/file.htm file.htm:17:8
Zeile 12: Object { name: "Müslibox", position: 0, fahren: auto/this.fahren() }

PS.: Beim noch mal drüber schauen stelle ich fest es müsste doch update und nicht uptade heißen? Außer natürlich es wird insistiert

Nitamud · 24. Mai 2015

Zitat

Du hast einen kleinen Schönheitsfehler gemacht. Du rufst die update-Funktion direkt auf anstatt sie als Argument zu übergeben (Callback und so):

Danke, sowas fällt einem selbst irgendwie nicht auf

Habs, jetzt erstmals so geändert, wobei ich nach deinem Nachtrag mit bind noch überlege darauf zurückzugreifen(finde ich sauberer)

JavaScript

this.uptade = function(e) {


     e.size = e.getSize();




    e.test.width  = e.size[0];
    e.test.height = e.size[1];
    e.ctx.fillStyle = "black";
    e.ctx.fillRect(0, 0, e.size[0], e.size[1]);




    e.ball.uptade();




    requestAnimationFrame(function() {
      e.uptade(e);
    });





  };




  requestAnimationFrame(this.uptade);




}

Alles anzeigen

Wirkt irgendwie um einiges sauberer

JavaScript

this.uptade = function() {


    this.size = this.getSize();




    this.test.width = this.size[0];
    this.test.height = this.size[1];
    this.ctx.fillStyle = "black";
    this.ctx.fillRect(0, 0, this.size[0], this.size[1]);




    this.ball.uptade();




    requestAnimationFrame(this.uptade);
    requestAnimationFrame(this.uptade.bind(this));





  };




  requestAnimationFrame(this.uptade);

Alles anzeigen

Zitat

Beim noch mal drüber schauen stelle ich fest es müsste doch update und nicht uptade heißen? Außer natürlich es wird insistiert

Ich und meine Englischkünste

Edit: Habe das ganze nun auf bind umgemünzt und es klappt hervorragend
Das einzige Problem, dass ich dort noch habe ist folgendes:

[Blockierte Grafik: http://www.fotos-hochladen.net/uploads/hmimngsv2x30.png]

Das this scheint hier immer abwechselnd das window-Object bzw. das richtige Spielfeld-Object zu referenzieren.
Hier habe ich aber überhaupt keine Ahnung woher dieses seltsame Wechselspiel kommen könnte

So und hier noch des Rätsel Lösung:

Es reich ein einfacher Aufruf via

JavaScript

requestAnimationFrame(this.fahren.bind(this));

Der zweite Aufruf wie in Basis Beispiel oben, würde nähmlich eine zweite Rekursion einleiten, bei der
this das window-Objekt referenziert

Basi · 24. Mai 2015

Ich hatte nur zwei Aufrufe gestartet um den Unterschied zu zeigen. Ein mal mit Referenz und ein mal ohne, was natürlich mit window als this endet was weder Sinn macht noch von irgendwem erwünscht ist

requestAnimationFrame

Jetzt mitmachen!

Teilen