cocos2dx 实现跑马灯效果和文字效果
目标:实现下面2种文字效果
1.
2.
方法:
利用ClippingNode实现上图所示效果。
1效果:给ClippingNode添加裁剪裁剪内容,即红色文字,然后设置裁剪模板。然后让模板来回移动即可实现如图效果。直接贴代码:
Label* txt = Label::create("this is a clippingNode Test...this is a clippingNode Test...","Arial",30); txt->setColor(Color3B::RED); //裁剪内容 ClippingNode* clip = ClippingNode::create(); Sprite* sp = Sprite::create("CloseNormal.png"); //裁剪模板 sp->setScaleX(5); sp->setAnchorPoint(Vec2::ZERO); clip->setStencil(sp); txt->setAnchorPoint(Vec2::ZERO); clip->addChild(txt); clip->setInverted(false); //设置裁剪区域可见还是非裁剪区域可见 这里为裁剪区域可见 clip->setAlphaThreshold(0); clip->setPosition(100,600); this->addChild(clip); MoveBy* to = MoveBy::create(5,Vec3(txt->getContentSize().width - 200,0,0)); //来回滚动动画 sp->runAction(RepeatForever::create(Sequence::create(to,to->reverse(),NULL)));
2效果:原理同1,只是把红色文字滚动即可,代码如下:
Label* txt = Label::create("this is a clippingNode Test...this is a clippingNode Test...","Arial",30); txt->setColor(Color3B::RED); //裁剪内容 ClippingNode* clip = ClippingNode::create(); Sprite* sp = Sprite::create("CloseNormal.png"); //裁剪模板 sp->setScaleX(5); sp->setAnchorPoint(Vec2::ZERO); clip->setStencil(sp); txt->setAnchorPoint(Vec2::ZERO); clip->addChild(txt); clip->setInverted(false); //设置裁剪区域可见还是非裁剪区域可见 这里为裁剪区域可见 clip->setAlphaThreshold(0); clip->setPosition(100,600); this->addChild(clip); txt->setPositionX(clip->getContentSize().width); MoveTo* to2 = MoveTo::create(5, Vec3(-txt->getContentSize().width, 0, 0)); txt->runAction(Sequence::create(DelayTime::create(5), to2, NULL));