CreateJSの勉強をはじめました②

前置き

公式に従い黒背景に青い丸を浮かばせました。
次は、アニメーションに入ります。

tweenの作成

stage.update();をコメントアウトして言われた通りのコードを追加します。

test.js

$(window).on("load", function() {
    var stage = new createjs.Stage("canvas_01");

    var background = new createjs.Shape();
    background.graphics.beginFill("0, 0, 0").rect(0, 0, stage.canvas.width, stage.canvas.height);
    stage.addChild(background);

    var circle = new createjs.Shape();
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(100, 100, 50);
    stage.addChild(circle);

    createjs.Tween.get(circle, { loop: true })
    .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
    .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
    .to({ alpha: 0, y: 225 }, 100)
    .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

    //stage.update();
});

この時点では真っ白。

stage.update();の位置に次のコードを追加します。

test.js

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);

この二つのコードは、上がFPSの設定。FPSは1秒間での更新回数です。
下が、stageが更新されるためのイベントリスナーのようです。
これで、円が動くようになりました。

せっかく背景を黒くしているので、円を黄色にしてみました。
これは最初の横移動中の状態です。

改造

そして、追加の改造を行いたかったのでやってみます。
まずcanvasを追加します。

test.html

  <canvas id="canvas_01" width="800" height="600"></canvas>
  <canvas id="canvas_02" width="800" height="600"></canvas>

次に、同じものを描写したいので、一連のコードをfunction化します。
ただ同じものだと楽しくないので、stageのscaleを変更できるように追加の記述を行い、変数を設定。

test.js

    var init = function(canvasID, scale) {
        var stage = new createjs.Stage(canvasID);
        stage.scaleX = scale;
        stage.scaleY = scale;

        var background = new createjs.Shape();
        background.graphics.beginFill("0, 0, 0").rect(0, 0, stage.canvas.width, stage.canvas.height);
        stage.addChild(background);

        var circle = new createjs.Shape();
        circle.graphics.beginFill("yellow").drawCircle(100, 100, 50);
        stage.addChild(circle);

        createjs.Tween.get(circle, { loop: true })
        .to({ x: 600 }, 1000, createjs.Ease.getPowInOut(4))
        .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
        .to({ alpha: 0, y: 225 }, 100)
        .to({ alpha: 1, y: 100 }, 500, createjs.Ease.getPowInOut(2))
        .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", stage);
    }

そして、init関数をそれぞれ呼び出します！

test.js

    init("canvas_01", 1);
    init("canvas_02", 0.5);

ちょっと下がスクショの関係で切れていますが、同じ動きをする違うサイズのstageの完成ですー！

今回はここまでです！
次回はチュートリアルから離れて、カラーパレットを作ろうかなぁとか、無謀なことを考えています。

参考URL