フレームレートを60FPSから変更する方法

PlayCanvasは通常、60FPSで動作します。

これを意図的に、30FPSなどフレームレートを下げて動作させる方法を紹介します。

PlayCanvasでフレームレートを設定する場合は、スクリプトから設定する必要があります。

app.autoRender と app.renderNextFrame を組み合わせることで60FPSから30FPSなどに変更が可能です。

app.autoRender ( https://developer.playcanvas.com/en/api/pc.Application.html#autoRender )
app.renderNextFrame ( https://developer.playcanvas.com/en/api/pc.Application.html#renderNextFrame )

以下のコードで30FPSに変更することが可能です。

let targetFps = 30;
if (this.intervalId) {
    clearInterval(this.intervalId);
    this.intervalId = null;
}
if(targetFps >= 60) {
    app.autoRender = true;
}else {
    app.autoRender = false;

    this.intervalId = setInterval(function() {
        app.renderNextFrame = true;
    }, 1000 / targetFps);
}

60FPSよりも小さいFPSで動かす場合は、
autoRenderをfalseにしてフレーム毎にレンダリング関数を呼ばれないようにし、renderNextFrameで制御しています。
60FPS以上の場合は、今まで通りautoRenderをtrueにしてフレーム毎にレンダリング関数を呼び出すような処理となっています。

PlayCanvas Editorではスクリプトを作成し、RootなどのEntityにADD COMPONENTSでスクリプトを追加します。

例えば、「EditFps」というスクリプト名で追加し、以下のようなコードを追加することで属性からFPSのフレーム数を設定することも可能です。

var EditFps = pc.createScript('editFps');

EditFps.attributes.add("targetFps",{type:"number", default:60});

EditFps.prototype.initialize = function() {

    this.limitFps(this.targetFps);

};

EditFps.prototype.limitFps = function(targetFps) {
    let app = this.app;
    
    if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
    }
    
    if(targetFps >= 60) {
        app.autoRender = true;
    }else {
        app.autoRender = false;

        this.intervalId = setInterval(function() {
            app.renderNextFrame = true;
        }, 1000 / targetFps);
    }
};