rendering

Knowledge points involved

  • Particle special Effect production
  • Touch event listening and coordinate transformation
  • Prefabricated resource production
  • The use of object pools
  • Dynamic display effect

Making particle Effects

Recommend the free online tool Particle2dx, which uses the Click effects circle1 already in the template

Select the particle effects template Sets particle effects properties Export particle effects resource

Event listeners

For details on keyboard events, touch events, and custom event emission and listening, see CocosCreator’s documentation at the end of this article.

This article focuses on touch events that use the screen.

cc.Class({
    extends: cc.Component,

    properties: {},// onLoad () {},

    start() {
        this._initNodeTouchEvent();
    },
    _initNodeTouchEvent() {
        // Listen on events
        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() {
        // Destruction event
        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("Destruction event...");
    },

    _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() {
        // Destruction event
        this._destroyTouchEvent();
    },

    // update (dt) {},
});
Copy the code

Gets the coordinates of the touch point

_onTouchBegin: function (event) {
    // Get the global coordinates of the current click
    let temp = event.getLocation();
    // Get the local coordinates of the current click
    let tempClick = this.node.convertToNodeSpaceAR(temp)
},
Copy the code

Make prefabricated resources for particle effects

Load prefabricated resources dynamically

Load prefabricated resources dynamically using object pools

// Dynamically instantiate prefabricated resources using object pools
    newClickNode(position, callBack) {
        let newNode = null;
        if (!this._clickPool) {

            // Initializes the object pool
            this._clickPool = new cc.NodePool();
        }
        if (this._clickPool.size() > 0) {

            // Request objects from the object pool
            newNode = this._clickPool.get();
            this.setClickNode(newNode, position, callBack);
        } else {

            // If there are no free objects, we will recreate them with 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"; // Set the node name
        newNode.setPosition(position); // Set the node location
        this.node.addChild(newNode); // Add the new node to all the nodes of the current component
        if (callBack) {
            callBack(newNode); // return the adjustment point}},Copy the code

Dynamic display effect

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

    this.newClickNode(tempClick, function (node) {

        if(! node)return

        // Kill all existing particles, and then restart the particle emitter.
        node.getComponent(cc.ParticleSystem).resetSystem();

        cc.log("Number of child nodes: + this.node.children.length);

        this.node.children.forEach(element= > {

            if (element.name === 'clickNode') {

                // Get the particle system component
                let particle = element.getComponent(cc.ParticleSystem);

                // Indicates whether particle playback is complete
                if (particle.stopped) {
                    // Add the node to the object pool
                    this._clickPool.put(element);
                    cc.log("Smooth recovery..."); }}}); }.bind(this));
},
Copy the code

Related references

Brickengine_Guide: CocosCreator

  • Particle2dx free particle effects online creation tool
  • Launch and listen events
  • Built-in System Events
  • Particle system related API

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 for discussion.