Detailed explanation of cocoscreater prefab

Detailed explanation of cocoscreater prefab

Prefab

What is a prefab? It literally means a node resource that is pre-made before use. Its properties are the same as those of an ordinary node. It can be regarded as an ordinary node that is pre-made and not yet displayed.

How to create a prefab

1. Create a normal node in the hierarchy manager, then drag this node to the assets folder in the resource manager. For the convenience of management, a Prefab folder will be created to store prefabs uniformly.

Double-click the prefab node to see it turn blue. You can now delete the node that remains in the scene. When you need to use the node, create it through the prefab.

At this time, you can see the properties in the Property Inspector, which are the same as those of ordinary nodes.

The role of prefabricated

1. Create nodes of the same type in batches

Essentially, it is to create a template using a prefab, and then create batches by copying this prefab template

Step 1: Create nodes in batches and put them into the object pool

 @property(cc.Prefab)
 prefab:cc.Prefab = null;
 //Declare a prefab type on the property manager to mount the defined prefab in the property manager @property(cc.NodePool)
 nodePools:cc.NodePool = null;
 // Declare an object pool to store objects created by prefabs. Use prefabs to create enough nodes of the same type at one time, and then put them into the object pool. Take them out when needed and put them back when not needed to avoid long-term creation and destruction of large numbers of nodes for(let i:number = 0; i < 100; i++){
 	//Create 100 nodes let node:cc.Node = cc.instantiate(this.prefab); 
    this.nodePools.put(node); 
    //Put each node into the object pool}

Step 2: Take it out and use it when you need it

let node:cc.Node = null;
// Determine whether there are idle objects in the object pool if (this.nodePools.size() > 0) {
	  // Use the get method to get the idle object. At this time, pass the object pool nodePools that stores the batch created nodes as a parameter to get. Then you can put it back into the object pool in the script bound to the prefab (assuming it is nodePrefab.ts) node = this.nodePools.get(this.nodePools);
}else{
	 // If there is no idle object, create it through the prefab node = cc.instantiate(this.prefab);
}
// Mounting to the parent node is equivalent to manual drag and drop mounting this.node.addChild(node);

Step 3: Return the node after use

// Assume this is the prefab script nodePrefab.ts script mentioned above nodePools:cc.NodePool = null;
// After taking out the node in the object pool through node = this.nodePools.get(this.nodePools); above, define an object pool in the prefab script to receive the object pool passed in through get above/*So that when nodePool.get() is used to get the node,
The reuse method in the prefab script nodePrefab.ts will be called to complete the registration of the click event.
In addition, cc.NodePool.get() can pass in any number of parameters of any type, and these parameters will be passed to the reuse method as is*/
// All we need to do is implement a reuse system callback method reuse(EnemyPools:cc.NodePool) {
 		// Get the management class instance passed in get this.EnemyPools = EnemyPools;
 }
 
// Write a function to recycle objects hit () {
	// Check if the object pool exists if(this.nodePools){
    	// Put the current node back into existence this.nodePools.put(this.node);
    }else{
    	// Otherwise destroy the node directly this.node.destroy();
    }
}

2. Create some nodes in advance that need to be displayed at specific times

Such as prompt box

 // Create a prefab to mount the defined prefab in the property inspector @property(cc.Prefab)
  testPrefab:cc.Prefab = null;
	
	// When you need to display this node, just copy the prefab creation as above let node = cc.instantiate(this.testPrefab);
	// Mount to the parent node this.node.addChild(node);
    

The above are all mounted, and the following uses a dynamic loading method, so that it can be loaded without using @property (cc.Prefab) such a mounting method.

// Because the callback function below cannot use this, a variable must be defined to pass into this
let m_this = this;
/* Use cc.loader.loadRes to dynamically load Prefab. First, create a resources folder under the assets folder, and then put the prefab resources below. The first parameter is the absolute path of the prefab under resources, so that the prefab will be obtained in the prefab parameter of the second function type parameter*/
[cocos documentation official website](https://docs.cocos.com/creator/manual/zh/scripting/load-assets.html?h=assets)
cc.loader.loadRes("assets/OptionBox", function (err, prefab) {
if(!prefab){
    cc.log("prefab is empty");
}
var newNode = cc.instantiate(prefab);
if(!newNode){
    cc.log("node is empty");
}
// Add as a child node of the current node m_this.node.addChild(newNode);

The above are two common solutions for using prefabs. For example, the first method is used to create enemies and bullets in batches. The second method can also be made into a prefab in scenarios where it is used repeatedly or prompt boxes triggered by specific situations.

The above is a detailed explanation of the cocoscreater prefab. For more information about cocoscreater prefab, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Detailed explanation of making shooting games with CocosCreator
  • How to draw a cool radar chart in CocosCreator
  • Detailed explanation of CocosCreator MVC architecture
  • Detailed explanation of CocosCreator message distribution mechanism
  • CocosCreator Getting Started Tutorial: Network Communication
  • How to create WeChat games with CocosCreator
  • Detailed explanation of how CocosCreator system events are generated and triggered
  • How to use a game controller in CocosCreator
  • Detailed explanation of CocosCreator Huarongdao digital puzzle
  • Detailed explanation of the fish school algorithm in CocosCreator game
  • Detailed explanation of CocosCreator optimization DrawCall
  • CocosCreator implements skill cooling effect
  • Python implements simple socket communication example code
  • Steps to build a real-time log tracker using Python and websocket
  • Java implements a simple multi-person chat room through Socket
  • How to use http and WebSocket in CocosCreator

<<:  MySQL 5.7 installation-free configuration graphic tutorial

>>:  How to dynamically add a volume to a running Docker container

Recommend

Summary of common functions and usage methods of WeChat applet development

Here, I have mainly sorted out some commonly used...

Click the toggle button in Vue to enable the button and then disable it

The implementation method is divided into three s...

JavaScript Factory Pattern Explained

Table of contents Simple Factory Factory Method S...

Implementation of interactive data between QT and javascript

1. Data flows from QT to JS 1. QT calls the JS fu...

Solve the splicing problem of deleting conditions in myBatis

I just learned mybatis today and did some simple ...

How to create a virtual environment using virtualenv under Windows (two ways)

Operating system: windowns10_x64 Python version: ...

Summary of important mysql log files

Author: Ding Yi Source: https://chengxuzhixin.com...

Theory: The two years of user experience

<br />It has been no more than two years sin...

jQuery plugin to achieve code rain effect

This article shares the specific code of the jQue...

Database backup in docker environment (postgresql, mysql) example code

Table of contents posgresql backup/restore mysql ...

JavaScript realizes the drag effect of modal box

Here is a case of modal box dragging. The functio...

The difference between ENTRYPOINT and CMD in Dockerfile

In the Docker system learning tutorial, we learne...

Summary of CSS3 practical methods (recommended)

1. Rounded border: CSS CodeCopy content to clipbo...