モノクロタイム

I'm from the future!

【vvvv】HitTestについて【技術書典4・補足記事】

この記事は技術書典4で頒布したhttps://gyaopan.booth.pm/items/824607の補足解説記事になります.

こんにちは,れいじです.

技術書典4で頒布したvvvvの本について,補足説明の記事を書きました.

HitTestについて

HitTestはデスクトップ上(もしくはRendererウィンドウ上)のマウスポインタの位置をもとにして,Renderer上に表示されているオブジェクトと接触したらイベントを発生させるノードです.

実際に使うとどういうものが作れるかは以下の記事も参考にしてみてください.

reiji1020.hatenablog.com

HitTestにも様々種類がありますが,今回頒布した本ではHitTest(2d circle)を使用しました.

これはマウスポインタの位置の周囲にある一定の大きさの円の外周を接触範囲とし,この外周とCGが重なり合ったときにtrueを返すboolean関数のような働きをします.

f:id:yomoyamareiji:20180501223419p:plain

HitTest(2d circle)のヘルプパッチでは,五角形の頂点が円の外周として示されています.この五角形の頂点が緑の楕円と重なった時,楕円は青色に変化するようなパッチが組まれています.

つまり,

ので,2種類の処理が書けるのです.

頒布した本では,


マウスポインタがCG(オブジェクトに触れたとき):trueを返す →

  • 図形の大きさ=等倍

  • n角形の角数=三角形

  • CGの色=オレンジ


マウスポインタがCG(オブジェクトに触れていないとき):falseを返す →

  • 図形の大きさ=二倍

  • n角形の角数=五角形

  • CGの色=紫


の処理を複数のswitchノードを使用して作り分けています.

HitTestには2d circle以外にも2d Polygon, 2d Quadなど違う性質を持つノードがいくつか存在します.

ご自分の好みに合わせて&便利なノードを使い分けてくださいね.

ではでは~