cocos2dx 3.2 裁剪节点 ClippingNode

cocos2dx 3.2 裁剪节点 ClippingNode,第1张

概述效果1: 效果2: 代码: ////[1].背景图片 Sprite* bg = Sprite::create("HelloWorld.png"); bg->setPosition(visibleSize / 2); this->addChild(bg, -1); //[2].创建主题文字 : gameTitle Sprite* gameTitle = Sp

效果1:


效果2:


代码:

////[1].背景图片    Sprite* bg = Sprite::create("HelloWorld.png");    bg->setposition(visibleSize / 2);    this->addChild(bg,-1);  //[2].创建主题文字 : gameTitle    Sprite* gameTitle = Sprite::create("game_Title.png");     //获取尺寸大小    Size clipSize = gameTitle->getContentSize();  //[3].创建底板的发光图片 : spark    Sprite* spark = Sprite::create("spark.png");    spark->setposition(-clipSize.wIDth,0);  //[4].创建裁剪节点 : clipPingNode    ClipPingNode* clipPingNode = ClipPingNode::create();    clipPingNode->setposition(visibleSize / 2);    this->addChild(clipPingNode);     clipPingNode->setAlphaThreshold(0.05f); //设置Alpha闸值    clipPingNode->setContentSize(clipSize); //设置尺寸大小     clipPingNode->setStencil(gameTitle);   //设置模板stencil    clipPingNode->addChild(gameTitle,1);  //先添加标题,会完全显示出来,因为跟模板一样大小    clipPingNode->addChild(spark,2);       //会被裁减  //[5].左右移动spark    Moveto* moveAction = Moveto::create(2.0f,Vec2(clipSize.wIDth,0));    Moveto* moveBackAction = Moveto::create(2.0f,Vec2(-clipSize.wIDth,0));    spark->runAction(RepeatForever::create(Sequence::create(moveAction,moveBackAction,NulL)));



效果3:



1.1、素材


1.2、在HelloWorld.h中添加如下变量与函数

//    ClipPingNode* holesClipper; //裁剪节点    Node* holesstencil;         //模板节点    Node* holes;                //底板节点          //触摸回调    voID ontouchesBegan(const std::vector<touch*>& touches,Event *unused_event);    //添加小洞    voID pokeHoleAtPoint(Vec2 point);//

1.3、在HelloWorld.cpp中的init()中创建裁剪节点ClipPingNode

////[1].背景图片(Layer层中)    Sprite* bg = Sprite::create("HelloWorld.png");    bg->setposition(visibleSize / 2);    this->addChild(bg);  //[2].创建裁剪节点 : holesClipper    holesClipper = ClipPingNode::create();    holesClipper->setposition(visibleSize / 2);    this->addChild(holesClipper);     //属性设置    holesClipper->setInverted(true);        //倒置显示,未被裁剪下来的剩余部分    holesClipper->setAlphaThreshold(0.5f);  //设置Alpha透明度闸值    holesClipper->runAction(RepeatForever::create(RotateBy::create(1,45))); //旋转动作  //[3].创建模板 : holesstencil    holesstencil = Node::create();    holesClipper->setStencil(holesstencil); //设置模板节点     //添加一个模板遮罩 ball    holesstencil->addChild(Sprite::create("ball.png"),-1);  //[4].创建底板 : holes    holes = Node::create();    holesClipper->addChild(holes); //设置底板     //添加另一个底板内容 blocks    Sprite* content = Sprite::create("blocks.png");    holesClipper->addChild(content,-1,"content");  //[5].触摸事件    auto Listener = EventListenertouchAllAtOnce::create();    Listener->ontouchesBegan = CC_CALLBACK_2(HelloWorld::ontouchesBegan,this);    _eventdispatcher->addEventListenerWithSceneGraPHPriority(Listener,this);//

1.4、设置触摸事件回调。当触摸点在底板区域内部,则“打洞”

//voID HelloWorld::ontouchesBegan(const std::vector<touch*>& touches,Event *unused_event){//[1].获取触点,转换为相对holesClipper节点的 相对坐标    Vec2 point = touches[0]->getLocation();    point = holesClipper->convertToNodeSpace(point);      //[2].获取底板区域矩形Rect    Sprite* content = (Sprite*)holesClipper->getChildByname("content");    Size contentSize = content->getContentSize();    Rect rect = Rect(-contentSize.wIDth / 2,-contentSize.height / 2,contentSize.wIDth,contentSize.height);      //[3].触摸点在底板内部,进行"打洞"    if (rect.containsPoint(point))    {        pokeHoleAtPoint(point);    }}//

1.5、实现“打洞” *** 作函数

//voID HelloWorld::pokeHoleAtPoint(Vec2 point){    cclOG("Add a Hole!!!"); //[1].添加底板内容 : 一个洞的痕迹    auto hole = Sprite::create("hole_effect.png");    hole->setposition(point);    holes->addChild(hole);  //[2].添加模板内容 : 一个小洞    auto holeStencil = Sprite::create("hole_stencil.png");    holeStencil->setposition(point);    holesstencil->addChild(holeStencil);  //[3].动作效果 : 放大缩小    holesClipper->runAction(Sequence::create(Scaleto::create(0.05f,1.05f),Scaleto::create(0.05f,1.0f),NulL));}//
总结

以上是内存溢出为你收集整理的cocos2dx 3.2 裁剪节点 ClippingNode全部内容,希望文章能够帮你解决cocos2dx 3.2 裁剪节点 ClippingNode所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1036152.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-24
下一篇2022-05-24

发表评论

登录后才能评论

评论列表(0条)

    保存