27
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

CreateJSをやり始めた備忘録

はじめに

細かい点などは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();
})*/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
27
Help us understand the problem. What are the problem?