最新版 FPS を表示する JavaScript ライブラリ 『Stats.js』 の使い方

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このエントリーをはてなブックマークに追加
Pocket

半年ほど前に『FPS を表示する JavaScript ライブラリ『Stats.js』 の使い方メモ』 で Stats.js の使い方を解説しました.

最新版を見ると, ちょっと仕様が変更されていたので改めて解説書きました.

また, サンプルをjsdo.itでも見られるようにしています. 実行したり fork して負荷テストして遊んでもらえると嬉しいです.

Demo jsdo.it Download

About

Stats.js とは three.js の開発者でもある Mr.doob が開発された JavaScript パフォーマンスモニターです.

最近は Canvas を使った描画や webgl を使った処理負荷の高い 3D 描画を JavaScript 上で簡単に行えるようになりました. そこで自ずと必要になるのがパフォーマンスチェックです.

そのパフォーマンスチェックを簡単に行えるのが Stats.js です. Stats.js を使えば簡単に fps や milliseconds をチェックすることができます.

Stats.js のダウンロードは github で行うことが出来ます.

GitHub

Usage

前回解説したバージョンとの違いは dom の取得方法です. .domElement から .getDomElement() に変更されています.

Flow

使い方の流れ

  • Stats.js をスクリプトタグで読み込む
  • Stats を生成
  • body エレメントに Stats.getDomElement() を追加
  • 更新関数の中で .update(); を実行

Sample

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8" />
        <title>Stats.js Sample</title>
        <script src="https://raw.github.com/mrdoob/stats.js/master/src/Stats.js"></script>
        <script>
            var COUNT   = 512;    // 描画する四角形の数
            var FPS     = 30;
            var SCREEN_WIDTH = 415;
            var SCREEN_HEIGHT= 415;
            
            window.onload = function() {
                // Canvas
                var canvas = document.getElementById("world");
                canvas.width    = SCREEN_WIDTH;
                canvas.height   = SCREEN_HEIGHT;
                canvas.style.position = "fixed";
                canvas.style.left = "0px";
                canvas.style.top  = "0px";
                document.body.appendChild(canvas);
                
                // Stats
                var stats = new Stats();
                // 右上に設定
                stats.getDomElement().style.position = "fixed";
                stats.getDomElement().style.right    = "5px";
                stats.getDomElement().style.top      = "5px";
                document.body.appendChild(stats.getDomElement());
                
                // コンテキスト
                var context= canvas.getContext("2d");
                setInterval(function(){
                    // クリア
                    context.globalCompositeOperation = "source-over";   // 乗算設定
                    context.fillStyle = "black";
                    context.fillRect(0, 0, canvas.width, canvas.height);
                    
                    // 四角形描画
                    context.globalCompositeOperation = "lighter";   // 乗算設定
                    for (var i=0; i<COUNT; ++i) {
                        var x = Math.random()*(415-32);
                        var y = Math.random()*(415-32);
                        context.fillStyle = "hsl(" + (360/COUNT)*i + ", 50%, 50%)";
                        context.fillRect(x, y, 32, 32);
                    }
                    
                    // stats 更新
                    stats.update();
                }, 1000/FPS);    // 30fps
                
            };
        </script>
    </head>
    
    <body>
        <canvas id="world"></canvas>
    </body>
    
</html>

ゴールデンウィークなのに熱でちゃって色々と予定が狂っちゃってる phi です. みなさん身体には気をつけてね♪

TRACK BACK URL

Biro Jasa へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

COMMENT