ClippingNode 新手引导 高亮选择提示

本文详细介绍了使用 Cocos2d-x 开发游戏时如何实现UI元素的交互,包括按钮响应、触摸事件处理及使用 ClippingNode 创建高亮效果等。通过具体代码示例展示了如何定位触摸点并触发相应的菜单项操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


HelloWorld.h

public:
	void newerGuide(cocos2d::Point pt);
	void menuButtonCallback1(cocos2d::Ref* pSender);
	void menuButtonCallback2(cocos2d::Ref* pSender);
	bool onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event);

	cocos2d::Point pt;

HelloWorld.cpp  

init 初始化

pt = Vec2(visibleSize.width/2, visibleSize.height/2);
	newerGuide(pt);


void HelloWorld::newerGuide(Point pt)
{
	Size visibleSize = Director::getInstance()->getVisibleSize();

	auto closeItem1 = MenuItemImage::create(
		"CloseNormal.png",
		"CloseSelected.png",
		CC_CALLBACK_1(HelloWorld::menuButtonCallback1, this));
	closeItem1->setPosition(pt);
	closeItem1->setTag(8);

	auto closeItem2 = MenuItemImage::create(
		"CloseNormal.png",
		"CloseSelected.png",
		CC_CALLBACK_1(HelloWorld::menuButtonCallback2, this));
	closeItem2->setPosition(Vec2(visibleSize.width/2 + 50, visibleSize.height/2));

	auto menu = Menu::create(closeItem1, closeItem2, NULL);
	menu->setPosition(Vec2::ZERO);
	menu->setTag(88);
	this->addChild(menu, 1);

	// 创建 clippingNode 模板 (作用:蒙版 + 高亮  突出可点击区域)
	auto clippingNode = ClippingNode::create();
	auto stencil = Sprite::create("icon48.png");
	stencil->setPosition(pt);
	clippingNode->setStencil(stencil);		// 设置模板
	clippingNode->setInverted(true);		// 设置底板可见
	clippingNode->setAlphaThreshold(0);		// 设置 alpha 值为0
	auto layerColor = LayerColor::create(Color4B(100, 100, 100, 180));
	clippingNode->addChild(layerColor, 10);
	this->addChild(clippingNode, 10);

	// 设置所有区域不可点击
	auto blackItem = MenuItem::create();
	blackItem->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
	blackItem->setContentSize(visibleSize);
	auto blackMenu = Menu::create(blackItem, NULL);
	blackMenu->setPosition(Point::ZERO);
	blackMenu->setAnchorPoint(Point::ZERO);
	this->addChild(blackMenu, 111);

	// 添加 最上层 监控层,判断触碰区域是否在裁剪区域内
	auto listenLayer = Layer::create();
	this->addChild(listenLayer, 999);
	auto listener = EventListenerTouchOneByOne::create();
	listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);
	_eventDispatcher->addEventListenerWithSceneGraphPriority(listener, listenLayer);
}

void HelloWorld::menuButtonCallback1(Ref* pSender)
{
	auto label = LabelTTF::create("1-1-1", "Arial", 24);
	label->setPosition(Vec2(240, 50));
	this->addChild(label);
}

void HelloWorld::menuButtonCallback2(Ref* pSender)
{
	auto label = LabelTTF::create("2-2-2", "Arial", 24);
	label->setPosition(Vec2(240, 80));
	this->addChild(label);
}

bool HelloWorld::onTouchBegan(Touch *touch, Event *unused_event)
{
	Size visibleSize = Director::getInstance()->getVisibleSize();
	
	auto point = Director::getInstance()->convertToGL(touch->getLocation());
	auto rect = Rect(pt.x-60/2, pt.y-60/2, 60, 60);
	if (rect.containsPoint(point))
	{
		auto menu = (Menu*)this->getChildByTag(88);
		auto item = (MenuItem*)menu->getChildByTag(8);
		item->activate();
	}

	return true;
}

不知道为什么鼠标没有录制进去,下图是我点击其他区域没有任何反应,点击高亮区域弹出 1-1-1 信息



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值