How to use resident nodes for layer management in CocosCreator

CocosCreator version: 2.3.4

Most games have layer management, such as

• sceneLayer scene layer
• panelLayer pop-up layer
• tipLayer Tip box layer

The scenes in Cocos are not persistent and will be automatically destroyed every time you switch. If you put these layers on the scene, do you have to put them once for each scene? And then get it again, which is very troublesome.

The scene is loaded using cc.director.loadScene. The container node of the scene seems to be a nodeActivator on the director.

Now let's not consider the scene container or the top-level container of Cocos. I can think of two approaches to layer management.

1. There is only one scene

The whole game has one scene, which is the scene at the entrance of the game. On this scene, nodes of layers such as sceneLayer are placed. This entrance scene is equivalent to the stage of egret and laya.

Then all scenes and pop-up modules are made into prefabs, and each time they are displayed, just addChild to the corresponding layer of the entry scene.

2. Use resident nodes

For example, I put layers such as sceneLayer in scene 1. For easier display, I added a single color to each layer.

The resident node must be under the root node, that is, at the same level as the canvas. Set the three layers as permanent nodes.

onLoad(){
    cc.game.addPersistRootNode(cc.find("sceneLayer"));
    cc.game.addPersistRootNode(cc.find("panelLayer"));
    cc.game.addPersistRootNode(cc.find("tipLayer"));
}

Then switch the scene. In the new scene, you can still display and obtain layers such as sceneLayer.

onLoad(){
    console.log(cc.find("sceneLayer")); //Output sceneLayer's cc.Node
}

Using resident nodes, we can place layers such as sceneLayer in the entrance scene. Use the layer management class to save the reference.

III. Best Practices

Layer management class, singleton

export default class LayerManager extends cc.Component {

    private static instance:LayerManager;
    public static ins():LayerManager{
        if (this.instance == null) {
            this.instance = new LayerManager();
        }
        return this.instance;
    }

    public panelLayer:cc.Node;
    public tipLayer:cc.Node;
    
}

Set a resident node layer in the entry scene and use the layer management class to save the reference. For later use.

@ccclass
export default class Helloworld extends cc.Component {

    onLoad(){
        cc.game.addPersistRootNode(cc.find("sceneLayer"));
        cc.game.addPersistRootNode(cc.find("panelLayer"));
        cc.game.addPersistRootNode(cc.find("tipLayer"));

        LayerManager.ins().panelLayer = cc.find("panelLayer");
        LayerManager.ins().tipLayer = cc.find("tipLayer");
    }
}

The above is the details of how to use resident nodes for layer management in CocosCreator. For more information about CocosCreator resident nodes for layer management, please pay attention to other related articles on 123WORDPRESS.COM!