オブジェクトのタッチ誤判定

[ikedanaruki]

Scaleを細かくいじって配置するオブジェクトの座標に小数点が入るのがまず原因だと思うのですが、オブジェクトのちょうど端の部分をタッチさせると別のオブジェクトをタッチしたと誤判定されるケースが出てきております。

内部のソースを追ったところ、オブジェクトのタッチ判定のために中でオブジェクト毎に特定の色を定めてそのオブジェクトの位置と大きさに即した矩形を描画して重ねていったビットマップを保持し、タッチした場合はそのビットマップ上の色をタッチした座標から取得し、それによってタッチしたオブジェクトを特定しているという流れであることは把握しました。

内部で持っている画像をtoDataURLメソッドで見るようにしたところ、問題が発生するケースでは描画しているビットマップにアンチエイリアスがかかり、端の部分だけ色が違っていることがわかりました。

こういった事象をご存じでしょうか。そして回避する方法についても検討したく思っております。

[ikedanaruki]

内部で持っているビットマップを取得したのを添付します

https://twitter.com/ikedanaruki/status/590494364872278016

黄色っぽくて縦に長いので、境界が青くなっているのがあると思います

[rtsan]

タッチ判定を行っているCanvasのコンテキストについて、 CanvasRenderingContext2D#imageSmoothingEnabled を設定することで、境界に生じる誤差を軽減できる可能性があります。

[rtsan]

imageSmoothingEnabledで十分な効果を得られなかったため、周辺のピクセルからもサンプリングを行うように変更しました。
この範囲は新たに追加したenchant.ENV.COLOR_DETECTION_LEVELから変更することができます。

[ikedanaruki]

ありがとうございます。開発しているアプリで試したいと思います！