Explication détaillée de l'application d'événement Cocos Creator Touch

L'éditeur ci-dessous vous proposera un article sur l'application d'événement Cocos Creator Touch (un exemple de sélection tactile de plusieurs nœuds enfants). L'éditeur pense que c'est plutôt bien, et maintenant je veux vous le donner et le donner comme référence. Suivons l'éditeur pour y jeter un oeil

J'ai récemment participé aux recherches du créateur de cocos et développé des petits jeux, mais j'ai été trompé par un incident. Maintenant, je l'ai finalement résolu et je le partage avec tout le monde.

Principe

1. Les événements tactiles sont pour les nœuds

2 Le bouillonnement des événements tactiles est des bulles de relation directe, le père et le fils peuvent, mais pas le petit-fils, mais ne peuvent pas traverser les générations

3. Si le nœud parent ne répond pas aux événements tactiles, il doit être bloqué par le nœud enfant tant que le nœud enfant écoute également. à l'événement, le nœud parent ne répondra pas à l'événement tactile. Le nœud peut répondre

4. La position tactile est une coordonnée absolue, par rapport à l'ensemble du canevas, la position du nœud est relative au nœud parent. , et la position relative peut être convertie en coordonnées absolues

5. Le nœud est-il touché, l'événement de début tactile peut certainement être touché, mais lorsqu'un nœud est touché, il doit attendre sa fin avant un autre nœud. peut répondre à l'événement tactile

6. Déterminez si la case est sélectionnée et calculez l'intersection en fonction des coordonnées sélectionnées. C'est-à-dire que la zone rectangulaire formée à partir du point de départ du toucher -> le point final du toucher chevauche le rectangle du nœud, elle est donc sélectionnée par le cadre. Dans cet exemple, un algorithme relativement grossier est utilisé pour le mettre en œuvre, et sa sélection est déterminée en fonction du fait que la plage des abscisses contient ou non l'abscisse du nœud enfant.

7. Pour calculer si une certaine valeur se situe dans une certaine plage, calculez d'abord les valeurs maximales et minimales de la plage, puis comparez.

Code de base

cc.Class({
 extends: cc.Component,

 properties: {
  // foo: {
  // default: null,  // The default value will be used only when the component attaching
  //       to a node for the first time
  // url: cc.Texture2D, // optional, default is typeof default
  // serializable: true, // optional, default is true
  // visible: true,  // optional, default is true
  // displayName: 'Foo', // optional
  // readonly: false, // optional, default is false
  // },
  // ...
   poker:{
    default:null,
    type:cc.Node
   },
   cardMask:{
    default:null,
    type: cc.Prefab
   }
 },

 // use this for initialization
 onLoad: function () {
   
   //牌
   this.cards = this.poker.children;

   //牌初始位置
   this.cardInitY = this.cards[0].y;

   //触摸选择到的牌
   this.touchedCards = [];

   //选中的牌
   this.selectedCards = [];

   console.info(this.cards);
  },
  
  start: function () {
   // this.cards = this.poker.children;
   // console.info(this.cards);
   
   this.addTouchEvent();
  },

  /**
   * 添加事件
   */
  addTouchEvent:function(){

   //父节点监听touch事件（直接子节点必须注册同样的事件方能触发）
   this.poker.on(cc.Node.EventType.TOUCH_START, function (event) {
    console.log('poker TOUCH_START');
    
    //牌
    var card = event.target;
    
    //起始触摸位置（和第一张card一样，相对于poker的位置）
    this.touchStartLocation = this.cards[0].convertTouchToNodeSpace(event);
    console.log('touch start Location:'+ JSON.stringify(this.touchStartLocation));
    
    //计算牌位置
    var index = 0;
    for(var i=0;i<this.cards.length;i++){
     var c = this.cards[i];
     if(c.name == card.name){
      index = i;
      break;
     }
    }

    //暂存第一次触摸到的牌
    var touchedCard = {
     index:index,
     card:card
    };
    this.firstTouchedCard = touchedCard;
    //暂存
    this.pushTouchedCards(touchedCard.index,touchedCard.card);

   }, this);
  
   //父节点监听touch事件（直接子节点必须注册同样的事件方能触发）
   this.poker.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
    console.log(&#39;poker TOUCH_MOVE&#39;);
    //先清除原先触摸到的牌
    this.clearTouchedCards();
    //保存第一张牌
    this.pushTouchedCards(this.firstTouchedCard.index,this.firstTouchedCard.card);

    //触摸点转换为card节点坐标
    var nodeLocation = this.cards[0].convertTouchToNodeSpace(event);
    console.log(&#39;touch nodeLocation:&#39;+ JSON.stringify(nodeLocation));
    var x = nodeLocation.x;
    var y = nodeLocation.y; 

    //找到当前选中的牌
    var currentCard = null;
    for(var i=0;i< this.cards.length;i++){
     var card = this.cards[i];
     var cardX = card.x;
     var cardY = card.y;
     console.log(&#39;card x=&#39;+cardX+&#39;,y=&#39;+cardY);


     //某张牌范围包括了鼠标位置，选中此牌与触摸开头的所有牌
     var cardWidth = i==5 ? card.width:19;
     var cardHeight = card.height;
     if(cardX<=x && x <= cardX+cardWidth && cardY<=y && y<= cardY+cardHeight){
      currentCard = card;
    
      //暂存触摸到的牌
      this.pushTouchedCards(i,card);
      
      break;
     }
    }
    
    //添加开头与此牌直接的所有牌
    var startTouchLocation = this.touchStartLocation;
    for(var i=0;i< this.cards.length;i++){
     var card = this.cards[i];
     var cardX = card.x;
     //框选的范围包括了的牌
     var min,max;
     if(startTouchLocation.x < nodeLocation.x){
      min = startTouchLocation.x;
      max = nodeLocation.x;
     }else{
      min = nodeLocation.x;
      max = startTouchLocation.x;
     }
     console.log(&#39;min=&#39;+min+&#39;, max=&#39;+max);

     if(min <= cardX && cardX <= max){
      //暂存触摸到的牌
      this.pushTouchedCards(i,card);
     }
    }
    

   }, this);
  
  //父节点监听touch事件（直接子节点必须注册同样的事件方能触发）
  this.poker.on(cc.Node.EventType.TOUCH_END, function (event) {
   console.log(&#39;poker TOUCH_END&#39;);
   this.doSelectCard();
  }, this);
  
  //父节点监听touch事件（直接子节点必须注册同样的事件方能触发）
  this.poker.on(cc.Node.EventType.TOUCH_CANCEL, function (event) {
   console.log(&#39;poker TOUCH_CANCEL&#39;);
   this.doSelectCard();
  }, this);
  
  //给所有的牌注册事件，会自动冒泡到poker节点
  for(var i=0;i< this.cards.length;i++){
   var cards = this.cards;
   //闭包传递i值
   (function(i){
    var card = cards[i];
    card.on(cc.Node.EventType.TOUCH_START, function (event) {
     console.log(&#39;card TOUCH_START&#39;);
    }, card);
    
    card.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
     console.log(&#39;card TOUCH_MOVE&#39;);
    }, card);

    card.on(cc.Node.EventType.TOUCH_END, function (event) {
     console.log(&#39;card TOUCH_END&#39;);
    }, card);
 
    card.on(cc.Node.EventType.TOUCH_CANCEL, function (event) {
     console.log(&#39;card TOUCH_CANCEL&#39;);
    }, card);

   
   })(i)
   
  }
  
 },

 /**
  * 暂存触摸到的牌
  */
 pushTouchedCards:function(index,card){
  //构造牌对象
  var cardObj = {
   index:index,
   name:card.name,
   isSelected:card.y==this.cardInitY?false:true //高度不一样，表示选中
  };
  
  //防止重复添加
  var existCard = this.touchedCards.find(function(obj){
   if(obj.name == card.name){
    return obj;
   }else{
    return null;
   }
  });
  if(!existCard){
   //添加暂存
   this.touchedCards.push(cardObj);

   //包含提示
   this.addCardMask(card);
  }
 },

 /**
  * 清除原先暂存的触摸到的牌
  */
 clearTouchedCards:function(){
  for(var i=0;i<this.touchedCards.length;i++){
   var cardIndex = this.touchedCards[i].index;
   var card = this.cards[cardIndex];
   card.removeChild(card.children[0]);
  }
  this.touchedCards = [];
 },

 /**
  * 选择牌
  */
 doSelectCard:function(){
  this.selectedCards = [];

  console.log(this.touchedCards);

  //改变牌状态
  for(var i = 0; i< this.touchedCards.length;i++){
   var cardObj = this.touchedCards[i];
   var card = this.cards[cardObj.index];
   if(cardObj.isSelected){ //如果是选中改为不选中
    card.y = card.y - 30;
   }else{ //不选中改为选中状态
    card.y = card.y + 30;
   }
  }

  //重置
  this.clearTouchedCards();

  //显示选中的牌
  this.showSelectedCards();
 },

 /**
  * 包含牌遮罩
  */
 addCardMask:function(card){
  var cardMask = cc.instantiate(this.cardMask);
  cardMask.setPosition(cc.p(0, 0));
  card.addChild(cardMask);
  },

 /**
 * 显示选中的牌
 */
 showSelectedCards:function(){
  this.selectedCards = [];
  for(var i=0;i< this.cards.length;i++){
   var card = this.cards[i];
   var isSelected = card.y==this.cardInitY?false:true;
   if(isSelected){
    this.selectedCards.push(card.name);
   }
  }
  //输出
  console.info("selected cards is: "+ JSON.stringify(this.selectedCards));
 },

 
 // called every frame, uncomment this function to activate update callback
 // update: function (dt) {

 // },
});

Effet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!