cocos 简便斗地主发牌动画

本文介绍了一种在牛牛游戏中实现卡片动画发送效果的方法,通过使用Cocos2d-x库中的bezier曲线来实现卡片从屏幕中心向两侧平滑移动的动画。此动画分为三个阶段,每个阶段卡片的移动路径不同,最终形成了一个连续且流畅的视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

niuniuSend : function (int) {
switch(int)
{
case 0:
for(var i=0;i<5;i++){
var sp = new ccui.ImageView("cards/card_a1.png", ccui.Widget.PLIST_TEXTURE);
sp.setPosition(cc.p(cc.winSize.width / 2, cc.winSize.height / 2));
sp.setScale(0.8);
this.addChild(sp);
var bezier = [cc.p(cc.winSize.width / 2, cc.winSize.height / 2 ), cc.p(cc.winSize.width / 2 - 200+(i*80) , cc.winSize.height / 2), cc.p((cc.winSize.width / 2-150) +(i*80), 100)];
sp.runAction(cc.sequence(cc.spawn(cc.delayTime(1+(i/20)),cc.bezierTo(1, bezier))));
}
this.niuniuSend(1);
break;
case 1:
for(var i=0;i<5;i++){
var sp = new ccui.ImageView("cards/card_a1.png", ccui.Widget.PLIST_TEXTURE);
sp.setPosition(cc.p(cc.winSize.width / 2, cc.winSize.height / 2 ));
sp.setScale(0.5);
this.addChild(sp);
var bezier = [cc.p(cc.winSize.width / 2, cc.winSize.height / 2 ), cc.p(cc.winSize.width / 2 + 300 , cc.winSize.height / 2 + 300), cc.p(cc.winSize.width / 2 + 700 -(i*50), cc.winSize.height/2)];
sp.runAction(cc.sequence(cc.spawn(cc.delayTime(1+(i/20)),cc.bezierTo(1,bezier ))));
}
this.niuniuSend(2);
break;
case 2:
for(var i=0;i<5;i++){
var sp = new ccui.ImageView("cards/card_a1.png", ccui.Widget.PLIST_TEXTURE);
sp.setPosition(cc.p(cc.winSize.width / 2, cc.winSize.height / 2 ));
sp.setScale(0.5);
this.addChild(sp);
var bezier = [cc.p(cc.winSize.width / 2, cc.winSize.height / 2 ), cc.p(cc.winSize.width / 2 - 300 , cc.winSize.height / 2 + 300), cc.p(cc.winSize.width / 2 - 700 + (i*50), cc.winSize.height/2)];
sp.runAction(cc.sequence(cc.spawn(cc.delayTime(1+(i/20)),cc.bezierTo(1,bezier ))));
}
break;

default:
break;
}
},
### Cocos Creator 中实现扑克牌发牌动画Cocos Creator 中实现扑克牌发牌动画可以通过多种方式达成,通常涉及节点的位置变换、缩放以及旋转等属性的变化。以下是基于 `cc.Tween` 和 `cc.Action` 的一种常见做法。 #### 使用 cc.Tween 创建平滑过渡效果 ```javascript // 定义一个名为 dealCards 的函数用于处理发牌逻辑 function dealCards(cardsArray, startPosition, targetPositions) { cardsArray.forEach((cardNode, index) => { const duration = 0.5; // 单张牌移动持续时间 cardNode.setPosition(startPosition); // 设置延迟让每一张牌依次发出 let delayTime = index * 0.1; cc.tween(cardNode) .delay(delayTime) .to(duration, { position: targetPositions[index] }, { easing: 'sineInOut' }) .start(); }); } ``` 此段代码展示了如何利用 `cc.Tween` 来创建带有缓动效果的位移动作[^1]。对于更复杂的场景,还可以考虑加入卡片翻转的效果: #### 添加卡片翻转特效 ```javascript function flipCard(cardSprite) { const rotationDuration = 0.3; cc.tween(cardSprite.node) .by(rotationDuration / 2, { angle: -90 }) // 向左半圈 .call(() => { // 切换纹理至背面图 cardSprite.spriteFrame = backFaceSpriteFrame; }) .by(rotationDuration / 2, { angle: 90 }) // 右半圈恢复原状 .start(); } ``` 上述代码实现了简单的卡片翻转操作,先向一侧倾斜再回到正面位置的同时更换图片资源以模拟翻开过程。 #### 结合两者形成完整的发牌流程 当需要同时展示多张牌被分发出去的过程时,则可组合以上两种技术来增强视觉体验: ```javascript const startHandPos = cc.v2(-200, 0); // 牌堆起始点 let playerTargetPositions = [ cc.v2(100, 100), cc.v2(200, 100), cc.v2(300, 100) ]; dealCards(playerNodes, startHandPos, playerTargetPositions); playerNodes.forEach(node => setTimeout(() => flipCard(node.getComponent(cc.Sprite)), Math.random() * 1000)); ``` 这段脚本先是调用了之前定义好的 `dealCards()` 函数安排好各玩家手上的牌分布情况;接着遍历这些节点并随机设定一定延时后再执行 `flipCard()` 方法使它们逐一展现出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值