ClippingNode 新手引导高亮选择提示

最新推荐文章于 2021-10-09 09:59:50 发布

原创最新推荐文章于 2021-10-09 09:59:50 发布 · 739 阅读

0 ·

CC 4.0 BY-SA版权

cocos2d-x 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了使用 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 信息