效果圖
涉及到的知識點
- 粒子特效製作
- 觸控事件監聽以及座標轉化
- 預製資源製作
- 物件池的使用
- 動態顯示特效
製作粒子特效
推薦免費線上工具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
完
到這裡就介紹完了，個人能力有限如有錯誤歡迎指正，如有遺漏歡迎補充。如有疑問歡迎留言一起交流討論。