The theme

How to get the instantiation object of the node in the javascript script, how to get the component mounted by the editor, or cc.find(), which is better?

Special instructions

CocosCreator wechat small game development series articles, is in the process of my gradual development, based on the official document, record some key content, as well as some knowledge points in the official document supplement and analysis.

The body of the

This is an excerpt from CocosCreator’s official documentation, but it’s easy to ignore, so LET me highlight it.

Cocos Creator’s workflow is centered around component development, which simply means that entities are built by composition rather than inheritance.

In Cocos Creator, Node is the entity that bears components. We mount “Component” with various functions to the Node to make it have various performances and functions.

The main idea behind CocosCreator’s layout is to create an interface that consists of one or more nodes stacked with UI component capabilities, rendering capabilities, scripting, and other components.

Script component, is responsible for the scene according to the business needs to deal with the dynamic loading of node components, refresh and background network requests and other transactions of the component, to update and dynamic loading components in the script, we must first obtain the instantiation object of the node and component, then how to obtain the node and component with high performance?

There is a great performance analysis article in the Cocos community: The Cocos Creator Engine: 50% Faster Instantiation Principle, will drag nodes perform better?

This article analyzes the “instantiation” principle and gives some suggestions for performance optimization. Here is my personal take on how to get components, combined with this article and other material.

There are two ways to obtain a node or component:
  1. Set the node or component in the Properties Inspector, and drag the node on the hierarchy manager to the corresponding property on the script component
cc.Class({
    extends: cc.Component,
    properties: {
        // Declare the player property
        player: {
            default: null.type: cc.Node
        }
    },
});
Copy the code

  1. Look it up in the script through the API (this.node.getChildByName()/cc.find())
cc.Class({
    extends: cc.Component,

    start: function () {
        // Find the children of the current node
        //var nodeList = this.node.children;
        var bgNode  = this.node.getChildByName("Bg");
        // Step by step search based on the path passed in
        //cc.find("Bg/StartBtn/Text", this.node);
        // When only the first parameter is passed, the search starts at the scene root node level by level
        //this.backNode = cc.find("Canvas/Bg/Back");}});Copy the code

Note: The getComponent() method is the method that gets the component instance. In this.node.getComponent is the component that gets the node, which is equivalent to this.getComponent.

conclusion

For static nodes, try to set the node or component in the “property inspector”. For dynamically loaded nodes, use getChildByName/cc.find.

Here are a few points I got:

  • At first I struggled with how to get the reference instance. When I renamed the node in the developed scenario, I found that the node name I dragged to the property inspector was also updated automatically, and the path to getChildByName/find needed to be changed manually.
  • Cc. find is also a step by step search. Simply looking at them is a lot more expensive

Where to understand the mistake, please wake up immediately, thank you!

At the end

Write by yourself, decompose the requirements of each module in the project, and solve the problems encountered by checking the documents and searching the Cocos community. Finally, the following wechat mini game named Idiom Jinyiwei was launched on wechat. Welcome everyone to scan the code for experience and develop their own mini game as a reference project template

trailer

The next section and friends say: do not inherit cc.class, to understand the concept of Class, as the foundation of modularity