イナヅマTVログ

[JavaScript] fps(フレームレート)を設定したい

| 0件のコメント

JavaScriptのloop処理はrequestAnimationFrameを使用すると実現できます。
requestAnimationFrame, cancelAnimationFrame はこう使ってる

requestAnimationFrameはモニタのリフレッシュレートに依存しているようで概ね60fpsになります。
そこまでのフレームレートが必要ない場合や、待機状態の時にもう少し低いレートでloopを実行したいことがありました。

可変にできる仕組みを作れないかと思い、一定間隔でサーバーのプログラムを呼び出すために以前作っていたコードを改造してみました。

var PollingManager = (function (){
 
    function PollingManager ( ms ) {
        this._startTime = 0;
        this._polling = ms;
    }
 
    PollingManager.prototype.update = function (){
        var now = new Date().getTime(),
            bool = false;
 
        if ( ( now - this._startTime ) >= this._polling ) {
 
            this._startTime = now;
            bool = true;
        }
 
        return bool;
    };
 
    return PollingManager;
}());

PollingManagerは経過時間をはかり、設定ミリセカンドを超えた時にtrueを返します。

var Main = ( function (){
    var _id, _fps;
 
    function _loop () {
        _id = requestAnimationFrame( _loop );
 
        if ( _fps.update() ) {
            // 以下にfpsに依存しループ実行したいコード
 
        };
    }
 
    function Main () {
        this._fps = 24;
    }
 
    var p = Main.prototype;
 
    p.setFPS = function ( fps ){
        _fps = new PollingManager( 1000 / fps );
    };
 
    p.start = function (){
        if ( typeof _fps === "undefined" ) {
 
             _fps = new PollingManager( 1000 / this._fps );
        }
 
        _loop();
    };
 
    p.stop = function (){
        cancelAnimationFrame( _id );
    };
 
    return Main;
}());
 
var main = new Main();

今回のfpsデフォルト値は24にしています。
fpsを設定したい時はsetFPSに引数を渡し実行します。

// fpsを8へ
main.setFPS( 8 );

他にもっと良い方法はないかな。

コメントを残す