Spin animation of Cocos performance optimization

Recently, I was working on a tower defense project , How to put it? , Battery , Bullet attack effect plus hit effect, etc. Let's take a look at the code dc Stable at 200+, This is just the core game logic , If you add ui That's got it. , Ordinary mobile phones hang up directly after a few minutes , Then I think I can only optimize it first , At this time, I thought I had seen a sliding layer optimization code before , So I thought about taking his thoughts directly to use according to the gourd painting ladle , After practice, it is found that it is indeed feasible , Don't sigh big guy or big guy .
Let's take a look at what happened before optimization dc, There are only two kinds of guns 120 了 ：

Look now ,n Kind of cannon plus bullet effect plus hit effect ：

Let's talk about ideas directly , First in the main scene , Hang a node , Something specially used for rendering layers , For example, the cannon in this project , I'll screw it out and make a node for storage , And hang up the script turretRender.ts, It mainly does two things ,
1. Clone one that needs to be used spine Node and add it to this render node
2. When not in use destroy fall

Code ：

 addRenderNodeToRoot(type,name:string, node:cc.Node){
        let baseNode:cc.Node =  this._turretRoot;
        let parentNode:cc.Node = baseNode.getChildByName(name);
        if(parentNode){
            parentNode.addChild(node);
            return;
        }
        parentNode = new cc.Node;
        parentNode.name = name;
        baseNode.addChild(parentNode);
        parentNode.addChild(node);
    }

    removeSpineNodeFromRoot(node:cc.Node){
        if(node){
            node.destroy();
        }
    }

After we load spine Copy the original node , This copied node will exist as the node we need to render later and add it to the above creation turrtRender in , The code is as follows ：
load spine Animation nodes , Give him a callback after loading ：

  loadSpineImg(callback: Function) {
        if (this.bulletSpine) {
            this.bulletSpine.skeletonData = null;
        }
        this.loadSpine("spine/turret/" + this.bulletData.type + "/bullet/" + this.bulletData.name, sp.SkeletonData, (error, sp: sp.SkeletonData) => {
            if (error) {
                cc.warn(error);
                return;
            }
            this.bulletSpine.skeletonData = sp;
            callback && callback();
        })
    }

Loading complete spine Handle cloning logic in the callback after the node , What we need to pay attention to here is , We need to hide the original node , Shows the cloned nodes , Position set , Later, the operations of the original interface are all changed to the cloned node operations , It should be noted that , Remember to judge whether the cloned node exists , Also, ensure that the location is updated in real time

  this.loadSpineImg(() => {
                if (this.cloneBulletSpine) {
                    turretRender.inst.removeSpineNodeFromRoot(this.cloneBulletSpine);
                    this.cloneBulletSpine = null;
                }
                this.cloneBulletSpine = cc.instantiate(this.bulletSpine.node);
                this.cloneBulletSpine.removeAllChildren();
                this.cloneBulletSpine.active = true;
                this.bulletSpine.node.active = false;
                let name: string = this.bulletData.type+"_paodan";
                turretRender.inst.addRenderNodeToRoot(RenderNodeType.renderBulletSpine,name, this.cloneBulletSpine);
                let wPos = this.bulletSpine.node.parent.convertToWorldSpaceAR(this.bulletSpine.node.getPosition());
                let lPos = this.cloneBulletSpine.parent.convertToNodeSpaceAR(wPos);
                this.cloneBulletSpine.setPosition(lPos);
                // Callback 
                if (this.bulletData.Spine == 1) {
                    this.cloneBulletSpine.getComponent(sp.Skeleton).setAnimation(0, this.bulletData.animationName, this.bulletData.loop == "1");
                    this.isMoment = false;
                } else {
                    this.cloneBulletSpine.getComponent(sp.Skeleton).clearTracks();
                    this.playAni();
                }
            });

Monitor the location to update the code in real time , Otherwise, the position will shift ：

start() {
        this.node.on(cc.Node.EventType.POSITION_CHANGED, this.updatePos, this);
        this.bulletSpine.node.on(cc.Node.EventType.ROTATION_CHANGED, this.updatePos, this);
    }
updatePos() {
        if (this.bulletSpine && this.cloneBulletSpine) {
            let wPos = this.bulletSpine.node.parent.convertToWorldSpaceAR(this.bulletSpine.node.getPosition());
            let lPos = this.cloneBulletSpine.parent.convertToNodeSpaceAR(wPos);
            this.cloneBulletSpine.setPosition(lPos);
            this.cloneBulletSpine.angle = this.node.angle;
        }
    }

In fact, the main purpose of doing this is to jointly approve , If you add it one by one ,spine Batch operation will be interrupted in some places , It leads to the failure of the approval ,dc It will be quite high .
---------------------------------------------------------- Split line ----------------------------------------------------------------------
Two easy-to-use plug-ins are recommended ：
1. see dc The drawing situation of ：spector.js, How to use Baidu by yourself , Can detect after optimization dc Whether the drawing is correct
Pictured , Click on the blue part every time dc What are you drawing ：
2.ccc-devtools plug-in unit , You can see the whole cocos Hierarchical structure , See which node a node is under , Here you can monitor cloned spine Whether the node is added turretRender Under the node