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
中間使用的模板是
增加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 的下載地址：請點這裡
