Cocos2d-js 3.x: 像素触摸

前端之家收集整理的这篇文章主要介绍了Cocos2d-js 3.x: 像素触摸前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

像素触摸的大致思路都是一样的,无论是-x中的版本还是html5中。

第一步:获得纹理的像素信息。

第二步:根据图片的像素信息获得触摸(点击)点上的像素信息。

第三步:触摸判断,是否透明。透明则不处理,不透明则触摸到了。


具体的实现思路:

目前我们基本上都是使用UIButton这个类,所以我只实现了这个的简单封装,其他的都类似。

第一步:修改Button的onTouchBegan函数截取开始的触摸事件,在这个地方实现是否为透明区域的判断处理。

第二步:为Sprite添加一个读取纹理像素信息的方法

第三步:给UIButton添加方法,设置是否实用像素触摸。


使用方法

在创建按钮的地方,设置按钮是否使用像素触摸即可。

具体实现:

cc.Sprite.prototype._pixels = [];
cc.Sprite.prototype.readPixels = function(x,y){
    var w = this.width;
    var h = this.height;
    if(!this._pixels || this._pixels.length == 0){
        var canvas = cc.newElement("canvas");       // 创建一个新的元素节点
        canvas.width = w;
        canvas.height = h;
        var ctx = canvas.getContext("2d");                           // 获得一个2d的画布(通过它就可以这个画布上的像素信息,我们只在上面绘制一张图片)
        ctx.drawImage(this.getTexture().getHtmlElementObj(),0);  // 因此获得的像素信息也就等于是这个图片的像素信息</span>

        this._pixels = ctx.getImageData(0,w,h).data;            // 获得像素信息
    }
    var idx = (h-y) * w * 4 + x * 4;                                 // 根据触摸坐标得到像素上的索引
    return [this._pixels[idx],this._pixels[idx + 1],this._pixels[idx + 2],this._pixels[idx + 3]]; // 返回这个点上的的像素信息
};


ccui.Button.prototype.setPixelTouchEnabled = function (b) {
    this._pixelEnabled = b;
};

ccui.Button.prototype.getPixelTouchEnabled = function (b) {
    return this._pixelEnabled;
};

ccui.Widget.prototype.onTouchBegan = function (touch,event) {
  this._hit = false;
  if (this.isVisible() && this.isEnabled() && this._isAncestorsEnabled() && this._isAncestorsVisible(this) ){
    var touchPoint = touch.getLocation();
    this._touchBeganPosition.x = touchPoint.x;
    this._touchBeganPosition.y = touchPoint.y;
    if(this.hitTest(this._touchBeganPosition) && this.isClippingParentContainsPoint(this._touchBeganPosition))
      this._hit = true;
    var target = event.getCurrentTarget();
    if(target instanceof ccui.Button && target.getPixelTouchEnabled()){
      var locationInNode = target.convertToNodeSpace(touchPoint);
      //var locationInNode = touchPoint;


      var s = target.getContentSize();
      var rect = cc.rect(0,s.width,s.height);
      if (cc.rectContainsPoint(rect,locationInNode)) {
        var sp = target.getVirtualRenderer();
        var x = locationInNode.x;
        var y = locationInNode.y;
        if(sp instanceof cc.Sprite){
          var pexels = sp.readPixels(Math.round(x),Math.round(y));
          cc.log("alhpa : %d",(pexels[3]));
          if(pexels[3] > 0){
            // 非透明
            this._hit = true;
          }else{
            // 透明
            this._hit = false;
          }
        }
      }
    }
  }
  if (!this._hit) {
    return false;
  }
  this.setHighlighted(true);
  /*
  * Propagate touch events to its parents
  */
  if (this._propagateTouchEvents)
  {
    this.propagateTouchEvent(ccui.Widget.TOUCH_BEGAN,this,touch);
  }


  this._pushDownEvent();
  return true;
};


最后补充:

当我写完canvas版本的时候,想到要做到位,肯定也要支持webGL。webGL的绘制方法和canvas不一样。但是找了半天,没有找到方法。于是我想,webGL严格来说是属于canvas上的内容。然后直接实验这段代码能不能在webGL模式下跑,测试后通过,没问题。

最近还在学习webGL,有结果了再补充原因。

原文链接:https://www.f2er.com/cocos2dx/344151.html

猜你在找的Cocos2d-x相关文章