Cocos Creator 新手引导制作

效果展示

原理

利用mask组件的反向遮罩功能，将除目标显示对象的其他场景元素进行遮挡，从而达到突出目标显示对象，指引玩家进行操作。

实现

创建节点，层级为：Guideline > Mask > Backgournd
在Mask节点上添加Mask组件，并勾选 Inverted
设置Background的长宽为场景大小，并添加BlockInputEvents组件，此组件的作用为防止点击事件穿透。
创建脚本guideline-component.ts，并添加到Guideline节点上。
把要引导的目标节点传递给Guildline，以实现引导功能

public show(target: Node) {const targetPos: Vec3 = v3();target.getWorldPosition(targetPos);// 更新位置this.mask.node.setWorldPosition(targetPos);const maskTransform: UITransform = this.mask.node.getComponent(UITransform);// 更新大小maskTransform.setContentSize(target.getComponent(UITransform).contentSize);this.mask.node.active = true;this.background.setPosition(maskTransform.convertToNodeSpaceAR(this.node.worldPosition));}

源码：https://gitee.com/superfinger/cocoscreator-guideline-demo

Cocos Creator 新手引导制作相关推荐

cocos creator 如何制作九宫格抽奖
摘要九宫格抽奖是在移动端常见开发功能点之一,那如何实现一个高度可复用的九宫格逻辑就显的特别重要了.接下来我们来制作一个九宫格. 使用版本 CocosCreator 版本 2.4.3 最终效果 coc ...
用 Cocos Creator 快速制作打地鼠游戏
前言这篇教程,将教学如何完成游戏中大厅.音效.规则和分数等模块,如果你在我们的教程中遇到麻烦,可参考[文档]进行学习. 准备开发环境 Cocos Creator 2.1.2 Visual Studi ...
Cocos Creator如何制作3D微信小游戏(一)
前言 Cocos Creator推出了3D编辑器,集成到了2.1以后的版本,今天我们来看下如何来使用 Cocos creator2.1做3D. 1: 可以2D/3D来回切换的场景编辑器: 点击按钮,可 ...
Cocos Creator 中制作一个倒计时显示
今天做了一个倒计时,感觉自己做的不好,分享一下,希望能抛砖引玉,也希望能对需要的人有帮助. 我先自定义一个label来进行显示倒计时的信息.然后定义了一个module,来存储场景的时间戳,和剩余的时间 ...
Cocos Creator开发制作的小游戏《5人足球》
作为一个足球爱好者,眼看卡塔尔世界杯要来了,身残志坚的我总想着做点事满足一下"私欲".于是在每个夜深人静的时候狂敲120分钟,大概耗了2520分钟敲完了第一版.目前已经上线微信小游 ...
Cocos Creator实例-制作抽奖池
出现空白,请点击下方[] 转载地址:https://blog.csdn.net/u011607490/article/details/82701325 [预览效果](https://saber2pr. ...
用 Cocos Creator 制作平台跳跃游戏
前言平台跳跃类游戏如<超级马里奥><Celeste蔚蓝>等,非常考验玩家的操作和判断,有着非常本真的游戏乐趣.这类游戏乍一看,挺容易做的,但是要做好却不太容易.今天,我将使用 ...
Cocos Creator 重力球游戏制作教程
本文首发于:一枚小工(caizj_cn) Cocos 经授权转载,感谢作者创作游戏玩法通过手机陀螺仪,调整手机,让球从上一层的间隔中落到下一层,楼层会不断上涨,如果球碰到上方或者下方的火焰,游戏结 ...
Cocos Creator 2.1.3 正式发布
自 Cocos Creator 2.1.0 发布以来,经过半年时间更新迭代,版本现已趋于稳定,目前 2.1 的新增用户已经占据主流.因此我们计划减少 2.0 版本的后续维护力度,将分散的精力集中投入到 ...

Cocos Creator 新手引导制作

效果展示

原理

实现

Cocos Creator 新手引导制作相关推荐

最新文章

热门文章