cocos creator 如何实现发牌效果

Creator 2.x
#1

cocos creator 如何实现发牌效果

#2

cc.move();好像可以

#3

我写的不合适，没有达到那样的效果。你与具体的解决方案吗。这是我做的QQ短视频20170717172213.zip (724.4 KB)

#4

看了你那个，不过你想做成什么样的效果呀，是延迟，旋转，还是什么效果。。。

#5

噢谢谢 这个效果已经实现了 还有一个就是翻牌的效果。你会吗

#6

翻拍，感觉就像一个反面沿着X轴缩放到0隐藏，然后正面的那张再从0开始沿着X轴放大。creator里有个翻转效果也可以用那个做

#7

var status = 1; //1：發牌，2：開牌，3：收牌
var userCardArray = [];//玩家資訊

cc.Class({
extends: cc.Component,

properties: {
    cardPre: cc.Prefab,//預置物引入
    cardPop: cc.SpriteFrame,
},

//新增對象緩存池 增加20個暫存空間
init: function () {
    this.card = [];//卡片資訊變數
    this.cardPool = new cc.NodePool();
    for (var i = 0; i < 20; i++) {
        this.cardPool.put(cc.instantiate(this.cardPre));
    }
},

onLoad: function () {
    //新增對象緩存池
    this.init();
    //對象緩存池節點新增
    // this.cardput();
},

cardput: function (CPX) {
    //宣告物件讀取對象緩存池資訊
    var cardnew = this.cardPool.get();
    if (cardnew == undefined || cardnew == null) {
        // console.log("物件用完");
    } else {
        //新增物件節點
        this.node.addChild(cardnew);
        this.card.push(cardnew);
        //物件座標位置
        cardnew.setPosition(0, 264);
        //啟動物件動畫
        cardnew.getComponent(cc.Animation).play();
        //飛牌效果
        // console.log("CPX：" + CPX);
        this.flyCard(cardnew, CPX, -102);
    }
},
//測試按鈕
butTest: function () {
    switch (status) {
        case 1://發牌
            //擷取玩家資訊
            this.userdata();
            //發牌
            this.licensing();
            status = 2;
            break;
        case 2://開牌
            this.openCard();
            status = 3;
            break;
        case 3://回收牌組
            let self = this;
            for (let dCard = 0; dCard < this.card.length;dCard++) {
                this.card[dCard].getComponent(cc.Animation).play('recycling_card');
                this.flyCard(this.card[dCard], 0, 264,true);
                this.card[dCard].getComponent(cc.Sprite).spriteFrame = this.cardPop;
            }
            status = 1;
            
            break;
    }
},
//飛牌動畫效果
flyCard: function (cardnew, CPX, CPY, endFly = false) {
    let self = this;
    cardnew.stopAllActions();
    let action = cc.sequence(cc.moveTo(0.1, cc.p(CPX, CPY)),
        cc.callFunc(function () {
            if (endFly) {
                self.cardPool.put(cardnew);
                self.card.splice(0, 1);
            };
        })
    );
    cardnew.runAction(action);
},

//發牌位置及套用效果
licensing: function () {
    let CardSpeed = 0.1;//發牌速度
    let CardDistance = 25;//牌間距離
    
    var CPX = -365;
    var CPX1 = -145;
    var CPX2 = 75;
    var CPX3 = 295;
    //發牌動畫
    this.schedule(function () {

        this.cardput(CPX, -102);
        CPX += CardDistance;
        this.cardput(CPX1, -102);
        CPX1 += CardDistance;
        this.cardput(CPX2, -102);
        CPX2 += CardDistance;
        this.cardput(CPX3, -102);
        CPX3 += CardDistance;
    }, CardSpeed, 4);
},
//開牌function
openCard: function () {
    let cardResult = [];
    let inCard = 0;
    cardResult = this.cardServer();
    console.log(cardResult);
    this.schedule(function () {
        let self = this.card[inCard];
        cc.loader.loadRes("poke/" + cardResult[inCard], cc.SpriteFrame, function (err, spriteFrame) {
            self.getComponent(cc.Sprite).spriteFrame = spriteFrame;
        });
        inCard += 1;
    }, 0.01, cardResult.length - 1);
},

//伺服器傳送玩家資訊
userdata: function () {
    userCardArray[0] = { userId: 1001, seat: 0 };
},

//server開牌資訊
cardServer: function () {

    let cardResult = [];

    for (var userSeat = 0; userSeat < 4; userSeat++) {
        for (var cardNumber = 0; cardNumber < 5; cardNumber++) {
            cardResult.push(this.cardRandom());
        }
    }
    return cardResult;
},

//卡牌亂數產生function
cardRandom: function () {
    let rt = 0;
    let reString = '';
    //產生牌數字
    rt = Math.floor(Math.random() * (12 - 0 + 1)) + 1;//亂數產生1~13
    reString = rt.toString();
    rt = Math.floor(Math.random() * (3 - 0 + 1)) + 1;//亂數產生1~4
    switch (rt) {
        case 1:
            reString += "A";
            break;
        case 2:
            reString += "B";
            break;
        case 3:
            reString += "C";
            break;
        case 4:
            reString += "D";
            break;
    };
    return reString;
},

update: function (dt) {


},

});

上面是我自己做的練習，發牌效果和簡單開牌效果
我是直接替換牌的圖案顯示而已2017-07-10-1525-37.rar (1.3 MB)

#8

翻牌我做了，发牌效果可以发出来么

#9

var actionToX1 = cc.scaleTo(0.3, 0, sy);
var actionToX2 = cc.scaleTo(0.3, sx, sy);
let self = this;
this.brandPref.runAction(cc.sequence(actionToX1,
cc.callFunc( function() {
self.setIsBrandFace(isFace);
}), actionToX2
));
我这么做的

#10

还有实例么

#11

有实例的大佬发一下呗