本クラスは
InputEventクラスを継承して作られています。
必要に応じてInputEventクラスの情報も参照してください。
InputPointEventクラスは、jgame.jsにおいて、マウスやタッチなどのポインティングデバイスによる入力を処理するためのクラスです。
通常、このクラスは
GameクラスのinputDown、inputUp、inputMoveイベントと共に利用されます。
このクラスを利用してドラッグ処理を実装するための例を以下に示します。
window.onload = function() {
var game = new Game(480, 480);
var shape = new Shape(32, 32);
var startDrag = false;
var pointOffset = {x:0, y:0}
shape.moveTo(240, 240);
shape.enablePointingEvent();
game.currentScene.append(shape);
game.currentScene.enablePointingEvent();
shape.inputDown.handle(function(e) {
startDrag = true;
pointOffset = {x: e.x, y: e.y}
});
shape.inputMove.handle(function(e) {
if (startDrag)
shape.moveTo(e.point.x-pointOffset.x, e.point.y-pointOffset.y);
});
shape.inputUp.handle(function(e) {
if (startDrag) {
shape.moveTo(e.point.x-pointOffset.x, e.point.y-pointOffset.y);
startDrag = false;
}
});
}
http://jgame-js.sourceforge.jp/point.html
注意しないといけないのは、enablePointingEventをLayerとEntity両方に呼び出さないといけないという点です。
Layerのみで処理するという方法もあります。
window.onload = function() {
var game = new Game(480, 480);
var shape = new Shape(32, 32);
var startDrag = false;
var pointOffset = {x:0, y:0}
shape.moveTo(240, 240);
game.currentScene.append(shape);
game.currentScene.enablePointingEvent();
game.currentScene.root.inputDown.handle(function(e) {
if (shape.hitTest({x:e.x, y:e.y})) {
startDrag = true;
pointOffset = {x: e.x-shape.x, y: e.y-shape.y}
}
});
game.currentScene.root.inputMove.handle(function(e) {
if (startDrag)
shape.moveTo(e.point.x-pointOffset.x, e.point.y-pointOffset.y);
});
game.currentScene.root.inputUp.handle(function(e) {
if (startDrag) {
shape.moveTo(e.point.x-pointOffset.x, e.point.y-pointOffset.y);
startDrag = false;
}
});
}
http://jgame-js.sourceforge.jp/point-layer.html
Layerのみの場合、enablePointingEventは一つで済みますが、どのオブジェクトにタッチしたかを自力で実装する必要があり、またイベントの記述が冗長になります。
場面に応じて、Entityで処理するべきか、Layerで処理するべきかを使い分けてください。
なお、上部でとられたイベントは下位に伝達されないため、上のレイヤーと下のレイヤー双方でこのイベント処理を行いたい場合、上のレイヤーが自発的に下のレイヤーのイベントを発行する必要があります。
var pointEvent = new InputPointEvent(e, entity);
元のマウスイベントのイベントパラメータと、対象のentityを指定してインスタンスを生成します。
元のマウスイベントのイベントパラメータについては、onmousedown、onmouseup、onmousemoveなどのDOMイベントで取得出来るイベントデータを指定してください。
x: number;//対象のEntityから見てのx座標です
y: number;//対象のEntityから見てのy座標です
point: CommonOffset;//レイヤーから見てのオフセットです
entity: E;//対象のEntityです。Layerが選択された場合、Layerが格納されます