[CocosCreator]扑克翻牌效果

来源:互联网 发布:ubuntu拷贝文件 编辑:程序博客网 时间:2024/06/06 13:18

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

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) {    // },});
原创粉丝点击