【CreateJS】TickerでFPSを指定して更新するサンプル

2019年6月12日CreateJS,JavaScriptライブラリ,JavaScript

「CreateJS」でTickerを利用してコンテンツを更新するサンプルコードです

最低限必要なコード

createjs.Ticker.addEventListener("tick", 実行関数名);

指定した関数を初期値のFPSで実行します

FPSを指定するにはframerateを利用します ※setFPS()は既に非推奨となっています

createjs.Ticker.framerate = 60;
createjs.Ticker.addEventListener("tick", 実行関数名);

See the Pen CreateJS Ticker set FPS by yochans (@yochans) on CodePen.

丸いボタンを作成するサンプルコード

HTML

<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<title>CreateJSサンプルコード</title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id="main" width="500" height="300"></canvas>
</body></html>

main.js

function init() {
        //canvas id mainをstageに設定
        let stage = new createjs.Stage("main");

        //背景にする図形を作成
        let bg = new createjs.Shape();
        //背景にする四角形の色と位置・サイズを指定
        bg.graphics.beginFill("black").drawRect(0, 0, 500, 300);
        //背景にする四角形をstageに追加
        stage.addChild(bg);

        //tick timeの表示テキストオブジェクトを作成
        let tickTimeText = new createjs.Text("", "bold 2em sans-serif", "white");
        stage.addChild(tickTimeText);
        tickTimeText.x = 20;
        tickTimeText.y = 10;
  
        //ticker
        createjs.Ticker.framerate = 60;
        createjs.Ticker.addEventListener("tick", handleTick);

        function handleTick(){
        //ticksを取得してtextを更新
        tickTimeText.text = createjs.Ticker._ticks;
        stage.update();
        }
}
init();

2019年6月12日CreateJS,JavaScriptライブラリ,JavaScript

Posted by Yousuke.U