用CCC来实现刮刮卡和橡皮擦

今天项目需要实现一个刮刮卡的效果,于是在论坛里搜集了一些资料并且看了一下CCMask的源码,做出来一套可用的教程,分享给大家。(WEBGL和Native端测试可用)



maskNode是详细设置如下

我们在 scratchCardCtr上挂载了一个脚本 scratchCardNodeCtrl


直接上这个脚本的代码吧

cc.Class({
    extends: cc.Component,

    properties: {
        rsultLabel:cc.Label,
        mask:cc.Mask,
        promptLabel:cc.Label,
    },

    // use this for initialization
    onLoad: function (){
        this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
    },

    onDestroy:function () {
        this.node.off(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this);
        this.node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
        this.node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
    },

    start:function () {
       //


        // var x =-100;
        // var y =-100;
        // var width =300;
        // var height = 200;
        // var rectangle = [cc.v2(x, y),
        //     cc.v2(x + width, y),
        //     cc.v2(x + width, y + height),
        //     cc.v2(x, y + height)];
        //
        // stencil.drawPoly(rectangle, color, 0, color);

        // stencil.drawPoly(this.mask._calculateCircle(cc.p(0,0),cc.p(100,100), 64), color, 0, color);
        //
        // stencil.drawPoly(this.mask._calculateCircle(cc.p(200,200),cc.p(50,50), 64), color, 0, color);

    },

    _onTouchBegin:function (event) {

        cc.log('touchBegin');

        var point = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    },

    _onTouchMoved:function (event) {
        var point = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    },

    _onTouchEnd:function (event) {
        var point = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    },

    _onTouchCancel:function (event) {
        // var point = event.touch.getLocation();
        // point = this.node.convertToNodeSpaceAR(point);
        // this._addCircle(point);
    },

    _addCircle:function (point) {
        var stencil = this.mask._clippingStencil;
        var color = cc.color(255, 255, 255, 0);
        stencil.drawPoly(this.mask._calculateCircle(point,cc.p(50,50), 64), color, 0, color);
        if (!CC_JSB) {
            cc.renderer.childrenOrderDirty = true;
        }
    },


    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

85赞

6666,前排围观

厉害了 亲测可用.谢谢分享

楼主这四个事件监听函数一摸一样啊

想知道_clippingStencil是做什么用的,查API怎都没看到这属性

_clippingStencil是Mask组件内部实现遮罩的东西,用于给cc.ClippingNode(cocos2dx的遮罩节点)作stencil。如果Mask组件是RECT或ELLIPSE模式,那_clippingStencil就是一个cc.DrawNode(也是cocos2dx的东西,理解为cc.Graphics),通过画一个矩形或者椭圆来生成遮罩模板stencil(所以楼主的功能要实现必须设置Mask的Type属性为RECT或ELLIPSE)。cc.ClippingNode和cc.DrawNode是cocos2dx的东西,不在Creator的官方API中,最好通过Mask组件使用,但是直接操作它可以获得更大的自由度。

7赞

这个是直接看CCMask的实现找到的,API里自然是没有啦,很多时候看API是很难找到自己想要的东西的。得看源码哦

可以啊,不错

插旗~ 表示支持一下~

:+1:

good

我想知道,怎样才能使边缘平滑而没有锯齿?

真羡慕可以看得懂源码,哪天我也能到这种程度就太好了。

这个怎么判断快刮开了呢

把刮奖区域分成nm个小矩形,用一个nm的布尔数组open保存刮开情况,一开始全设置为false。楼主代码里addCircle不是有个参数point嘛,判断point属于哪个小矩形i,j,把open[i][j]设置为true。如果open中设置为true的小矩形数量超过70%或80%,就相当于刮开了。

大兄弟,其实我没有这个复杂的。我直接判断一下,滑动的时候,x轴的跨距和y轴的跨距最大的达到了这个尺寸的长和宽的一半,或者滑动累计了50个点就算刮开了。哈哈哈哈。精度不高。但是效果还行

赞!正在愁怎么挖个洞,你这个分享救了我。

挖洞成功了,欢迎来get!

地址:https://github.com/ShawnZhang2015/uikiller

5赞

学习,Mark

厉害了我的亲