cocos-js,clippingNode的使用(1)

前端之家收集整理的这篇文章主要介绍了cocos-js,clippingNode的使用(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

2016年5月11日下午2:14

一.基本定义


ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示。ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。

原理图:

二.上手实例


游戏中,新手引导算是一个比较重要的部分,指引玩家一步步了解游戏,深入游戏,作用相当于老司机啊,告诉我们正确的打开方式。
引导的实现一般分为两步:

  1. 把背景置灰,把要操作的区域高亮。
  2. 屏蔽所有的触摸,只能触摸高亮区域。

下面拿我们游戏中的代码做一下演示:

//-------------------1.只显示高亮区域-------------------//

        //获取需要高亮的控件
        that.rootNode = ccs.load("res/ArenaMain.json").node;
        that.addChild(that.rootNode);
        var btn_change = that.seekWidgetByName(that.rootNode,"btn_change")
        that.widget = btn_change

        //创建裁剪节点
        var clipNode = new cc.ClippingNode()
        that.addChild(clipNode)

        //创建底板,将屏幕遮灰
        that.layerBg = new cc.LayerColor(cc.color(0,150))
        clipNode.addChild(that.layerBg)
        clipNode.setInverted(true)//设置底板可见

        //创建模板
        var sentcil = new cc.LayerColor(cc.color(255,255,100))
        clipNode.setStencil(sentcil)//设置裁剪模板
        var worldPosition = btn_change.getParent().convertToWorldSpace(btn_change.getPosition())
        sentcil.setPosition(worldPosition)
        sentcil.ignoreAnchorPointForPosition(btn_change.isIgnoreAnchorPointForPosition())
        sentcil.setContentSize(btn_change.getContentSize())
        sentcil.setAnchorPoint(btn_change.getAnchorPoint())

        //-------------------------------------------------------//

效果图:

//-------------------2.只能触摸高亮区域-------------------//
    var listener = cc.EventListener.create({
        event: cc.EventListener.TOUCH_ONE_BY_ONE,swallowTouches: true,onTouchBegan: function (touch,event) {
            if(that.widget){
                //如果触摸点位于高亮区域,则可向下传递触摸,否则吞噬掉触摸
                var isHit = that.widget.hitTest(touch.getLocation())
                if(isHit){
                    listener.setSwallowTouches(false)
                }else{
                    listener.setSwallowTouches(true)
                }
            }
            //cc.log("wade setTouch 111")
            return true;
        },onTouchMoved:function (touch,event){},onTouchEnded:function (touch,event){
        },onTouchCancelled:function (touch,event){
        }
    })

    cc.eventManager.addListener(listener,that.layerBg)

    //-------------------------------------------------------//

三.深入研究


1.举例:小球透视

模板:Node节点,放入4个Sprite的小球 。
底板:Node节点,放入1个Sprite的logo图。
背景:一个Sprite的温馨场景图。

代码实现:

//创建最底层的温馨场景图
    this.sprite = new cc.Sprite("res/bg1.jpg")
    this.sprite.attr({
        x: cc.winSize.width / 2,y: cc.winSize.height / 2,})
    this.addChild(this.sprite)

    //创建裁剪节点
    var clipNode = new cc.ClippingNode()
    clipNode.attr({
        x: 0,y: 0,anchorX : 0,anchorY : 0,})
    this.addChild(clipNode)
    //设置alpha阈值
    clipNode.setAlphaThreshold(0.05)

    //创建底板
    var content = new cc.Sprite("res/powered.png")
    content.attr({
        x: cc.winSize.width/2,y: cc.winSize.height/2,anchorX : 0.5,anchorY : 0.5,})
    clipNode.addChild(content)
    //底板可见
    clipNode.setInverted(true)


    //创建模板
    var ball1 = new cc.Sprite("res/SpookyPeas.png")
    var ball2 = new cc.Sprite("res/SpookyPeas.png")
    var ball3 = new cc.Sprite("res/SpookyPeas.png")
    var ball4 = new cc.Sprite("res/SpookyPeas.png")
    ball1.setPosition(cc.winSize.width/2-40,cc.winSize.height/2-40)
    ball2.setPosition(cc.winSize.width/2+40,cc.winSize.height/2-40)
    ball3.setPosition(cc.winSize.width/2-40,cc.winSize.height/2+40)
    ball4.setPosition(cc.winSize.width/2+40,cc.winSize.height/2+40)

    var sentcil = new cc.Node()
    sentcil.attr({
        anchorX : 0,})
    sentcil.addChild(ball1)
    sentcil.addChild(ball2)
    sentcil.addChild(ball3)
    sentcil.addChild(ball4)

    clipNode.setStencil(sentcil)

效果展示:

分析总结:

通过ClippingNode进行裁剪遮罩,其实是这样的:

将模板(Stencil)上所有元素的形状集合作为 “形状模板” ,其元素本身不渲染。

使用“形状模板”对底板进行裁剪。

显示从底板上裁剪下来的图片区域。

主要函数

倒置显示(Inverted)
false :显示被模板裁剪下来的底板内容。默认为false。
true :显示剩余部分。

clipNode.setInverted(false)

alpha阈值(alphaThreshold)
alpha:表示像素的透明度值。
只有模板(stencil)中像素的alpha值大于alpha阈值时,内容才会被绘制。

alpha阈值(alphaThreshold) :取值范围 [0,1] 。

默认为 1 ,表示alpha测试默认关闭,即全部绘制。

若不是1 ,表示只绘制模板中,alpha像素大于alphaThreshold的内容

具体说明:

以下是一张 40*40 的图片,其中小球以外的其他区域像素为透明的(即: alpha为 0 )。

(1)在 不设置AlphaThreshold闸值 , 或者 setAlphaThreshold(1.0f) ,的情况下:

(2)在 设置setAlphaThreshold(0.5f) ,的情况下:

结论:

可以发现在不设置alpha闸值时,模板绘制的区域为一个40*40的矩形。

设置了alpha闸值为0.5时,透明度alpha为0的像素不被绘制,只绘制了一个小圆。

原文链接:https://www.f2er.com/cocos2dx/339735.html

猜你在找的Cocos2d-x相关文章