码迷,mamicode.com
首页 > 其他好文 > 详细

cocos2dx 实现跑马灯效果和文字效果

时间:2015-03-27 23:34:35      阅读:954      评论:0      收藏:0      [点我收藏+]

标签:

目标实现下面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));

 

cocos2dx 实现跑马灯效果和文字效果

标签:

原文地址:http://www.cnblogs.com/OrangeLife/p/4373092.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!