关闭

利用CCClipingNode做游戏遮罩

572人阅读 评论(0) 收藏 举报
分类:

新手引导是游戏中必备的(除了奇葩的MT用一段动画开始),也是玩家对游戏的第一印象,重要性不言而喻。一般采用的遮罩的形式来突出引导重点,同时屏蔽其他功能。这里简单的介绍一下游戏遮罩的实现,并给出一个示例。


1.CCClipingNode

CCClipingNode是一个可裁剪节点,简单理解:

(1)首先它是一个节点,继承于CCNode,所以它可以像普通节点一样放入CCLayer,CCScene,CCNode中。

(2)作为节点,它就可以用作容器,承载其他节点和精灵。我把它叫底板。

(3)如果想要对一个节点进行裁剪,那需要给出裁剪的部分,这个裁剪区域,我把它叫模版。

所以CCClipingNode裁剪节点在组成上=底板+模版,而在显示上=底板-模版。不知道这样解释会不会好理解一点。



2.API

CCClipingNode的使用还是比较简单的,至于显示底板还是模版,alpha值的设定,这些也不好说清楚,自己多试几次就知道是什么意思该怎么用了。

    //不带模版地创建一个裁剪节点
    static CCClippingNode* create();
    
    //使用一个节点作为模版创建裁剪节点
    static CCClippingNode* create(CCNode *pStencil);
    
    //不带模版地初始化一个裁剪节点
    virtual bool init();
    
    //使用一个节点作为模版初始化裁剪节点
    virtual bool init(CCNode *pStencil);
    
    //设置/获取模版,注意模版需要retain!
    CCNode* getStencil() const;
    void setStencil(CCNode *pStencil);
    
    //设置alpha值(0~1),这个很重要,裁剪是按像素抠图的,所以只有大于这个alpha值的模版像素才会被画出来
    //默认是1,也就是完全裁剪。
    GLfloat getAlphaThreshold() const;
    void setAlphaThreshold(GLfloat fAlphaThreshold);
    
    //默认是false,用于设置显示底板还是模版
    bool isInverted() const;
    void setInverted(bool bInverted);

3.示例

在init中实现:
		CCSize visibleSize=CCDirector::sharedDirector()->getVisibleSize();

		CCSprite* background = CCSprite::create("HelloWorld.png");//创建背景
		background->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
		this->addChild(background,kTagBackground);

		clip=CCClippingNode::create();//创建裁剪节点,成员变量
		clip->setInverted(true);//设置底板可见
		clip->setAlphaThreshold(0.0f);//设置alpha为0
		this->addChild(clip,kTagClipNode);//添加裁剪节点

		CCLayerColor* back=CCLayerColor::create(ccc4(0,0,0,200));
		clip->addChild(back);//为裁剪节点添加一个黑色带透明(看起了是灰色)的底板

		//模版如果要在其他地方使用要记得retain!

		//第一种:以下模型是drawnode遮罩
		//CCDrawNode* front=CCDrawNode::create();
		//ccColor4F yellow = {1, 1, 0, 1};
		//CCPoint rect[4]={ccp(-30,30),ccp(30,30),ccp(30,-30),ccp(-30,-30)};
		//front->drawPolygon(rect, 4, yellow, 0, yellow);
		//front->setPosition(ccp(visibleSize.width/2, visibleSize.height/2));
		//clip->setStencil(front);

		//第二种:以下模型是带图像遮罩
		CCNode* nodef=CCNode::create();//创建模版
		CCSprite* close=CCSprite::create("CloseSelected.png");//这里使用的是close的那个图标,所以注意观察效果图2
		nodef->addChild(close);//在模版上添加精灵
		nodef->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
		clip->setStencil(nodef);//设置模版

		tip = CCSprite::create("tip.png");//一些引导提示
		tip->setScale(0.5f);
		tip->setRotation(60);
		tip->setPosition(ccp(visibleSize.width/2-70,visibleSize.height/2+50));
		this->addChild(tip,kTagTip);

		tip->runAction(CCRepeatForever::create(CCSequence::create(CCScaleBy::create(0.25f,0.95f),CCScaleTo::create(0.25f,0.5),NULL)));

		this->setTouchEnabled(true);//触摸有效,落点正确时移除裁剪节点和提示,相关处理请看源码

4.效果

两种效果:


       

原文链接:http://blog.csdn.net/jackystudio/article/details/17160973





0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

【玩转cocos2d-x之二十九】利用CCClipingNode做游戏遮罩

原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/17160973 新手引导是游戏中必备的(除了奇葩的MT用...
  • liujiayu2
  • liujiayu2
  • 2015-07-21 15:31
  • 329

【玩转cocos2d-x之二十九】利用CCClipingNode做游戏遮罩

新手引导是游戏中必备的(除了奇葩的MT用一段动画开始),也是玩家对游戏的第一印象,重要性不言而喻。一般采用的遮罩的形式来突出引导重点,同时屏蔽其他功能。这里简单的介绍一下游戏遮罩的实现,并给出一个示例...
  • jackyvincefu
  • jackyvincefu
  • 2013-12-06 10:33
  • 11491

【Shader】Shader实现头像遮罩效果

原文地址:http://www.manew.com/thread-104374-1-1.html 在Unity中有个Mask遮罩逐渐,使用这个组件也可以实现遮罩效果 但是我在使用Unity自带的...
  • ldy597321444
  • ldy597321444
  • 2017-06-19 17:35
  • 309

CSS3之设计背景图片(多背景,背景尺寸,背景原点,背景裁剪,遮罩)

一、设计背景 多背景 逗号分开 background:url(a.jpg) 0 0, url(b.jpg) 0 100%;   .box{width:300px;height:300px;backg...
  • u013267266
  • u013267266
  • 2016-04-11 22:20
  • 2699

CSS中的剪裁和遮罩

剪裁和遮罩都是用来隐藏元素的一些部分、显示其他部分的。当然了,这两者还是有区别的。区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异。 ...
  • natalie86
  • natalie86
  • 2015-04-03 10:34
  • 333

用栈实现简单的迷宫游戏

迷宫游戏的实现是运用了栈的“后进先出”的原理,究竟如何实现的呢?下来简单的分析一下。 比如:下图是一个小迷宫 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0...
  • qq_29503203
  • qq_29503203
  • 2016-09-10 16:07
  • 464

安卓中遮罩图片的处理

安卓开发中不可缺少的就是各种图片的圆角,遮罩等等。 以前我都是用shape处理的,发现背景图的圆角要设置成和界面父元素背景一样才能看不出去纰漏。 当遇到背景多变的情况,比如listview隔行背景颜色...
  • catoop
  • catoop
  • 2014-08-18 10:52
  • 11360

Android杂谈(8)关于自定义View的一些实践+遮罩理解

测量模式简述 遮罩的理解
  • wjzj000
  • wjzj000
  • 2016-07-26 19:09
  • 844

cocos2d-x利用ClipingNode做游戏遮罩制作新手引导

原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/17160973 新手引导是游戏中必备的(除了奇葩的MT用...
  • x1426096761
  • x1426096761
  • 2016-02-10 20:05
  • 1639

React Native之Modal组件实现遮罩层效果

React-Native中Modal的使用 /** * React Native App * dongtao 2017/04/22 * @flow */ import React, { C...
  • jiangfei009003
  • jiangfei009003
  • 2017-07-12 22:21
  • 600
    个人资料
    • 访问:125623次
    • 积分:1910
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:137篇
    • 译文:2篇
    • 评论:24条
    最新评论