CocosCreator 新手引导 圆圈圈中部分能点击 ，圈外点击无效

最新推荐文章于 2025-08-01 14:05:29 发布
原创 最新推荐文章于 2025-08-01 14:05:29 发布 · 7.3k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在CocosCreator中制作游戏新手引导时遇到的问题，即如何设置遮罩使得只有圆形区域内点击能穿透到按钮，圆圈外部点击无效。作者分享了实现这一功能的代码片段，虽然代码理解难度较高，但最终实现了预期效果。

上周做了一个游戏新手引导，规则是 在游戏上添加遮罩，圈中的地方点击会穿透到相应的按钮上，其余部分 阻止穿透，本人级别低，没做出来，请教了一下公司的大神，不过代码依然没看懂，但是能用  

脚本代码如下  

cc.Class({
    extends: cc.Component,

    properties: {
        circleNode: {displayName: "圈圈", default: null, type: cc.Node},
最低0.47元/天 解锁文章

新学期VIP享超值加赠
Android之点击图片底部出现灰色圆圈效果
码莎拉蒂
07-14 3475
1 需求 点击图片底部出现灰色圆圈效果 2 代码实现 1、num_oval_gray_def.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false"> <soli...
在HTML 页面中如何显示带圈圈的数字
oscar999的专栏
08-02 5920
本篇介绍如何使用Unicode统一编码在HTML页面中便捷显示带圈圈的数字。
使用cocos2d-js制作游戏新手引导（一）
奎特尔星球
03-01 7556
​  想到新手引导的功能时可能很多人都会觉得头痛，难以下手。特别是在游戏本身功能或需求还不稳定的情况，更是难以应付，本人就是在这种情况下接受了一个艰巨的任务。在痛定思痛之后，开始了引导功能开发。在做的过程中一点点发现很多有意思的东西，想分享给大家。 一、痛点：新手引导制作的难点及弊端     想到新手引导的功能时可能很多人都会觉得头痛，难以下手。特别是在游戏本身功能或需求还不稳定的情况
Cocos Creator 新手引导制作
niccgz
08-25 1797
效果展示 原理 利用mask组件的反向遮罩功能，将除目标显示对象的其他场景元素进行遮挡，从而达到突出目标显示对象，指引玩家进行操作。 实现 创建节点，层级为：Guideline > Mask > Backgournd 在Mask节点上添加Mask组件，并勾选 Inverted 设置Background的长宽为场景大小，并添加BlockInputEvents组件，此组件的作用为防止点击事件穿透。 创建脚本guideline-component.ts，并添加到Guideline节
cocosCreator允许点击穿透
最新发布
weixin_42253927的博客
08-01 98
e.target._touchListener.setSwallowTouches(false);
COCOS2D X 游戏实战经验 二 新手引导 上
05-22
关于COCOS2D-X 制作新手引导界面的教程
《Cocos Creator游戏实战》新手引导实现
热爱代码
11-21 3350
新手引导实现 新建节点 完成代码 新手引导在游戏中非常有必要，笔者在本篇教程中就带大家来做一个。 运行效果如下： Cocos Creator版本：2.2.0 公众号后台回复"新手引导"，获取该教程完整代码下载地址： 新建节点 笔者在层级管理器中新建了以下节点： 在场景编辑器中显示如下： Button1、Button2和Button3这三个是按钮，用于新手引...
cocos-lua 手游之游戏新手引导
水晶魔法怪的博客
08-19 1007
cocos-lua 手游之游戏新手引导 1.新手引导在游戏中还是比较重要的 往往新手引导的实现都是在游戏开发的后期 2.新手引导有这么几个要点 1.不影响原有的代码 2.断线后引导继续（也可跳过引导具体看策划的需求） 3.和服务器的交互 3.其实新手引导不仅仅可以作为开始游戏的引导 也可作为任务的对话  ok,因为新手引导的方法很多 我现在就来说下我的新手引导的逻辑 1.把
CocosCreator3.8研究笔记（十六）CocosCreator 2D对象
w风雨无阻w的专栏
09-14 1486
（3)、Mask 遮罩使用注意事项节点添加了 Mask 组件之后，所有在该节点下的子节点，在渲染的时候都会受 Mask 影响。GRAPHICS_STENCIL 类型在这里没有做任何引擎需要的事，只是放开了对 graphics 操控，用户可以使用 mask 组件里的 graphics 属性来绘制自定义图形，但是节点的点击事件还是根据节点的尺寸来计算。SPRITE_STENCIL 类型默认需要一个图片资源，如果没有设置的话，相当于没有遮罩。4、Graphics 组件方法功能说明moveTo。
CocosCreator + Chrome 实用插件介绍
BigBear的博客
08-22 5759
Spector.js 下载地址(需要梯子) Spector.js 是针对WebGL的一个调试工具，它可以帮助我们了解context当中到底发生了什么事情，每一帧的信息都会显示出来，包括每一个drawcall绘制的纹理到底是哪些，我们都可以很直观的了解到 例如我们新建一个Cocos Creator 2.1.2的HelloWorld工程 在Chrome当中预览，我们可以看到： 这时我们可以点击Ch...
cocos creator中开发的新手引导
liuzhimu2018的博客
02-15 5098
使用cocos creator 制作新手引导 其中的点击屏蔽借用了这位大哥CocosCreator 新手引导 圆圈圈中部分能点击 ，圈外点击无效的分享，表示感谢 首先用一个类来管理新手引导的数据，代码如下 var GuideData = { //外部不可直接访问 _isGuide: true, _stageID: 101, _stageStep: 1, ...
Cocos2d-x利用遮罩(蒙版)CCLayerColor制作新手引导界面(上)
12-12
Cocos2d-x利用遮罩(蒙版)CCLayerColor制作新手引导界面入门篇.原文请参考博客： http://blog.youkuaiyun.com/u012945598/article/details/17280019
cocos creator 不规则形状按钮
04-20
结合Gizmo实现的不规则按钮制作方法，有需要的同学可以下载本资源，希望对你有所帮助。
cocos2dx 新手引导
u011922261的专栏
01-21 1131
参照了一下大神的文章,自己也试着写了一个 CCClippingNode遮罩解析  利用CCClippingNode做个新手引导 Cocos2d-x教程第(12)讲－利用遮罩(蒙版)CCLayerColor制作新手引导界面(中) lua 代码如下： local GuideLayer = class("GuideLayer",function() return
cocos2d-x 新手引导
Blary的专栏
09-23 1068
新手引导是游戏开发过程中必须要有的模块。以下的代码实现了整个游戏界面只有一个按钮可以点击，这刚好是做新手引导所必须的功能。 首先自定义一个按钮，这个按钮的参数有优先级，方法实现的代理，优先级等： // // B_Button.h // HelloCpp // // Created by blary on 14-8-16. // // #ifndef __HelloCpp__B_Butt
cocos2d3.5新手引导
Rambo的专栏
06-05 745
游戏中，新手引导经常要用到。这次是基于3.5版本。 思路：创建遮罩，显示区触摸，下层响应。 让引导层继承widget local Guide = class("Guide",function () return ccui.Widget:create() end) 把guide设置描点为self:setAnchorPoint(cc.p(0,0))。这样方便坐标计算。 这样可以方便处理
cocos2dx新手引导类封装
joshua
06-09 1517
做游戏新手引导式必不可少的一部分，使用opengl封装一个新手引导类，可以通用，代码如下： .h文件 #ifndef __GUIDE_H__ #define __GUIDE_H__ #include "cocos2d.h" #include "cocos-ext.h" #if CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID #include "gles/g
cocos3——8.实现新手引导
The Way To My Dream
03-19 1272
1.使用ClippingNode裁剪范围   编写裁剪接口：function createClipNode(node, stencil, inverted) { var clip_node = new cc.ClippingNode(); // 设置模板节点（就是要裁剪的区域） clip_node.stencil = stencil; // 添加要被裁剪掉的节点（
cocos creator 3.X 简易热更新（纯新手指引，第一次接触Creator的也能懂）
glp3329的专栏
02-05 2488
creator 新手热更新
圆圈型ProgressBar在Android界面设计中的实现
这样的圆圈型ProgressBar不仅外观更加漂亮，而且在视觉上更能吸引用户注意，使其知道应用正在进行中，增加了用户的耐心和对应用的信赖度。 要创建一个圆圈型的ProgressBar，我们通常有几种方法可以实现。一种是使用...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值