cocos2dx上如何对图片和文字做倒影(镜像)效果

本文介绍了在cocos2dx中如何为图片和文字创建倒影(镜像)效果,详细讲解了利用cocos2dx自带的方法实现这一视觉效果的过程。

由于工作中需要对图片和文字做镜像效果,开始的时候也是一头雾水,不知道怎么做,后来自己上网查资料,最后发现cocos2dx提供的方法,可以做镜像或者倒影的效果;


对于图片做倒影效果:就是声明一个同样的sprite,这个新的sprite对y轴翻转就是效果了,是不是好简单;
Sprite * bgSprite = Sprite::create("fixbg.png");
bgSprite->setPosition(100.0, 70.0);
this->addChild(bgSprite, 0);
Sprite * bgReflectionSprite;
//下面是倒影的sprite
Sprite * bgReflectionSprite = Sprite::create("fixbg.png");
bgReflectionSprite->setFlippedY(true);//Y轴翻转
bgReflectionSprite->setOpacity(20);//设置透明度
bgReflectionSprite->setPosition(100, 70.0 - bgReflectionSprite->getContentSize().height - 15);//设置位置
this->addChild(bgReflectionSprite, 0);
对于文字的镜像效果:
由于文字并不是图片,在网上开始找方法,发现可以使用LabelTTF和使用sprite一样的方式,实现倒影,但是我在我的pc板子上可以出现倒影,跑到我的linux板子上就无法显示,为这找了半天都没有找到原因,由于我使用的是cocos2dx3.3的版本,所以这个时候显示文字只有label这一个类,把前面的三种方式合并了,然后看label的设计思路和讲解,发现,cocos2dx对于文字是每一个问题都是一个sprite,一下子就有了解决办法,我取出每一个问题,对每一个文字进行倒影不久行了么,喜出望外,然后解决这个问题;
auto * titleTxt = Label::createWithTTF(“test文字”, “你使用的字体”, 32);
titleTxt->setPosition(10, 10);
titleTxt->setColor(Color3B(0xd5, 0xdb, 0xe3));
this->addChild(titleTxt, 4);


auto *titleTxtReflection = Label::createWithTTF(“test文字”, “你使用的字体”, 32);
titleTxtReflection->setColor(Color3B(0xff, 0xff, 0xff));
titleTxtReflection->setPosition(10, (10.0- titleTxtReflection->getContentSize().height - 5 ));


this->addChild(titleTxtReflection, 4);
//for循环,拿出每一个字,然后对这个字进行Y轴映射,倒影,即可
for (int i = 0; i < titleTxtReflection->getStringLength(); i++)
{
Sprite* letter1 = titleTxtReflection->getLetter(i);
letter1->setFlippedY(true);
letter1->setOpacity(20);
}
针对于文字的倒影还是有一个问题,由于英文每一个文字的大小不一样,高度也不一样,如:A,a,i ,y,p等,这样导致对文字单个进行倒影反转后,出现倒影不整齐的问题,后来通过改进这个方法:对于每一个文字,单单去设置他的位置,基本思想是:通过镜面的值 - 每一个字的位置的y值,再减去一个倒影的高度即可;
//表示是当前文字的的ttf设置位置,后面倒影的每一个字都是通过这个去拿到每一个单词的位置的
pockectTitleTxt = Label::createWithTTF(data->pocketdata.titleid_str, C_FONT_NMEDIUM, 42 / resolutionDiv);
pockectTitleTxt->setColor(Color3B(0xff, 0xff, 0xff));
pockectTitleTxt->setPosition((50.0 / resolutionDiv + posWidth), -155.0 / resolutionDiv);//50  ,-130
        pockectTitleTxt->setOpacity(255);
        for (int i = 0; i < pockectTitleTxt->getStringLength(); i++) {
            Sprite* letter1 = pockectTitleTxt->getLetter(i);
            letter1->setOpacity(255);
        }
this->addChild(pockectTitleTxt, 4);
//文字的倒影的ttf,
pockectTitleTxtReflection = Label::createWithTTF(data->pocketdata.titleid_str, C_FONT_NMEDIUM, 42 / resolutionDiv);
pockectTitleTxtReflection->setColor(Color3B(0xff, 0xff, 0xff));
//pockectTitleTxtReflection->setPosition((50.0 / resolutionDiv + posWidth), (-232.0 / resolutionDiv - pockectTitleTxt->getContentSize().height + 5.0 / resolutionDiv));//50  ,-130


this->addChild(pockectTitleTxtReflection, 4);
for (int i = 0; i < pockectTitleTxtReflection->getStringLength(); i++)
{
Sprite* letter1pockectTitleTxt = pockectTitleTxt->getLetter(i);
Sprite* letter1 = pockectTitleTxtReflection->getLetter(i);
letter1->setFlippedY(true);
letter1->setOpacity(25);
letter1->setAnchorPoint(Vec2(0.5, 0.5));
//关键的一步,拿到正面文字的每一个单词的位置,然后对应的位置付给对应的文字就好了
            letter1->setPosition((letter1pockectTitleTxt->getPosition().x ), -155.0 / resolutionDiv - letter1pockectTitleTxt->getPosition().y - 50 / resolutionDiv);//50  ,-130
}


由于本人在模拟器和电视上做的,没有办法截屏就没有贴图片了,看的同学,多看看文字好了,不懂得可以留言,我看到就会回复;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值