JS初心者が始めるCreateJS 第14回


CreateJSこんにちは。
半年振りに、CreateJSを触ります。ひろゆきです。

CreateJS が 0.7.0 にバージョンアップされて、
あれこれ変わるというので、そろそろ対応しないと。
ということで、重い腰を上げました。

まずは、読み込む CreateJS の各jsファイルを
[sourcecode language=”js”]<script src="js/easeljs-0.6.0.min.js"></script>
<script src="js/tweenjs-0.4.0.min.js"></script>
<script src="js/movieclip-0.6.0.min.js"></script>
<script src="js/preloadjs-0.3.0.min.js"></script>
<script src="js/soundjs-0.4.0.min.js"></script>[/sourcecode]ではなく
[sourcecode language=”js”]<script src="js/easeljs-0.7.0.min.js"></script>
<script src="js/tweenjs-0.5.0.min.js"></script>
<script src="js/movieclip-0.7.0.min.js"></script>
<script src="js/preloadjs-0.4.0.min.js"></script>
<script src="js/soundjs-0.5.0.min.js"></script>[/sourcecode]に変更します。

次に、TickerのuseRAFプロパティが非推奨になったので、
[sourcecode language=”js”]createjs.Ticker.useRAF = true;[/sourcecode]ではなく
[sourcecode language=”js”]createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;[/sourcecode]を使います。

そして、サウンドの読み込み完了イベントが変更されているみたいなので、
[sourcecode language=”js”]createjs.Sound.addEventListener("loadComplete", loaded);[/sourcecode]ではなく
[sourcecode language=”js”]createjs.Sound.addEventListener("fileload", loaded);[/sourcecode]を使います。

が!ここで問題発覚!
なんと、mouseChildrenが効いていない模様。
[sourcecode language=”js”]piyo.mouseChildren = false;
piyo.addEventListener("mousedown", press);
function press(event) {
var instance = event.target;
mousePoint = instance.globalToLocal(event.stageX, event.stageY);
instance.addEventListener("pressmove", drag);
instance.addEventListener("pressup", release);
}
function release(event) {
var instance = event.target;
instance.removeEventListener("pressmove", drag);
instance.removeEventListener("pressup", release);
}
function drag(event) {
var instance = event.target;
instance.x = event.stageX – mousePoint.x;
instance.y = event.stageY – mousePoint.y;
stage.update();
}[/sourcecode]としても、ひよこちゃんの身体のパーツごとに動いてしまう始末。
[sourcecode language=”js”]piyo.addEventListener("mousedown", press);
function press(event) {
var instance = event.currentTarget;
mousePoint = instance.globalToLocal(event.stageX, event.stageY);
instance.addEventListener("pressmove", drag);
instance.addEventListener("pressup", release);
}
function release(event) {
var instance = event.currentTarget;
instance.removeEventListener("pressmove", drag);
instance.removeEventListener("pressup", release);
}
function drag(event) {
var instance = event.currentTarget;
instance.x = event.stageX – mousePoint.x;
instance.y = event.stageY – mousePoint.y;
stage.update();
}[/sourcecode]と、event.currentTargetで回避。
なんか、ヤな感じー。