cocos Creator 3.2 关于 NodePool 对象池的应用- （弹出框）

1：NodePool 作用

NodePool 是用于管理节点对象的对象缓存池。它可以帮助您提高游戏性能，适用于优化对象的反复创建和销毁以前 cocos2d-x 中的 pool 和新的节点事件注册系统不兼容，因此请使用 `NodePool` 来代替。

新的 NodePool 需要实例化之后才能使用，每种不同的节点对象池需要一个不同的对象池实例，这里的种类对应于游戏中的节点设计，一个 prefab 相当于一个种类的节点。

在创建缓冲池时，可以传入一个包含 unuse, reuse 函数的组件类型用于节点的回收和复用逻辑。

2: 一些常见的用例

1.在游戏中的子弹（死亡很快，频繁创建，对其他对象无副作用）

2.糖果粉碎传奇中的木块（频繁创建）。

等等....

3 ：应用

以Prefab为例首先了解instantiate的作用：创建的一个perfab资源并不是我要的Node 节点，想要perfab应用到场景中必须通过instantiate实例化返回一个节点

/*** @zh 从 Prefab 实例化出新节点。* @en Instantiate a node from the Prefab.* @param prefab The prefab.* @returns The instantiated node.* @example* ```ts* import { instantiate, director } from 'cc';* // Instantiate node from prefab.* const node = instantiate(prefabAsset);* node.parent = director.getScene();* ```*/export function instantiate(prefab: Prefab): Node;

动态获取资源动态获取到resources/p_perfabs 下面的所有 perfab

代码如下：

getPerfabList() {this.StorePerfab = new NodePool();let that: any = this;resources.loadDir("p_perfabs", function (err, assets) {if (err) returnassets.map((t: any) => that.StorePerfab.put(instantiate(t)))});}

接下来讲一个使用场景：

在游戏中有很多的弹出框，例如：游戏设置，游戏结束，游戏gameover ，通关等。弹出框无处不在，如何管理这些弹出框呢。就用到了NodePool 节点缓存，

逻辑如下图：

1 创建一个弹窗perfab 起名为 GameOverUI；

2 创建gameOverUI.ts ， gameOverUI加载组件gameover.ts；

如图

代码如下：gameOverUI.ts


import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;@ccclass('gameOverUI')
export class gameOverUI extends Component {start() {// [3]}close() {this.node.active = false;}show() {this.node.active = true;}}

3：创建UIManage.ts

import { _decorator, Component, Node } from 'cc';
import PerfabLoop from './PerfabLoop'
const { ccclass, property } = _decorator;@ccclass('UIManage')
export class UIManage extends Component {PerfabLoopObj?: any = PerfabLoop.instance;static _instance: UIManage;start() {console.log(PerfabLoop.instance.StorePerfab)// [3]}/*** 全局定义唯一实例*/static get instance() {if (this._instance) {return this._instance;}this._instance = new UIManage();// this._instance.getPerfabList()return this._instance;}/*** 显示弹窗* @param resUrl 资源路径* @param compontentName 组件名称* @param e 当前this*/showDialog(resUrl: any, compontentName: string, e: any) {this.PerfabLoopObj.getNode({ resUrl, compontentName, e })}/*** 隐藏弹窗*/hideDialog(resUrl: any, compontentName: string, e: any) {this.PerfabLoopObj.closeNode({ resUrl, compontentName, e })}
}

4:创建PerfabLoop.ts ：节点池

import { _decorator, Component, Node, NodePool, resources, Prefab, instantiate } from 'cc';
const { ccclass, property } = _decorator;
interface Props {resUrl: string;compontentName: string;e: any;
}
@ccclass('PerfabLoop')
export default class PerfabLoop extends Component {public StorePerfab = new NodePool();static _instance: PerfabLoop;private props: Props = {resUrl: "",compontentName: "",e: null}/*** 全局定义唯一实例*/static get instance() {if (this._instance) {return this._instance;}this._instance = new PerfabLoop();return this._instance;}getNode(props: Props) {this.props = props;const { resUrl, compontentName, e } = props;this.isCheckNode(resUrl, compontentName, e)}closeNode(props: Props) {this.props = props;const { compontentName, e } = props;e.getComponentInChildren(compontentName)?.hide();}/*** 检查Node节点是否被加载过* @param resUrl * @param compontentName * @param e */isCheckNode(resUrl: any, compontentName: string, e: any) {console.log('====this.StorePerfab===', this.StorePerfab)const Flag = this.StorePerfab?._pool.filter((t: any) => t.name == compontentName).length > 0 ? true : falseif (Flag) {this.showNode(e)} else {this.getResource(resUrl, e)}}/*** 显示弹窗*/showNode(e: any) {const { compontentName } = this.props;e.getComponentInChildren(compontentName).show();}hideNode(e: any) {const { compontentName } = this.props;e.getComponentInChildren(compontentName).hide();}/*** @param resUrl 资源路径* @param callback 加载成功之后的回掉*/getResource(resUrl: string, e: any) {let that: any = this;resources.load(resUrl, Prefab, (err, prefab) => {if (!prefab) {return}const newNode = instantiate(prefab);that.StorePerfab.put(newNode)e.node.addChild(newNode)});}
}

5:应用弹出层

 /*** 显示弹窗* @param resUrl 资源路径* @param compontentName 组件名称* @param this 当前this*/  this.UIManageStr.showDialog('dialogPerfab/gameOverUI', 'gameOverUI', this)