Fork me on GitHub

翻牌动画(CocosCreator)

推荐阅读:

      在游戏中,有时候为了通过一种有意思的途径,让用户在一些物品中随机获取某种物品,除了前面我们提到的使用大转盘抽奖获得,还有一种可以实现类似功能的是抽取卡片。

1.描述

      抽卡界面打开时,向用户展示所有卡片的背面,待用户随机点一张卡片后,该卡片会播放一个翻开的动画,然后显示卡片的相关描述等信息。

2.UI搭建

(1)新建一个Button组件,图片设置为牌的背面图
(2)复制5份,排列好,并依次名命如下;
在这里插入图片描述
效果图如下:
在这里插入图片描述

3.代码

(1)声明一个存放卡片的数组

this.cards = [];//卡片数组

(2)存储卡片置数组中

for (let i = 0; i < 6; i++) 
{
    self.cards[i] = cc.find("card" + i, obj4);
}

(3)为卡片添加监听事件

findBtn("card" + i, obj4, function () 
{
     self.turnCard(i);
})

(4)翻牌操作(翻牌动画)

	///翻牌操作
    turnCard(idx) {
        var self = this;

        var scale1 = cc.scaleTo(0.1, 0, 1);
        var call1 = app.callFunc(function (adt) {
            self.flipCard(idx);
        }, [self.cards[idx]]);
        var scale2 = cc.scaleTo(0.1, 1, 1)

        self.cards[idx].stopAllActions();
        self.cards[idx].runAction(cc.sequence(scale1, call1, scale2));
    },

5翻牌后显示牌正面:这里为了替换牌正面纹理的方便,我们将它保存在Resources/image/card/目录下,并依次命名为1,2,3,4,5,将背面纹理图片命名为0.

   //翻开某一张牌后显示牌正面相关信息
    flipCardShow(idx) {
    	//--测试,根据需要赋值
    	let cardIdx=3;
        self.updateCardTexture(this.cards[idx], cardIdx);//更换牌的纹理 
        //显示牌正面的其他信息
        //TODO
    },

修改纹理图片方法:

 updateCardTexture(img, textureName) {
        cc.loader.loadRes("image/card/" + textureName, cc.SpriteFrame, function (err, spriteFrame) {
            if (!err) { img.getComponent(cc.Sprite).spriteFrame = spriteFrame; }
        });
    },

6.当关闭该翻牌面板时,需要将翻牌结果重置未未翻牌状态

	//初始化牌
    initCard() {
        for (let i = 0; i < 6; i++) {
            gm.GameData.updateCardTexture(this.cards[i], "0");
        }
    },

至此,翻牌功能就实现了,写这篇文章的主要目的是分享一个翻牌的动画,即步骤(4)。

posted @ 2019-06-13 14:01  爱上游戏开发  阅读(3041)  评论(0编辑  收藏  举报
 >>>转载请注明出处