Pixi.jsでマウスクリックなどのインタラクティブ性をつける

pixijs-interactive.png

JQueryのOn関数

//onはJQueryの関数です
sprite.on('mouseover', onHover);
sprite.on('mouseout', onMouseOut);
 
function onHover() {
   text.visible = true;
}
function onMouseOut() {
   text.visible = false;
}

こういう書き方でもok
graphics.interactive = true;
graphics.on('mousedown',function(){
      console.log("stage mousedon");
    });

mousemoveはこのやり方

mousemoveはなぜかon関数が効かない、のでこのやり方でやります

stage.mousemove=  function(mouseData) {
    console.log("マウス動きました!");
}

画面全体でインタラクティブにする

注意!PIXI.Containerはwidth,height=0のせいかinteractiveにならない。
なので透明な四角いGraphicsオブジェクトを作ってそれを使うしかない。
Containerもinteractive=trueにすることができるが、Containerの上に乗ったすべての大きさのあるGraphicsオブジェクトにまとめて同じ関数を設定できるってだけ

マウスの座標を取得する

stage.mousemove=  function(mouseData) {
 var x = renderer.plugins.interaction.mouse.global.x;
 var y =  renderer.plugins.interaction.mouse.global.y;
console.log("x:"+x+" y:"+y);
}

マウス関数の引数に入っているもの

たとえばmousemoveの場合、こうなりました

Object {stopped: false, target: i, type: "mousemove", data: i}
data: i
stopPropagation: ()
stopped: false
target: i
type: "mousemove"
__proto__: Object

マウスで押した箇所の座標にTextを表示するデモ

<script src="http://miffysora.wikidot.com/local--files/webgl/pixi.min.js" type="text/javascript"></script>
</script>
<script type='text/javascript' >
var renderer = new PIXI.WebGLRenderer(200, 200, {backgroundColor: 0x533E25});
document.body.appendChild(renderer.view);
    var stage = new PIXI.Graphics();//ContainerではなくGraphicsで初期化する
   stage .beginFill(0x000000,0.0);//完全透明の四角形を作る
   stage .drawRect(0, 0, 200, 200);//キャンバスと同じサイズ
   stage .interactive = true;
   stage .on('mousedown',onMouseDown);
   var text =new PIXI.Text("(0,0)",{font:'bold 8pt Arial', fill:'#A5D9DD'});
stage.addChild(text);
 
function onMouseDown(){
   var x = renderer.plugins.interaction.mouse.global.x;
   var y =  renderer.plugins.interaction.mouse.global.y;
   text.position.x = x;
   text.position.y = y;
   text.text = "("+x+","+y+")";
}
//アニメーションスタート
animate();
function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
}
</script>
<body>
</body>

** renderer.plugins.interaction**とはInteractionManagerのこと
InteractionManagerのmouseはInteractionData

サポートサイト Wikidot.com