效果圖
涉及到的知識點
- 粒子特效製作
- 觸摸事件監聽以及座標轉化
- 預製資源製作
- 對象池的使用
- 動態顯示特效
製作粒子特效
推薦免費在線工具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));
},
相關參考資料
CocosCreator開發小遊戲示例:Brickengine_Guide
完
到這裏就介紹完了，個人能力有限如有錯誤歡迎指正，如有遺漏歡迎補充。如有疑問歡迎留言一起交流討論。