效果图
粒子特效点击效果
涉及到的知识点
- 粒子特效制作
- 触摸事件监听以及坐标转化
- 预制资源制作
- 对象池的使用
- 动态显示特效
制作粒子特效
推荐免费在线工具Particle2dx，这里就使用模板中已有的Click特效circle1
选择粒子特效模板 | 设置粒子特效属性 | 导出粒子特效资源 |
|---|---|---|
选择粒子特效模板 | 设置粒子特效属性 | 导出粒子特效资源 |
事件监听
键盘事件、触摸事件以及自定义事件发射与监听的详细介绍可以参考CocosCreator官方提供的文档，文末会提供。
本篇文章中主要是使用到屏幕的触摸事件。
代码语言：javascript复制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) {},
});获取触摸点的坐标
代码语言：javascript复制_onTouchBegin: function (event) {
//获取当前点击的全局坐标
let temp = event.getLocation();
//获取当前点击的局部坐标
let tempClick = this.node.convertToNodeSpaceAR(temp)
},制作粒子特效预制资源
制作粒子特效预制资源
动态加载预制资源
使用对象池动态加载预制资源
代码语言：javascript复制//使用对象池动态实例化预制资源
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); //回调节点
}
},动态显示特效
代码语言：javascript复制_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));
},相关参考资料
CocosCreator开发小游戏示例:Brickengine_Guide
- 免费粒子特效在线制作工具Particle2dx
- 发射和监听事件
- 系统内置事件
- 粒子系统相关API
完
到这里就介绍完了，个人能力有限如有错误欢迎指正，如有遗漏欢迎补充。如有疑问欢迎留言一起交流讨论。
