[CocosCreator]扑克翻牌效果

最新推荐文章于 2025-07-09 11:39:31 发布

原创最新推荐文章于 2025-07-09 11:39:31 发布 · 1.1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#棋牌游戏

CocosCreator 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用Cocos Creator实现扑克牌翻转动画的方法。通过创建节点、添加精灵和Mask组件，配合脚本控制扑克牌的显示与翻转过程。文章提供了详细的步骤说明及代码示例。

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

处理效果,勉强能用吧,我这只是提供个简单思路.
工程下载
这里写图片描述

1.创建空节点,添加mask组件,大小调整为扑克大小
这里写图片描述

2.添加精灵,到mask下
这里写图片描述

3.添加移动扑克的mask
这里写图片描述

4.添加移动精灵扑克
这里写图片描述

5.移动扑克为负的它自己的高度.
这里写图片描述

6.添加脚本,指认控件.
这里写图片描述

7.脚本代码

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
        m_ShowCard:cc.Sprite,
        m_ShowCardMask:cc.Node,

        m_BackCardMask:cc.Node,
        m_BackCard:cc.Node,
    },
    ctor:function()
    {
        this.m_bMove = false;
        this.m_LastPos = 0;
    },
    // use this for initialization
    onLoad: function () {
        this.node.on(cc.Node.EventType.TOUCH_START,this.onStart,this);
        this.node.on(cc.Node.EventType.TOUCH_END,this.onEnd,this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE,this.onMove,this);
    },

    onStart:function(event)
    {
        this.m_LastPos = event.touch.getLocation();
        this.m_bMove = true;
    },
    onEnd:function()
    {
        this.m_bMove = false;

    },
    onMove:function(event)
    {
        var pos = event.touch.getLocation();
        var y = pos.y - this.m_LastPos.y;
        this.m_LastPos = pos;
        this.m_ShowCard.node.y += y;
        this.m_ShowCardMask.y += y;
        this.m_BackCard.y -= y;
        this.m_BackCardMask.y += y;
    },
    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});