CreateJSの簡単なメモ #CreateJS

今って、描画ライブラリって何がいいんでしょ。
CreateJSをいじらなければいけない機会があったので最低限のノウハウをメモしておきます。

こちらが大変参考になりました。

CreateJSって、最新版が2015/11/26なんですね。もう下火なんでしょうかね？？？

基本編

では簡単に使い方を見ていきます。

テンプレートとShapeの描画

いちおう、下記を基本のテンプレートとして利用してみます。
jQueryは特に使いませんが、共存に問題が無い確認するためにロードしています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- canvas -->
<canvas id="myCanvas" width="640" height="480"></canvas>
<!-- js -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
$(function(){

    //stage
    var stage = new createjs.Stage("myCanvas");

    //shape
    var shape = new createjs.Shape();
    shape.graphics.beginFill("Red");
    shape.graphics.drawCircle(0,0,100);
    shape.x = 100;
    shape.y = 100;

    //stageに追加
    stage.addChild(shape);

    //stageに追加
    stage.addChild(shape);

    //text

    //image

    //sstage.update
    stage.update();

});
</script>
</body>
</html>

ここではcreatejs.Shape()を利用しましたが、createjs.Graphics()の方がよりプリミティグのようです。

常にStageを更新する

    //sstage.update
    // stage.update();

    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.addEventListener("tick",function(){
        stage.update();
    });

Textの描画

    //text
    var txt = new createjs.Text("Hello World","24px serif","Black");
    stage.addChild(txt);

画像の描画

    //image
    var bmp = new createjs.Bitmap("assets/blue.jpg");
    stage.addChild(bmp);

なお、単にstage.update()するだけではタイミングにより画像が描画されないことがあります（読み込み終了前に、全体が描画されてしまうため等）。そのために"tick"を設定して、常に描画が更新されるようにしています。

イベントの設定

なお、イベント機能を利用するにはhttp://経由でアクセスする必要があるようです。

    //image
    var bmp = new createjs.Bitmap("assets/blue.jpg");
    bmp.addEventListener("click",function(){
        alert("クリックされた！");
    });
    stage.addChild(bmp);

なお、bmp.addEventListener()は、単にbmp.on()と書けるようです。

マウスの座標を取得する

    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.on("tick",function(){

        bmp.x = stage.mouseX;
        bmp.y = stage.mouseY;

        stage.update();
    });

応用編

ドラッグ＆ドロップ

ドラッグ＆ドロップを試してみたいと思います。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- canvas -->
<canvas id="myCanvas" width="640" height="480"></canvas>
<!-- js -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
$(function(){

    var stage = new createjs.Stage("myCanvas");

    //ドラッグ開始座標
    var dragPointX;
    var dragPointY;

    //ボールを描画
    var ball = new createjs.Shape();
    ball.graphics.beginFill("Red").drawCircle(0,0,50);
    ball.x = stage.canvas.width/2;
    ball.y = stage.canvas.height/2;
    stage.addChild(ball);

    //イベント設定
    ball.on("mousedown", handleDown);
    ball.on("pressmove", handleMove);
    ball.on("pressup", handleUp);

    //down
    function handleDown(event){

        //drag start x,y
        dragPointX = stage.mouseX - ball.x;
        dragPointY = stage.mouseY - ball.y;

        ball.alpha = 0.5;
    }

    //move
    function handleMove(event){
        ball.x = stage.mouseX - dragPointX;
        ball.y = stage.mouseY - dragPointY;
    }

    //up
    function handleUp(event){
        ball.alpha = 1.0;
    }

    //update
    createjs.Ticker.on("tick",function(){
        stage.update();
    });

});
</script>
</body>
</html>

イベントが設定されたオブジェクトが重なっている場合、上位が優先される。上位にイベントが設定されていなければ、設定されたものが優先されるらしい。

Z-Indexを変更

    stage.setChildIndex(ball,1);
    console.log(stage.getChildIndex(ball));

実在するIndexじゃないと設定できないようです。無条件に+1000とかしてもダメ。