phina.app.Object2Dもしくはphina.display.DisplaySceneクラスを継承したクラスオブジェクト(≒ほとんどの描画オブジェクト)には、マウスもしくはタッチで干渉(interaction)した際に何らかの処理を仕込むことができる。
interaction系イベントを有効にするには以下の手続きが必要。
- interactiveプロパティを有効にする
- コールバック関数を定義:
on('イベント名', function(){ /*コールバック*/})
、もしくはon~
という関数を定義する
phina.define('Box', {
superClass: phina.display.RectangleShape,
init: function() {
this.superInit();
this.setInteractive(true); // 1. interactiveを有効化
},
// 2-1. on[イベント名]関数を定義する場合
onpointstart: function() {
console.log('point start!');
},
});
phina.define('MainScene', {
superClass: phina.display.DisplayScene,
init: function(options) {
this.superInit(options);
const box = Box()
.setPosition(this.width*0.5, this.height*0.5)
.addChildTo(this)
// 2-2. onメソッドで定義する場合
box.on('pointend', function() {
console.log('point end!');
});
},
});
イベントの種類と発火タイミング
イベント名 | 発火タイミング | 備考 |
---|---|---|
pointover | マウスポインタもしくは指がオブジェクトに乗っかった瞬間 | タッチ操作の場合、発火条件がpointstartに近くなるが、若干異なる(※) |
pointstart | オブジェクト上でマウスボタンを押下、もしくは指でオブジェクトをタッチした瞬間 | |
pointstay | pointstart後、マウスボタンを押下しつづける、もくしは指を端末上においている間 | マウスボタン/指を押さえている間はオブジェクトの範囲外に出ても発火し続ける |
pointmove | pointstayの状態でマウスポインタ、もくしは指を移動 | pointstay同様、オブジェクト範囲外に出ても発火し続ける |
pointend | pointstart後、マウスボタンもしくは指を離した瞬間 | 離す際、ポインタ・指はオブジェクト上に無くても良い |
pointout | マウスポインタもしくは指がオブジェクトから離れた瞬間 | タッチ操作の場合、発火条件がpointendに近くなるが、若干異なる(※) |
※例えばpointover/pointoutの場合、すでに端末上においた指をスライドしてオブジェクトに触れた/離れた際も発火する。
判定範囲
インタラクションの範囲は自由に設定することもできる。
判定範囲タイプは矩形(rect
)と円形(circle
)の二種類があり、
setInteractiveの第二引数、もしくはsetBoundingTypeで指定可能。
box.setInteractive(true, 'rect');
this.setBoundingType('circle');
そして基本的には
- rectの場合:width、heightプロパティ
- circleの場合:radiusプロパティ
が範囲計算に使われる(実際はもうちょっと複雑)
その他
マウスカーソルの場合、interaction範囲内に入ると指(pointer)に変化することで判断できる
interactionイベントの判定自体はここでも書いている通り、各要素の更新処理(update等)の後に行われる。
イベントハンドラでは引数で色々な情報を取得できる
box.on('pointmove', function(event) {
console.log(event.target); // 現在インタラクトしている対象(==box)
console.log(event.pointer.dx); // pointerオブジェクトから現在位置や移動量などを取得できる
event.interactive.cursor.hover = "move"; // ホバー時のマウスカーソル形状を変更。(ただしinteractiveは全オブジェクト共有なので、適宜戻す必要がある)
})