CreateJSをやり始めた備忘録 #JavaScript

はじめに

細かい点などはQiitaでもまとめてる良い記事が沢山あるので、大枠などは割愛。
導入と自分がひっかかったことやCreateJSならではの癖などを備忘録代わりに。

読んだもの

公式ドキュメント (英語)

英語ですが、つまずいたら見に行ったりして結局ほとんど目を通しました

http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html
http://www.createjs.com/Docs/TweenJS/modules/TweenJS.html

とりあえずdownloadして触ってみる。パッケージにdemoファイルもあるので
それを見ながら真似るとこから始めるといいかも。

※ドキュメントの日本語訳もそろそろ出てきそう(2013/5/8の記事)
http://cuaoar.jp/2013/05/createjs-3.html

※他にも機能をかいつまんでわかりやすく説明してくれている記事もある様子（あまりちゃんと読んでない
http://blog.sus-happy.net/201303/createjs-game/
http://dev.classmethod.jp/ria/html5/createjs-1/

つまづいたことや留意点など

イベント関連

ハンドラの設定

・disiplayobjectなどのイベントプロパティに直接ハンドラを設定している記事が時期によっては見受けられるが今は非推奨。

Deprecated

var g = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
 var shape = new createjs.Shape(g);
shape.onClick = function(){...};

Current

shape.addEventListener('click', function(){...});

mouseoverについて

・canvas内の子インスタンスにmouseoverを使う際は、親のstageインスタンスでenableMouseOverの呼び出しが必要

enableMouseOver

var stage = new createjs.Stage('canvasID'):
stage.enableMouse0ver();

mousemove/ mouseupについて

・displayObjectにはリスナーにmousemove / mouseupが無い
ドラッグのように利用する場合はmouse downのeventオブジェクトにmousemoveを設定する
・下の例はmousedownだがmouseoverのイベントオブジェクトにはバインドできなさそう?

bindMousemove

object.addEventListener('mousedown', function(e){
  e.addEventListener('mousemove', function(evt){
    console.log(evt.stageX); // get mouse point X
  })
})

親子のイベントハンドリングについて

・Eventモデルを採用していないため、親子関係を作った時に親のオブジェクトにハンドラを設定すると子のハンドラより優先される仕様のよう。bubblingなどの伝播は無い

OverrideChildHandler

var parent = new createjs.Container();
var g = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
var child = new createjs.Shape(g);
parent.addChild(child);

child.addEventListener('click', function(){...});
parent.addEventListener('click', function(){...}); // override child's handler

Canvasの扱い

canvasのupdateについて

・CreateJSではcanvasの更新はTickerから行える。Stageクラスは内部的にTIcker.tickで呼び出されるhandleEventがあるみたいなので、stageのupdateをするだけなら関数でなくてもそのオブジェクトを引数に渡せばOK

Ticker

var stage = new createjs.Stage('canvasID'):
createjs.Ticker.addEventListener('tick', stage);
/*createjs.Ticker.addEventlisnter('tick', function(){
  stage.update();
})*/