Detailed explanation of cocos creator Touch event application

The following editor will bring you an article on cocos creator Touch event application (an example of touch selection of multiple child nodes). The editor thinks it’s pretty good, and now I want to give it to you and give it as a reference. Let’s follow the editor and take a look.

I recently participated in the research of cocos creator and developed small games, but I was deceived by an incident. Now I finally solved it and share it with everyone.

Principle

1. The touch event is for the node

2. The bubbling of the touch event is Direct relationship bubbles, father and son can, but not grandsons, but it cannot bubble across generations

3. If the parent node does not respond to touch events, it must be blocked by the child node. As long as the child node also listens to the event, the parent node will not respond to the touch event. The node can respond

4. The touch position is an absolute coordinate, relative to the entire canvas, the node position is relative to the parent node, and the relative position can be converted into absolute coordinates

5. Is the node Being touched, the touch start event can definitely be touched, but when a node is touched, it must wait for its completion before another node can respond to the touch event

6. Determine whether the box is selected, and calculate the intersection based on the coordinates. is selected. That is to say, the rectangular area formed from the starting point of the touch -> the end point of the touch overlaps with the rectangle of the node, so it is selected by the frame. In this example, a relatively rough algorithm is used to implement it, and whether it is selected is determined based on whether the range of the abscissa contains the abscissa of the child node.

7. To calculate whether a certain value is within a certain range, first calculate the maximum value and minimum value of the range, and then compare.

Core Code

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
      
Effect
      

      
The above is the detailed content of Detailed explanation of cocos creator Touch event application. For more information, please follow other related articles on the PHP Chinese website!