how reordering cards in smooth way my.
Card.ts
import { _decorator, Component, input, Input, EventTouch, log, Vec3, view, UITransform, SpriteFrame, Color, Sprite } from 'cc';
const { ccclass } = _decorator;
@ccclass("Card")
export class Card extends Component {
holdTimer: any = null;
spriteComponent: Sprite
private originalColor: Color
public inDeck = true
public face: SpriteFrame
start() {
this.node.on(Input.EventType.TOUCH_MOVE, this.touchMove.bind(this), this);
this.node.on(Input.EventType.TOUCH_END, this.touchEnd.bind(this), this);
this.node.on(Input.EventType.TOUCH_START, this.touchStart.bind(this), this);
this.spriteComponent = this.node.getComponent(Sprite)
this.originalColor = new Color(this.spriteComponent.color)
}
public toggleFace() {
if (this.face) {
this.spriteComponent = this.node.getComponent(Sprite)
this.spriteComponent.spriteFrame = this.face
}
}
touchStart(event: EventTouch) {
this.node.emit("start", event, this.node)
this.holdTimer = setTimeout(() => {
}, 500);
}
touchMove(event: EventTouch) {
this.node.emit("drag", event, this.node)
}
touchEnd(event: EventTouch) {
if (this.holdTimer) {
clearTimeout(this.holdTimer);
this.holdTimer = null;
}
this.node.emit("end", event, this.node)
}
}
Hand.ts
import { _decorator, Component, EventTouch, instantiate, log, Node, Prefab, UITransform, Vec3 } from 'cc';
import { Card } from './Card';
const { ccclass, property } = _decorator;
@ccclass('Hand')
export class Hand extends Component {
@property(Prefab)
public cardPrefab: Prefab
@property(Prefab)
public placeHolderPrefab: Prefab
public placeHolder: Node
cards: Node[] = []
draggingCard: Node
_offset = new Vec3()
start() {
}
protected onEnable(): void {
}
listentOnCardEvent(cardToListen: Node) {
cardToListen.on("drag", (event: EventTouch, card: Node) => {
if (this.draggingCard) {
let touchPos = event.getUILocation();
this.draggingCard.setWorldPosition(touchPos.x + this._offset.x, touchPos.y + this._offset.y, this.draggingCard.worldPosition.z);
for (var i = 0; i < this.node.children.length; i++) {
var nCard = this.node.children[i]
if (this.draggingCard.position.x <= nCard.position.x) {
log(this.draggingCard.position.x)
var idx = this.draggingCard.getSiblingIndex()
this.placeHolder.setSiblingIndex(idx)
this.draggingCard.parent = this.node.parent
this.node.addChild(this.placeHolder)
var pIdx = this.placeHolder.getSiblingIndex()
var cIdx = nCard.getSiblingIndex()
this.placeHolder.setSiblingIndex(cIdx)
nCard.setSiblingIndex(pIdx)
break
}
}
}
})
cardToListen.on("start", (event: EventTouch, card: Node) => {
this.draggingCard = card
let touchPos = event.getUILocation();
this._offset.x = this.draggingCard.worldPosition.x - touchPos.x;
this._offset.y = this.draggingCard.worldPosition.y - touchPos.y;
this.placeHolder = instantiate(this.placeHolderPrefab)
})
cardToListen.on("end", (event: EventTouch, card: Node) => {
var idx = this.placeHolder.getSiblingIndex()
this.placeHolder.destroy()
this.draggingCard.setParent(this.node)
this.draggingCard.setSiblingIndex(idx)
this.draggingCard = null
})
}
addCard(card: Node) {
this.cards.push(card);
this.node.addChild(card)
this.listentOnCardEvent(card)
}
update(deltaTime: number) {
}
}