Project1

标题: 如何判断旋转了的Sprite被点击 [打印本页]

作者: 幻の飞鱼 时间: 2018-4-14 13:05
标题: 如何判断旋转了的Sprite被点击
Sprite正常情况下可以通过X Y ,W H来确定一个RECT，根据鼠标坐标判断是否点击到了

可Sprite加上rotation属性以后就乱了，有什么简单的方法判断是否点击吗

或者类似网页DOM里ONCLICK这种监听的方式？

作者: 在野月光族 时间: 2018-4-14 15:21
如果要精确点击的话，感觉做出来都不会简单吧。
记得以前写六角战棋的时候，
判断鼠标是否精确到六角框内还是压线，
用到中心点判断那会儿就很折腾。
不过，MV的Bitmap貌似有取色的指令getPixel(x, y)。
所以如果原图是规则的方块的话，
不妨考虑一下折衷的方法。
比如提取源图的rect，给Sprite分层，
上层是常规图片，底层为对应的填充色。
旋转的时候，两层都同步旋转，
然后提取鼠标点击底层的颜色判断。
当然了，也会有可能出现鼠标点击的位置，
不在sprite或bitmap内而蹦出各种TypeError.....
具体的事宜，就留给楼主安置了，本楼仅作参考。

作者: 幻の飞鱼 时间: 2018-4-14 16:24
本帖最后由幻の飞鱼于 2018-4-14 16:26 编辑

在野月光族发表于 2018-4-14 15:21
如果要精确点击的话，感觉做出来都不会简单吧。
记得以前写六角战棋的时候，
判断鼠标是否精确到六角框内还 ...

感谢，确实是一个思路，还有些细节问题我要思考一下可行性

作者: phantomz 时间: 2018-4-15 02:04
PIXI里Sprite类就有containsPoint方法
sprite.containsPoint({x: TouchInput.x, y: TouchInput.y})
此方法可判断旋转，不计算children范围
如果要计算包含children的最小方形可用getBounds()
sprite.getBounds();

作者: 汪汪 时间: 2018-4-15 13:20

Sprite.prototype.worldToLocalXY  = function ( x,y,sprite) {
var node = sprite || this;
return node.worldTransform.applyInverse({x:x,y:y},{visible:node.worldVisible});
};

/**
* 是触摸自己
* @param {number} x x坐标
* @param {number} y y坐标
* @param {boolean} type 是否不检查位图(true 为不检查 )
* @param {bolean}c 是否检查子图(true 为检查 )
*
*
*/
Sprite.prototype.isTouchThis = function (x, y, type, c) {
if (this.visible) {
      var loc = this.worldToLocalXY(x,y)
      var x = loc.x
      var y = loc.y
      var v = loc.visible

      if(v){
         if (c) {
            for (var i = 0; i < this.children.length; i++) {
                  var s = this.children[i]
                  if (s && s.isTouchThis && s.isTouchThis(x, y, type,c)) {
                     return true
                  }
            }
         }

         if (this.isTouchIn && this.isTouchIn(x, y, type)) {
            return true
         }
      }
}
return false
}

/**是在之中
* @param {boolean} type 不检查图片
*
*/
Sprite.prototype.isTouchIn = function (x, y, type) {
if (this.anchor) {
      var x = x + this.anchor.x * this.width
      var y = y + this.anchor.y * this.height
}
if (this.isTouchInFrame(x, y, type)) {
      return type || this.isTouchInBitamp(x, y)
} else {
      return false
}
}

/**是在区域中 */
Sprite.prototype.isTouchInFrame = function (x, y, type) {
return x >= 0 && y >= 0 && x < this.width && y < this.height;
};

/**是在位图上不透明点 */
Sprite.prototype.isTouchInBitamp = function (x, y) {
if (this._realFrame) {
      var x = x + this._realFrame.x
      var y = y + this._realFrame.y
}
if (this.bitmap && this.bitmap.getAlphaPixel(x, y)) {
      return true
}
return false
}

作者: 幻の飞鱼 时间: 2018-4-15 17:18
本帖最后由幻の飞鱼于 2018-4-15 17:23 编辑

phantomz 发表于 2018-4-15 02:04
PIXI里Sprite类就有containsPoint方法
sprite.containsPoint({x: TouchInput.x, y: TouchInput.y})
此方法 ...

麻烦再问一句，Sprite的旋转的锚点是如何指定的呢？
好像是？this.anchor.x this.anchor.y?

作者: shitake 时间: 2018-4-15 18:11
用旋转的时候更新sprite的热区
把aabb换成obb

作者: phantomz 时间: 2018-4-15 21:13

幻の飞鱼发表于 2018-4-15 17:18
麻烦再问一句，Sprite的旋转的锚点是如何指定的呢？
好像是？this.anchor.x this.anchor.y? ...

是anchor没错
sprite.anchor.x = 0.5; //0是左边界 1是右边界

也可一行同时指定x、y
sprite.anchor.set(0.5, 0.3); //x = 0.5, y = 0.3

若只带一个参数则xy值相同
sprite.anchor.set(0.5); // x = y = 0.5

欢迎光临 Project1 (https://rpg.blue/)