cocos creator Touch 이벤트 응용(터치 제어 가 여러 개의 하위 노드 를 선택 한 실례)

최근 cocos creator 의 연구 에 참여 하여 작은 게임 을 개발 하 였 는데,결과적으로 한 사건 에 얽 매 여 죽 을 지경 이 되 었 다.이제 야 해결 되 었 습 니 다.여러분 께 나 눠 드 리 겠 습 니 다.
의 원리
1.터치 제어 사건 은 노드 를 대상 으로 한다.
2.사건 의 거품 을 건 드 리 는 것 은 직접적인 관계 에서 거품 이 일어 나 는 것 이다.부자 가 될 수 있 고 손자 가 안 될 수 있 지만 격 대 되 어 거품 이 일어 날 수 없다.
3.부모 노드 가 터치 제어 사건 에 응답 하지 않 으 면 아이 노드 에 의 해 가 려 진 것 이 분명 합 니 다.아이 노드 도 사건 을 감청 하면 부모 노드 가 응답 할 수 있 습 니 다.
4.터치 제어 위 치 는 절대 좌표 로 전체 canvas 에 비해 노드 위 치 는 부모 노드 에 비해 상대 적 인 위 치 는 절대 좌표 와 서로 전환 할 수 있다.
5.노드 가 터치 되 었 는 지,touch start 이벤트 가 터치 되 었 는 지 확인 할 수 있 습 니 다.그러나 한 노드 가 터치 되 었 을 때 끝 날 때 까지 기 다 려 야 다른 노드 가 touch 이벤트 에 응답 할 수 있 습 니 다.
6.상자 선택 여 부 를 판단 하고 좌표 계산 에 따라 서로 교차 하면 선택 합 니 다.즉,내 가 터치 제어 기점->터치 제어 종점 으로 구 성 된 사각형 구역 은 노드 의 사각형 과 중첩 되 어 있 는데 바로 상자 에 의 해 선택 되 었 다.이 예 에서 비교적 대략적인 알고리즘 을 사용 하여 가로 좌표 의 범위 에 하위 노드 의 가로 좌 표를 포함 하 는 지 여부 에 따라 선택 여 부 를 판단 합 니 다.
7.특정한 수치 가 특정한 범위 안에 있 는 지 계산 하고 먼저 범위 의 최대 치,최소 치 를 계산 한 다음 에 비교 하면 된다.
핵심 코드

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('poker TOUCH_MOVE');
    //          
    this.clearTouchedCards();
    //      
    this.pushTouchedCards(this.firstTouchedCard.index,this.firstTouchedCard.card);

    //      card    
    var nodeLocation = this.cards[0].convertTouchToNodeSpace(event);
    console.log('touch nodeLocation:'+ 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('card x='+cardX+',y='+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('min='+min+', max='+max);

     if(min <= cardX && cardX <= max){
      //       
      this.pushTouchedCards(i,card);
     }
    }
    

   }, this);
  
  //     touch  （                  ）
  this.poker.on(cc.Node.EventType.TOUCH_END, function (event) {
   console.log('poker TOUCH_END');
   this.doSelectCard();
  }, this);
  
  //     touch  （                  ）
  this.poker.on(cc.Node.EventType.TOUCH_CANCEL, function (event) {
   console.log('poker TOUCH_CANCEL');
   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('card TOUCH_START');
    }, card);
    
    card.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
     console.log('card TOUCH_MOVE');
    }, card);

    card.on(cc.Node.EventType.TOUCH_END, function (event) {
     console.log('card TOUCH_END');
    }, card);
 
    card.on(cc.Node.EventType.TOUCH_CANCEL, function (event) {
     console.log('card TOUCH_CANCEL');
    }, 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) {

 // },
});

효과.

이상 의 이 cocos creator Touch 이벤트 응용(터치 제어 가 여러 개의 하위 노드 를 선택 한 실례)은 바로 소 편 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 저희 도 많이 응원 해 주시 기 바 랍 니 다.