Cocos Creator 滑動選擇節點

2021-09-29 21:07:10 字數 2829 閱讀 9485

cocos creator 開發鬥地主,滑動選取手上的手牌

問題:cocos creator沒有滑動選取節點的元件,於是自己造輪子

說明:dragchoose元件用於在多個節點上滑動時,選擇滑鼠滑動區域內的節點,由於cocos creator 支援typescript,所以該元件由typescript語言編寫,需要配合layout元件使用,可以直接掛在相應的node節點上

撲克根節點上需要掛上layout元件,對子節點下的撲克牌進行排列

選擇撲克,被選中的變成灰色

let dragchoose = this.node.addcomponent(dragchoose)

dragchoose.onmoving = (nodes) =>

}

選擇撲克結束,撲克彈起

let dragchoose = this.node.addcomponent(dragchoose)

dragchoose.onend = (nodes) =>

}

const  = cc._decorator;

@ccclass

export default class dragchoose extends cc.component

public onmoving: function = null;

public onend: function = null;

private mwidth: number = 0; //item的寬,所有子物件必須等寬

private mheight: number = 0; //item的高,所有子物件必須等高

private offsetx: number = 0; //item之間的排列間距縮排

private startindex: number = -1;

private endindex: number = -1;

private ispressdown: false = false;//預設不按下

private nodes: array= new array(); //所有子節點的集合

private validnodes: array= new array(); //所有非隱藏(有效)的子節點的集合

private targetnodes: array= new array() //選擇的節點

private get validnodescount()

onload()

//初始化狀態 與 獲取引數

this.mwidth = this.nodes[0].width;

this.mheight = this.nodes[0].height;

this.node.setcontentsize(0, this.mheight)

let layout = this.node.getcomponent(cc.layout);

if (layout != null)

this.resetvalidnodes()

this.listenevents();

}private resetvalidnodes() )

}private listenevents() , this);

this.node.on(cc.node.eventtype.touch_end, function (event) , this);

this.node.on(cc.node.eventtype.touch_cancel, function (event) , this);

this.node.on(cc.node.eventtype.touch_move, function (event) , this);

}private onchoosestart(event)

private onchoosecancel(event) }}

}if (this.onend != null)

this.onreset();

}private onchoosemoveing(event)

//將滑鼠座標轉成相對於當前節點的座標

var mousepos = this.node.converttonodespacear(event.getlocation());

if (!this.checkvalidarea(mousepos.x, mousepos.y))

this.endindex = this.getnodeindex(mousepos.x);

if (this.endindex == -1)

if ((this.startindex >= 0 && this.endindex >= 0) && this.startindex != this.endindex)

}if (this.onmoving != null) }}

//在有效範圍內(高 和 寬)

private checkvalidarea(x, y)

var checkvalidareay = (posy) =>

return checkvalidareax(x) && checkvalidareay(y);

}private onreset()

private getnodeindex(x)

}if (x > (posx - this.mwidth / 2) && x < (posx + this.mwidth / 2 + this.offsetx))

}return -1;}}

android勾選控制項 Android滑動選擇控制項

前言 最近做了個滑動選擇的小控制項,拿出來給大家分享一下,先上圖 執行效果 執行效果圖 實現步驟 這裡分解為3個動作 down move up來進行分析,博主文采不好,大家直接看流程圖吧!down事件分析 move事件分析 up事件分析 分析 talk is cheap,show me code 前...

cocos creator 十二 問題

1 socket為什麼不能使用 2 cocos類之攝像機使用問題 1 在使用socket為什麼不能使用 if cc.sys.isnative opts this sio window.io connect this.ip opts this sio.on connect function data ...

cocos creator模組簡介

專案 專案設定 選擇將在構建發布時要打包進引擎的模組 模組如下 core 必選 canvas 必選,畫布 sprite 必選,精靈 label 文字控制項 mask 遮罩控制項 ccspritedistortion 扭曲效果元件,用於改變 型別sprite的渲染,只有當sprite元件已經新增後,才...