Knowledge points involved

  • Frame animation
  • Prefabricated resource production
  • The use of object pools
  • Touch event listening and coordinate transformation
  • Load prefabricated resources dynamically and display effects

Frame animation

To animate frames and set frame events, perform the following steps:

  • 1, addcc.Sprite.spriteFrameProperty to set different pictures in different frames
  • 2. Select the last frame
  • 3. Select the last frame and clickInsert frame event, will display one in the last frameThe node of the frame event
  • 4,Double-click the frame event nodeSets the callback function and its parameters

Note the annotations in the diagram

  • Animate frames and set frame events

  • Sets the frame animation callback function

  • Renderings of prefabricated resources

  • The frame animation callback component code is shown below

After the frame animation event is called back, the current node is directly used to send the event. In the event, there are user-defined parameters. Here, the key parameter obj is the node currently playing animation, which will be used in recycling.

/** * @author Javen * @copyright 2018-12-12 15:22:31 [email protected] * @description Animation execution callback */ cc.class ({extends: cc.Component, //onLoad{} (), / /start () {},

    // update (dt) {},
    clickDone() {
        let node = this.node;
        this.node.emit('clickDone', {
            msg: 'Click on screen animation to finish playing', obj: node, }); }});Copy the code

Prefabricated resource production

See Cocos Creator For action – Using particle resources for screen click effects

The use of object pools

Refer to the official guide documentation – Working with object pools and official examples

Touch event listening and coordinate transformation

See Cocos Creator For action – Using particle resources for screen click effects

Load prefabricated resources dynamically and display effects

  • The interface nodes are as follows

  • Clickim.js does not explain much and the code is commented in detail

Cc. Class({extends: cc.component, properties: {}, // Dynamically instantiate a prefabricated resource with an object pool newClickNode(position, callBack) {let newNode = null;
        if(! This._clickpool) {// Initialize the object pool this._clickpool = new cc.nodepool (); }if(this._clickpool.size () > 0) {// Request object from the object pool newNode = this._clickpool.get (); this.setClickNode(newNode, position, callBack); }else{// If there are no free objects, we will recreate cc.loader.loadres with cc.instantiate ("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"; // Set the node name newNode.setPosition(position); newNode.getComponent(cc.Animation).play('click', 0); // Play frame animation newNode.setPosition(position); // Set the node position this.clicKnode.addChild (newNode); // Add the new node to all the nodes of the current componentif(callBack) { callBack(newNode); }},start() {
        this._initNodeTouchEvent();
        this.clickNode = this.node.getChildByName("ClickNode");
    },
    _initNodeTouchEventEventType.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); },_destroyTouchEventEventType.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("Destruction event...");
    },

    _onTouchBegin: function(event) {// Get the global coordinates of the current clicklettemp = event.getLocation(); // Get the local coordinates of the current clicklet tempClick = this.node.convertToNodeSpaceAR(temp)
        this.newClickNode(tempClick, function (node) {

            if(! node)return

            cc.log("Number of child nodes:+ this.clickNode.children.length); // Listen for frame animation event node.on("clickDone".function(event) {// Get the argument in the callback event.obj.destroy(); cc.log("Successful Recycling....");
            }.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) {},
});
Copy the code

conclusion

  • Core implementation logic: Click on the screen to convert the location coordinates of the click into node space coordinates, dynamically load prefabricated resources and display frame animation, and recycle the node when the frame animation is finished.
  • Compare that to using particle resources for click-on-screen effects, and you’ll find that using frame animationsDraw CallIt is more stable and recommendedFrame animation to achieve.

Welcome Start 🙂

After the

Here is the end of the introduction, personal ability is limited if there are mistakes welcome to correct, if there are omissions welcome to add. If you have any questions, please leave a message or add a group of “blog left column has a group number” to communicate and discuss together.