More than 3 years have passed since last update.

stage.mouseXの注意点

Last updated at 2020-01-17Posted at 2020-01-15

#概要
createJSでのcanvasを使ったゲームを作成する際に


canvas = document.getElementById("canvas");
// stage作成
stage = new createjs.Stage(canvas);
createjs.Ticker.addEventListener("tick", stage);

上記のようにステージを作成することが一般的
このような状況で画面上のタップした座標を取得したい場合に


touchPosX = stage.mouseX / stage.scaleX;
touchPosY = stage.mouseY / stage.scaleY;

上記コードで取得できる。
PC上では問題ないが、
実機対応のためにタッチ操作を有効にした状態で


// タッチ操作を有効にする
createjs.Touch.enable(stage);

画面に配置したcanvasの上下左右の領域の端をタップすると
stage.mouseX, stage.mouseYの値が最後にタップした座標に固定されてしまう

#対策
タップした座標を取る際にeventから座標を取得するようにする


var button;
button.addEventListener("mousedown", function(event) {
    var tapPointX = event.stageX;
});

#原因
どうやら画面に配置したcanvasの上下左右の領域の端を押したときに、
イベントが二つ飛んでくるらしい(touchStartとmousedown)
イベントの種類ごとに_primaryPointerIDが設定される

	mouseDown	touchStart
_primaryPointerID	-1	0

canvas内のオブジェクトをタップしているだけでは

stageの_primaryPointerIDが0であるが画面に配置したcanvasの上下左右の領域の端を押すと、-1になってしまう

タップした点に関する情報はstage._pointerDataにprimaryPointerIDごとに保存されているのだが、一度_primaryPointerIDを-1にしてしまうと、そのときのx,y座が_pointerData[-1]に保存され、stage.mouseXはその値を参照してしまう

・https://qiita.com/calmbooks/items/6df5e01a7a29417e55c6
(タッチデバイスにて、mousedownが2回発火)