PixiJS – Einstellung eine Feste Frame-Rate

Wie der Titel sagt, wie legen Sie eine Feste Framerate von 25 fps für PixiJS?

Hier ist mein setup:

g_App = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
document.getElementById("canvas-div").appendChild(g_App.view);

Ich will das nicht mehr frames als das.

InformationsquelleAutor Rewind | 2017-04-14



2 Replies
  1. 1

    Nachdem @wavemode die Kommentare über die PixiJS Verwendung von requestAnimationFrame ich glaube, ich kann Folgendes tun. (Hinweis: wenn es eine bessere Lösung ist, bitte posten, ansonsten werde ich markieren Sie diese als Antwort.)

    Im Grunde stop-alle Animationen, wenn wir die überschreitung der frame-rate.

    var g_TICK = 40; //1000/40 = 25 frames per second
    var g_Time = 0;

    Dann später, wenn wir einrichten der animation:

    //Listen for animate update
    g_App.ticker.add(function (delta) {
        //Limit to the frame rate
        var timeNow = (new Date()).getTime();
        var timeDiff = timeNow - g_Time;
        if (timeDiff < g_TICK)
            return;
    
        //We are now meeting the frame rate, so reset the last time the animation is done
        g_Time = timeNow;
    
        //Now do the animation
    
        //rotate the container!
        //use delta to create frame-independent tranform
        container.rotation -= 0.01 * delta;
        g_Bunny0.x += 1;
    });
    • Nicht nur die frame-rate der animation? Was zum Rendern der canvas? Ist es nicht noch 60FPS?
  2. 0

    25 FPS ist 40 Millisekunden pro frame. Also, jedem Bild, das Sie aufrufen werden sollte

    setTimeout( myRenderFunction, 40 )

    wenn Sie möchten, den Bildschirm zu aktualisieren 25 mal pro Sekunde.

    • Dies bedeutet nicht die normalen g_App.ticker.add(function (delta) {/* My animation here */}); Lauf der Dinge. Also, was sollte ich in myRenderFunction tatsächlich malen Sie die Leinwand in die PixiJS Umgebung?
    • sollte enthalten alles, was Sie in Ihrem Spiel-Schleife. Die Pixi.JS Ticker verwendet requestAnimationFrame die laufen stets mit der refresh-rate des Monitors (wahrscheinlich 60 fps). Wenn Sie wollen 25, dann müssen Sie manuell zeichnen, bei 25 fps mit setTimeout oder setInterval.
    • Was nenne ich in myRenderFunction, um tatsächlich ziehen die PixiJS Szene? Wie verhindere ich, dass PixiJS automatisch zu tun, Ihre eigene Sache und zeichnen der Szene außerhalb von setTimeout?
    • Aus der API sehe ich, dass die PixiJS Renderer verwendet immer noch requestAnimationFrame. Also eigentlich denke ich nicht, dass Sie in der Lage wäre zu ziehen, bei 25 fps, nachdem alle.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.