1000字范文 > Cocos Creator实战-使用帧动画实现点击屏幕效果

Cocos Creator实战-使用帧动画实现点击屏幕效果

时间：2019-03-03 09:26:42

文章目录

涉及到的知识点帧动画制作预制资源制作对象池的使用触摸事件监听以及坐标转化动态加载预制资源并显示特效总结

涉及到的知识点

帧动画制作预制资源制作对象池的使用触摸事件监听以及坐标转化动态加载预制资源并显示特效

帧动画制作

制作帧动画并设置帧事件步骤如下：

1、添加cc.Sprite.spriteFrame属性，在不同的帧设置不同的图片2、选中最后一帧3、选中最后一帧后，点击插入帧事件，点击后会在最后一帧显示一个帧事件的节点4、双击帧事件节点设置回调函数以及回调的参数

注意图中的批注

制作帧动画并设置帧事件

设置帧动画回调函数

预制资源效果图

帧动画回调组件代码如下

帧动画事件回调后直接使用当前节点发送事件，事件中为自定义参数，这里关键参数obj为当前播放动画的节点，回收时会使用此参数。

/*** @author Javen * @copyright -12-12 15:22:31 javendev@ * @description 动画执行回调*/cc.Class({extends: ponent,// onLoad () {},// start () {},// update (dt) {},clickDone() {let node = this.node;this.node.emit('clickDone', {msg: '点击屏幕动画播放完成',obj: node,});},});

预制资源制作

参考 Cocos Creator实战-使用粒子资源实现屏幕点击效果

对象池的使用

参考官方指南文档-使用对象池以及官方提供的案例

触摸事件监听以及坐标转化

参考 Cocos Creator实战-使用粒子资源实现屏幕点击效果

动态加载预制资源并显示特效

界面节点如下

ClickAnim.js 不多解释，代码有详细的注释

cc.Class({extends: ponent,properties: {},//使用对象池动态实例化预制资源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/clickAnim", 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);newNode.getComponent(cc.Animation).play('click', 0);//播放帧动画newNode.setPosition(position); //设置节点位置this.clickNode.addChild(newNode); //将新的节点添加到当前组件所有节点上if (callBack) {callBack(newNode); //回调节点}},start() {this._initNodeTouchEvent();this.clickNode = this.node.getChildByName("ClickNode");},_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) {//获取当前点击的全局坐标let temp = event.getLocation();//获取当前点击的局部坐标let tempClick = this.node.convertToNodeSpaceAR(temp)this.newClickNode(tempClick, function (node) {if (!node) returncc.log("子节点数:" + this.clickNode.children.length);//监听帧动画事件node.on("clickDone", function (event) {//获取回调中的参数event.obj.destroy();cc.log("顺利回收....");}.bind(this));}.bind(this));},_onTouchMoved: function (event) {cc.log('_onTouchMoved');},_onTouchEnd: function (event) {cc.log('_onTouchEnd');},_onTouchCancel: function (event) {cc.log('_onTouchCancel');},onDestroy() {//销毁事件this._destroyTouchEvent();},toBack() {cc.director.loadScene("Scene");},// onLoad () {},// update (dt) {},});