内容简介:推荐免费在线工具Particle2dx,这里就使用键盘事件、触摸事件以及自定义事件发射与监听的详细介绍可以参考CocosCreator官方提供的文档,文末会提供。本篇文章中主要是使用到屏幕的触摸事件。
涉及到的知识点
- 粒子特效制作
- 触摸事件监听以及坐标转化
- 预制资源制作
- 对象池的使用
- 动态显示特效
制作粒子特效
推荐免费在线工具Particle2dx,这里就使用 模板
中已有的 Click 特效 circle1
选择粒子特效模板 | 设置粒子特效属性 | 导出粒子特效资源 |
---|---|---|
事件监听
键盘事件、触摸事件以及自定义事件发射与监听的详细介绍可以参考CocosCreator官方提供的文档,文末会提供。
本篇文章中主要是使用到屏幕的触摸事件。
cc.Class({ extends: cc.Component, properties: { }, // onLoad () {}, start() { this._initNodeTouchEvent(); }, _initNodeTouchEvent() { //监听事件 this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this); this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this); this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this); this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this); }, _destroyTouchEvent() { //销毁事件 this.node.off(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this); this.node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this); this.node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this); this.node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this); cc.log("销毁事件..."); }, _onTouchBegin: function (event) { cc.log('_onTouchBegin'); }, _onTouchMoved: function (event) { cc.log('_onTouchMoved'); }, _onTouchEnd: function (event) { cc.log('_onTouchEnd'); }, _onTouchCancel: function (event) { cc.log('_onTouchCancel'); }, onDestroy() { //销毁事件 this._destroyTouchEvent(); }, // update (dt) {}, }); 复制代码
获取触摸点的坐标
_onTouchBegin: function (event) { //获取当前点击的全局坐标 let temp = event.getLocation(); //获取当前点击的局部坐标 let tempClick = this.node.convertToNodeSpaceAR(temp) }, 复制代码
制作粒子特效预制资源
动态加载预制资源
使用对象池动态加载预制资源
//使用对象池动态实例化预制资源 newClickNode(position, callBack) { let newNode = null; if (!this._clickPool) { //初始化对象池 this._clickPool = new cc.NodePool(); } if (this._clickPool.size() > 0) { //从对象池请求对象 newNode = this._clickPool.get(); this.setClickNode(newNode, position, callBack); } else { // 如果没有空闲对象,我们就用 cc.instantiate 重新创建 cc.loader.loadRes("prefab/particle_click", cc.Prefab, function (err, prefab) { if (err) { return; } newNode = cc.instantiate(prefab); this.setClickNode(newNode, position, callBack); }.bind(this)); } }, setClickNode(newNode, position, callBack) { newNode.name = "clickNode"; //设置节点名称 newNode.setPosition(position); //设置节点位置 this.node.addChild(newNode); //将新的节点添加到当前组件所有节点上 if (callBack) { callBack(newNode); //回调节点 } }, 复制代码
动态显示特效
_onTouchBegin: function (event) { //获取当前点击的全局坐标 let temp = event.getLocation(); //获取当前点击的局部坐标 let tempClick = this.node.convertToNodeSpaceAR(temp) this.newClickNode(tempClick, function (node) { if (!node) return //杀死所有存在的粒子,然后重新启动粒子发射器。 node.getComponent(cc.ParticleSystem).resetSystem(); cc.log("子节点数:" + this.node.children.length); this.node.children.forEach(element => { if (element.name === 'clickNode') { //获取粒子系统组件 let particle = element.getComponent(cc.ParticleSystem); //指示粒子播放是否完毕 if (particle.stopped) { //特效播放完毕的节点放入对象池 this._clickPool.put(element); cc.log("顺利回收..."); } } }); }.bind(this)); }, 复制代码
以上所述就是小编给大家介绍的《Cocos Creator实战-使用粒子资源实现屏幕点击效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 实战|这个炫酷的播放粒子效果,你也可以学会!使用Web动画API制作
- 深度高能粒子对撞追踪:Kaggle TrackML粒子追踪挑战赛亚军访谈
- 粒子滤波Matlab示例
- 粒子滤波Matlab示例
- 粒子系统的设计
- CAEmitterLayer 粒子动画
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
区块链革命
[加]唐塔普斯科特(Don Tapscott)、[加]亚力克斯·塔普斯科特(Alex Tapscott) / 中信出版集团股份有限公司 / 2016-9 / 69
(1)国际大腕“数字经济之父”继畅销书《维基经济学》之后再出力作! (2)一本真正全景式描述区块链理论及应用的巨著! (3)苹果共同创始人史蒂夫·沃兹尼亚克、世界经济论坛创始人和论坛主席克劳斯·施瓦布、网景及硅谷安德森·霍洛维茨风险投资公司创始人马克·安德森、麦肯锡董事长兼全球总裁鲍达民、 百事公司首席执行官卢英德、丹·舒尔曼 Paypal公司首席执行官等全球政治界、学术界和商界精英联......一起来看看 《区块链革命》 这本书的介绍吧!