你好,游客 登录 注册 搜索
背景:
阅读新闻

Cocos2D-X闪亮标题实现

[日期:2015-01-05] 来源:Linux社区  作者:ccy0815ccy [字体: ]

Cocos2D-X闪亮标题实现最终效果图:

实现方法:

主要依懒ClippingNode类

需要的素材有:

显示标题,又作为stencil(模板)

光束(beam)....就是纯白色加点透明....可能看不出来

代码实现

1.添加标题

//标题
 auto title = Sprite::create("BeamTitle/title.png");
 title->setAnchorPoint(Vec2(0.5f, 0.5f));
 title->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 6 * 5));
 this->addChild(title);

2,加ClippingNode

 

ClippingNode需要设置三个内容

模板(Node *类型),这里是标题,第一张图,不会被显示

显示目标(ClippingNode 的子节点),这里是光束,第二张图

设置AlphaThresHold的值,简单点的说就是透明度,只有当模板透明度大于这个值时,显示目标才会绘制

//clippingNode
 auto titleStencil = Sprite::create("BeamTitle/title.png");
 auto clipTitle = ClippingNode::create(titleStencil);
 clipTitle->setAnchorPoint(Vec2(0.5f, 0.5f));
 clipTitle->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 6 * 5));
 clipTitle->setAlphaThreshold(0.0f);
 this->addChild(clipTitle);
 //Beam 光束
 auto beam = Sprite::create("BeamTitle/beam.png");
 beam->setAnchorPoint(Vec2(0.5f, 0.5f));
 auto toRight = MoveTo::create(0.5f, Vec2(200, 50));
 auto toLeft = MoveTo::create(0.5f, Vec2(-200, 50));
 auto seq = Sequence::create(toRight, toLeft, nullptr);
 auto move = RepeatForever::create(seq);
 beam->runAction(move);
 clipTitle->addChild(beam);

代码中,ClippingNode的AlphaThresHold值被设置为0.0f,标题的完全透明部分的透明度也为0.0f.所以beam在透明部分不会被显示。

额外例子

最下面的滚动条是用来设置AlphaThresHold

中间使用的模板是

Cocos2D-X闪亮标题实现

增加AlphaThresHold的值,图片显示的内容越来越少。

完整代码

BeamTitle.h

#ifndef __BEAM__TITLE__CPP__
#define  __BEAM__TITLE__CPP__
#include "cocos2d.h"
#include "ui/UISlider.h"
class BeamTitle :public cocos2d::Layer{
public:
 /*
  *三个构造相关函数
  */
 static cocos2d::Scene* createScene();
 CREATE_FUNC(BeamTitle);
 bool init();
private:
 /*
  *滑动条函数
  */
 void sliderEvent(cocos2d::Ref *pSender, cocos2d::ui::Slider::EventType type);
private:
 cocos2d::ClippingNode *clip;
 cocos2d::Label *label;
};
#endif

BeamTitle.cpp

#include "BeamTitle.h"
#include "BackLayer.h"
#include "ui/UISlider.h"
USING_NS_CC;
using namespace ui;
Scene *BeamTitle::createScene(){
 auto *back = BackLayer::create();
 Layer *layer = BeamTitle::create();
 Scene*scene = Scene::create();
 scene->addChild(back);
 scene->addChild(layer);
 return scene;
}
bool BeamTitle::init(){
 if (!Layer::init())
  return false;
 auto visibleSize = Director::getInstance()->getVisibleSize();
 //标题
 auto title = Sprite::create("BeamTitle/title.png");
 title->setAnchorPoint(Vec2(0.5f, 0.5f));
 title->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 6 * 5));
 this->addChild(title);
 //clippingNode
 auto titleStencil = Sprite::create("BeamTitle/title.png");
 auto clipTitle = ClippingNode::create(titleStencil);
 clipTitle->setAnchorPoint(Vec2(0.5f, 0.5f));
 clipTitle->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 6 * 5));
 clipTitle->setAlphaThreshold(0.0f);
 this->addChild(clipTitle);
 //Beam 光束
 auto beam = Sprite::create("BeamTitle/beam.png");
 beam->setAnchorPoint(Vec2(0.5f, 0.5f));
 auto toRight = MoveTo::create(0.5f, Vec2(200, 50));
 auto toLeft = MoveTo::create(0.5f, Vec2(-200, 50));
 auto seq = Sequence::create(toRight, toLeft, nullptr);
 auto move = RepeatForever::create(seq);
 beam->runAction(move);
 clipTitle->addChild(beam);
 //滑动条
 auto slider = Slider::create();
 slider->loadBarTexture("BeamTitle/sliderTrack.png");
 slider->loadProgressBarTexture("BeamTitle/sliderProgress.png");
 slider->loadSlidBallTextures("BeamTitle/sliderThumb.png", "BeamTitle/sliderThumb.png","");
 slider->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 8));
 slider->addEventListener(CC_CALLBACK_2(BeamTitle::sliderEvent, this));
 this->addChild(slider);
 /*
  *ClippingNode
  */
 //模板
 auto stencil = Sprite::create("BeamTitle/stencil.png");
 //显示对象 猫
 auto cat = Sprite::create("BeamTitle/cat.png");
 clip = ClippingNode::create(stencil);
 clip->setAlphaThreshold(1.0f);
 clip->addChild(cat);
 clip->setPosition(visibleSize / 2);
 this->addChild(clip);
 //label 显示透明度 即 AlphaThreshold
 label = Label::createWithBMFont("BeamTitle/bitmapFontTest2.fnt", "1.0f");
 label->setScale(0.5f);
 label->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 5));
 this->addChild(label);
 return true;
}
void BeamTitle::sliderEvent(Ref *pSender, Slider::EventType type){
 if (type == Slider::EventType::ON_PERCENTAGE_CHANGED)
 {
  Slider* slider = dynamic_cast<Slider*>(pSender);
  int percent = slider->getPercent(); 
  clip->setAlphaThreshold(1.0f*percent / 100);
  char str[30];
  sprintf(str, "AlphaThresHold=%f", 1.0f*percent / 100);
  label->setString(str);
  printf("AlphaThresHold=%f", clip->getAlphaThreshold());
 }
}

剖析cocos2d-x之Action实现 http://www.linuxidc.com/Linux/2013-04/82436.htm

Ubuntu下cocos2d-x开发环境搭建及配置 http://www.linuxidc.com/Linux/2013-03/81876.htm

Cocos2d-x3.2实现虚拟摇杆多点触摸 http://www.linuxidc.com/Linux/2014-09/106551.htm

Ubuntu 14.04搭建Cocos2d-x2.2.5开发环境图文详解 http://www.linuxidc.com/Linux/2014-10/108108.htm

Cocos2D-X 的详细介绍请点这里
Cocos2D-X 的下载地址请点这里

本文永久更新链接地址http://www.linuxidc.com/Linux/2015-01/111318.htm

linux
相关资讯       cocos2d-x 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款