cocos2d-x 2.2.0 图片选中聚焦 ，图片描边 CCClippingNode 实现

Posted 2020-09-15 zhchoutai

效果例如以下图

左边箭头是x方向翻转的。右边箭头有旋转和缩放action。

大概实现方法：用箭头作为遮罩层，底图是一个绘制的矩形，得到一个黄色箭头背景。在用schedule尾随要聚焦箭头动作。这个在电视端用遥控器上下左右选择聚焦有点用。

希望这个是对同学们有帮助，谢谢。

代码

#include "HelloWorldScene.h"

USING_NS_CC;

CCScene* HelloWorld::scene()
{
    // ‘scene‘ is an autorelease object
    CCScene *scene = CCScene::create();
    
    // ‘layer‘ is an autorelease object
    HelloWorld *layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    
    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
  
    
    CCSprite *stencil = CCSprite::create("f1.png");
    stencil->setFlipX(true);
    
    CCClippingNode *clipper = CCClippingNode::create();
    clipper->setAlphaThreshold(0.005f);
    clipper->setAnchorPoint(ccp(0.5, 0.5));
    clipper->setPosition( ccp(visibleSize.width / 2 - 50, visibleSize.height / 2 - 50) );
    clipper->setStencil(stencil);
    
    this->addChild(clipper,0,cliper_tag);
    
    CCNode *content = shape(stencil->getContentSize());
    clipper->addChild(content,0,content_tag);
    
    CCSprite *updata = CCSprite::create("f1.png");
    updata->setFlipX(true);
    updata->setPosition( ccp(visibleSize.width / 2 - 50, visibleSize.height / 2 - 50) );
    this->addChild(updata,1,spr1_tag);
    
    
    CCSprite *updata2 = CCSprite::create("f2.png");
    updata2->setPosition( ccp(visibleSize.width / 2 + 50, visibleSize.height / 2 - 50) );
    updata2->runAction(CCRepeatForever::create(CCSequence::create(CCScaleTo::create(0.5, 1.3),CCRotateBy::create(2, 90),CCScaleTo::create(0.5, 1),NULL)));
    
    this->addChild(updata2,1,spr2_tag);
    
    
    this->setTouchEnabled(true);
    return true;
}

CCDrawNode* HelloWorld::shape(CCSize size)
{
    CCDrawNode *shape = CCDrawNode::create();
    static CCPoint shapedate[4];
    shapedate[0] = ccp(-(size.width / 2), -(size.height / 2));
    shapedate[1] = ccp((size.width / 2), -(size.height / 2));
    shapedate[2] = ccp((size.width / 2), (size.height / 2));
    shapedate[3] = ccp(-(size.width / 2), (size.height / 2));
    
    static ccColor4F yellow = {1, 1, 0, 1};
    shape->drawPolygon(shapedate, 4, yellow, 0, yellow);
    return shape;
}

void HelloWorld::setshaper(int tag){
    
    this->unschedule(schedule_selector(HelloWorld::cliperupdate));
    
    current_tag = tag;
    
    CCSprite* sp = (CCSprite*) this->getChildByTag(tag);
    CCClippingNode *clipper = (CCClippingNode*)this->getChildByTag(cliper_tag);
    
    CCSprite *stencil = CCSprite::createWithTexture(sp->getTexture());
    stencil->setFlipX(sp->isFlipX());
    stencil->setFlipY(sp->isFlipY());
    stencil->setScale(sp->getScale());
    stencil->setRotation(sp->getRotation());
    clipper->setStencil(stencil);
    clipper->setPosition(sp->getPosition());
    
    
    clipper->removeChildByTag(content_tag);
    clipper->addChild(shape(sp->getContentSize()),0,content_tag);
    
    
    
    this->schedule(schedule_selector(HelloWorld::cliperupdate), 0.05);
    
}

void HelloWorld::cliperupdate(float dt){
    
    CCSprite* sp = (CCSprite*) this->getChildByTag(current_tag);
    CCClippingNode *clipper = (CCClippingNode*)this->getChildByTag(cliper_tag);
    clipper->setPosition(sp->getPosition());
    
    CCSprite *stencil = (CCSprite*)clipper->getStencil();
    stencil->setFlipX(sp->isFlipX());
    stencil->setFlipY(sp->isFlipY());
    stencil->setScale(sp->getScale());
    stencil->setRotation(sp->getRotation());
    
    CCSprite *content = (CCSprite*)clipper->getChildByTag(content_tag);
    content->setScale(sp->getScale());
    content->setRotation(sp->getRotation());
    
    
}


bool HelloWorld::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){
    
    
    
    CCPoint location = this->convertTouchToNodeSpace(pTouch);
    if (this->getChildByTag(spr1_tag)->boundingBox().containsPoint(location)) {
        setshaper(spr1_tag);
    }
    
    if (this->getChildByTag(spr2_tag)->boundingBox().containsPoint(location)) {
        setshaper(spr2_tag);
    }

    return true;
    
}
void HelloWorld::ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){
    
}
void HelloWorld::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){
    
}

void HelloWorld::registerWithTouchDispatcher(void){
    CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, false);
}
void HelloWorld::onEnter(){
    CCLayer::onEnter();
}
void HelloWorld::onExit(){
    CCLayer::onExit();
}

void HelloWorld::menuCloseCallback(CCObject* pSender)
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT) || (CC_TARGET_PLATFORM == CC_PLATFORM_WP8)
	CCMessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
#else
    CCDirector::sharedDirector()->end();
#if (CC_TARGET_PLATFORM == CC_PLATFORM_ios)
    exit(0);
#endif
#endif
}

demoproject在这里下载 狂点我