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

Analysis of the solution to Nginx Session sharing problem

This article mainly introduces the solution to th...

How to use Vue to implement CSS transitions and animations

Table of contents 1. The difference between trans...

Example of using MySQL to count the number of different values ​​in a column

Preface The requirement implemented in this artic...

Common attacks on web front-ends and ways to prevent them

The security issues encountered in website front-...

HTML5+CSS3 coding standards

The Golden Rule No matter how many people are wor...

Examples of using the or statement in MySQL

1. The use of or syntax in MySQL, and the points ...

js learning notes: class, super and extends keywords

Table of contents Preface 1. Create objects befor...

Detailed explanation of the usage of the ESCAPE keyword in MySQL

MySQL escape Escape means the original semantics ...

Implementation of Nginx operation response header information

Prerequisite: You need to compile the ngx_http_he...

Five ways to achieve automatic page jump in HTML

In the previous article, we introduced three comm...

SVG button example code based on CSS animation

The specific code is as follows: <a href="...

Detailed explanation of Vue3 sandbox mechanism

Table of contents Preface Browser compiled versio...

A detailed introduction to the CSS naming specification BEM from QQtabBar

BEM from QQtabBar First of all, what does BEM mea...