pixi.jsで多角形のクリックを判定する

pixi.jsでContainerを作り、clickやmousedownを試して、おお良いじゃん…でもこの当たり判定ってコンテナーの大きさに縛られちゃうの？
って思ってる人向けメモ（自分）

結論。
hitAreaというプロパティに図形を入れれば、その形に沿ってクリック判定を行ってくれる。
図形はRectangleで四角、Circleで円、そしてPolygonなら多角形さえも可能になる。

こんな感じ。

/*
	定番の
	var stage = new PIXI.Container();
	renderer.render(stage)
	とかがあるものとする
*/

// 当たり判定
var poly = new PIXI.Polygon(
    new PIXI.Point(0,250) ,
    new PIXI.Point(170,280),
    new PIXI.Point(400,580),
    new PIXI.Point(600,700));
var graphics = new PIXI.Graphics();
graphics.interactive = true;
graphics.buttonMode = true;
graphics.hitArea = poly;
// 描写
graphics.lineStyle(5,0xF00000);
graphics.drawShape(poly); // graphics.drawPolygon(poly)でも可
stage.addChild(graphics);
//
graphics.mousedown = function(data){
      alert('sasdfsdf');
};

多角形の当たり判定をセット、また多角形状にラインを描写している。
これで「多角形の内部をクリックした時にイベントが起きる」が出来るようになったのだ

↑線の外側ならちゃんと反応しない

例えば四角形の判定をしたいなら

poly = new PIXI.Rectangle(0,0,400, 1000);

とかに差し替えればいいし、
あと
getBoundsメソッドを備えているオブジェクトなら、どれでも普通に図形を返せる様子（ただし変形処理をしてる時は難しくなりそう）

参考サイト（英語）：
http://www.html5gamedevs.com/topic/780-displayobjectcontainer-and-interactivity/
https://github.com/pixijs/pixi.js/issues/1725