服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 如何在CocosCreator中利用常驻节点做图层管理

如何在CocosCreator中利用常驻节点做图层管理

2022-03-02 16:24「已注销」 js教程

这篇文章主要介绍了如何在CocosCreator中利用常驻节点做图层管理,这些技巧非常实用,希望同学们看完,回去可以试一下

CocosCreator版本:2.3.4

一般游戏都有图层管理,比如

  • sceneLayer 场景层
  • panelLayer 弹框层
  • tipLayer   提示框层

cocos里的场景不是持久化的,每次切换都会自动destroy,如果在场景上放这些图层,那么每个scene都要放一遍?然后再获取,这样很麻烦。

加载场景使用的是cc.director.loadScene,scene的容器node貌似是director上的一个nodeActivator

如何在CocosCreator中利用常驻节点做图层管理

现在如果不考虑scene的容器或者cocos的顶层容器。我想一想两种图层管理的方法。

一、只有一个scene

整个游戏一个scene,就是游戏入口的scene,在这个scene上放sceneLayer等图层的node,这个入口scene相当于egret和laya的stage。

然后所有场景scene和弹框模块,都做成预制件prefab,每次显示都addChild到入口scene的相应图层上就行了。

如何在CocosCreator中利用常驻节点做图层管理

 二、使用常驻节点

比如我在场景1,放置sceneLayer等图层。为了方便显示,我每个图层加了个单色。

如何在CocosCreator中利用常驻节点做图层管理

常驻节点必须在根节点下,也就是和canvas同级。把3个图层设置为常驻节点。

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

然后切换场景,在新场景中,仍然可以显示并获取到sceneLayer等图层。

如何在CocosCreator中利用常驻节点做图层管理

onLoad(){
    console.log(cc.find("sceneLayer"));  //输出sceneLayer的cc.Node
}

利用常驻节点,我们可以在入口场景中放置sceneLayer等图层。用图层管理类保存引用。

三、最佳实践

图层管理类,单例

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;
    
}

在入口场景中设置常驻节点layer, 用图层管理类保存引用。以备之后使用。

@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");
    }
}

以上就是如何在CocosCreator中利用常驻节点做图层管理的详细内容,更多关于CocosCreator常驻节点做图层管理的资料请关注服务器之家其它相关文章!

原文链接:https://blog.csdn.net/qq_43287088/article/details/107351609

延伸 · 阅读

精彩推荐
  • js教程JavaScript实现拖动滑块拼图验证功能(html5、canvas)

    JavaScript实现拖动滑块拼图验证功能(html5、canvas)

    这篇文章主要介绍了JavaScript实现拖动滑块拼图验证(html5、canvas),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值...

    人生行者11272022-02-19
  • js教程微信小程序学习之自定义滚动弹窗

    微信小程序学习之自定义滚动弹窗

    这篇文章主要给大家介绍了关于微信小程序学习之自定义滚动弹窗的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考...

    юноша9282021-12-15
  • js教程js简单粗暴的发布订阅示例代码

    js简单粗暴的发布订阅示例代码

    这篇文章主要给大家介绍了js简单粗暴的发布订阅的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    威威威威vvvv6482022-01-06
  • js教程JS+CSS实现过渡特效

    JS+CSS实现过渡特效

    这篇文章主要为大家详细介绍了JS+CSS实现过渡特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Dr_空山3662021-12-23
  • js教程JavaScript实现切换多张图片

    JavaScript实现切换多张图片

    这篇文章主要为大家详细介绍了JavaScript实现切换多张图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    是M11782022-01-10
  • js教程原生JS实现京东查看商品点击放大

    原生JS实现京东查看商品点击放大

    这篇文章主要为大家详细介绍了原生JS实现京东查看商品点击放大,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    A.香辣鸡腿堡7312021-12-15
  • js教程three.js 实现露珠滴落动画效果的示例代码

    three.js 实现露珠滴落动画效果的示例代码

    这篇文章主要介绍了three.js 实现露珠滴落动画效果的示例代码,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    稀土掘金11342022-01-24
  • js教程JS+CSS实现动态时钟

    JS+CSS实现动态时钟

    这篇文章主要为大家详细介绍了JS+CSS实现动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    易点都不懒5092022-01-21