Cocos场景遍历与渲染

Cocos场景遍历与渲染

声明:本文主要分析cocos2d-x-3.12的代码,该部分代码在后续版本有一些变化

场景遍历

Cocos在绘制场景时,会遍历当前运行的场景runningScene场景中的所有元素,遍历完成后会生成一个OpenGL绘制命令的队列,然后调用Renderer::render()函数绘制所有元素。遍历场景的调用栈如下。

 

Node::visit函数

voidNode::visit(Renderer* renderer, constMat4 &parentTransform, uint32_tparentFlags)
{
    // quick return if not visible. children won't be drawn.
    if (!_visible)
    {
        return;
    }
 
    uint32_tflags = processParentFlags(parentTransform, parentFlags);
 
    // IMPORTANT:
    // To ease the migration to v3.0, we still support theMat4 stack,
    // but it is deprecated and your code should not rely onit
    _director->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
    _director->loadMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW, _modelViewTransform);
    
    boolvisibleByCamera = isVisitableByVisitingCamera();
 
    inti = 0;
 
    if(!_children.empty())
    {
        sortAllChildren();
        // draw children zOrder < 0
        for( ; i < _children.size(); i++ )
        {
            autonode = _children.at(i);
 
            if (node && node->_localZOrder < 0)
                node->visit(renderer, _modelViewTransform, flags);
            else
                break;
        }
        // self draw
        if (visibleByCamera)
            this->draw(renderer, _modelViewTransform, flags);
 
        for(autoit=_children.cbegin()+i; it!=_children.cend(); ++it)
            (*it)->visit(renderer, _modelViewTransform, flags);
    }
    elseif (visibleByCamera)
    {
        this->draw(renderer, _modelViewTransform, flags);
    }
 
    _director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
    
    // FIX ME: Why need to set _orderOfArrival to 0??
    // Please refer tohttps://github.com/cocos2d/cocos2d-x/pull/6920
    // reset for next frame
    // _orderOfArrival = 0;
}



该函数主要步骤:

1.      判断几点是否可见,如果不可见则直接退出。所以如果节点不可见,则子节点也不可见。

2.      判断元素是否有孩子节点,

如果没有则调用Node::draw函数生成绘制命令。

如果存在子节点,则会先对所有子节点排序,然后先遍历_localZOrder小于0的子节点,在调用自己的draw函数,最后遍历localZOrder大于等于0的节点。

所以如果localZOrder的值小于0,则会绘制在父节点的下面,如果localZOrder大于等于0,则会绘制在父节点的上面。

 

子节点排序

排序函数

voidNode::sortAllChildren()
{
    if (_reorderChildDirty)//只有当子节点有改变时才会排序
    {
        std::sort(std::begin(_children), std::end(_children), nodeComparisonLess);
        _reorderChildDirty = false;
    }
}

排序比较方式

boolnodeComparisonLess(Node* n1, Node* n2)
{
    return( n1->getLocalZOrder() < n2->getLocalZOrder() ||
           ( n1->getLocalZOrder() == n2->getLocalZOrder() && n1->getOrderOfArrival() < n2->getOrderOfArrival() )
           );
}

排序会先比较localZOrder的值,小值排在前面。如果localZOrder的值相等,则会比较OrderOfArrival的值。OrderOfArrival是节点插入父节点的顺序,越先插入的节点值会更小,后插入的节点值会更大。所以localZOrder相等时后插入的节点会显示在先插入节点的前面。

 

OrderOfArrival的生成

Node::addChild函数内部会让子节点调用setOrderOfArrival(s_globalOrderOfArrival++)函数

s_globalOrderOfArrival是一个全局共享的值,起始为0,每次调用addChild,该值都会增加,越后面调用值越大。

 

场景绘制

 

Scene::render函数中,调用visit函数遍历完节点生成所有节点的绘制命令后,会调用renderer->render()函数,在Renderer::render函数内部,会先对绘制命令进行排序,依据Node::_globalZOrder的值从小到达排序,然后再将命令传给OpenGL绘制图像。具体流程如下:

因为OpenGL执行绘制命令,会根据接的的globalZOrder排序,所以globalZOrder也可以控制节点的层级。且globalZOrder是调整节点在整个场景中的层级。

 

节点层级的控制

影响节点层级一共有三个值globalZOrderlocalZOrderorderOfArrival,都是值越大越靠前。三个值的对层级影响的优先顺序为globalZOrderlocalZOrderorderOfArrival。当globalZOrder的值大时,则会忽略localZOrderorderOfArrivalglobalZOrder值大则排在前面。

 

 

orderOfArrival

orderOfArrival是节点添加到父节点时会被设置,child->setOrderOfArrival(s_globalOrderOfArrival++)。所有节点的orderOfArriva都是通过s_globalOrderOfArrival值累加得到的。s_globalOrderOfArrivalNode节点的一个静态变量,初始值为1intNode::s_globalOrderOfArrival = 1;)。每次有调用addChild函数,则该值会加1,所以所有节点的该值都不一样。

 

localZOrder

localZOrder在节点的构造函数中设置为0,默认值为0。可以通过函数

voidNode::_setLocalZOrder(intz)设置

localZOrderorderOfArrival都只是在遍历子节点时排序使用,排序比较时会先比价LocalZOrder的值,如过不相等则返回相应的比较结果,如果相等则会比较orderOfArrival的值。因为两个值都只是用在子节点排序上,所以localZOrderorderOfArrival只会影响子节点之间的排序,所以如果两个节点的父节点不同则无法通过localZOrderorderOfArrival控制层级。

 

对于子节点和父节点的遍历顺序:

LocalZOrder小于0的子节点à父节点à LocalZOrder大于等于0的子节点。

所以LocalZOrder小于0会绘制在父节点下面。

 

globalZOrder

globalZOrder在节点的构造函数中设置为0,默认值为0globalZOrder可以通过函数voidNode::setGlobalZOrder(floatglobalZOrder)设置。

globalZOrder是在场景绘制命令生成后,会根据globalZOrder对节点的绘制命令排序。所以globalZOrder是对场景全局节点的层级进行控制的,不管节点的父节点是谁,只要globalZOrder的值大,则绘制会更靠前。globalZOrder只是控制一个场景的节点,不可跨场景。

 

层级控制流程

 

 

 

<think>我们正在讨论CocosCreator的渲染流程和机制。根据之前的引用,我们知道节点是CocosCreator中所有可视化对象的基础,节点可以包含多个组件,如渲染组件、相机组件等。节点之间形成层级关系,构成游戏场景CocosCreator的渲染流程大致如下:1.**场景遍历**:引擎从场景根节点开始,按照节点树进行遍历(通常是深度优先遍历),收集所有需要渲染的节点。每个节点上的渲染组件(如Sprite、Label等)会提供渲染数据(如顶点、纹理等)。2.**渲染排序**:收集到的渲染数据会根据一定的规则进行排序。排序规则包括:-节点的渲染层级(Layer)-节点的Z深度(用于2D的ZIndex或3D的Z值)-材质(Material)的渲染队列(RenderQueue)排序的目的是为了减少渲染状态切换,提高渲染效率。3.**渲染批次合并(Batch)**:为了减少DrawCall,引擎会尝试将使用相同材质和纹理的多个渲染数据合并成一个批次(Batch)。这样,原本需要多次DrawCall的渲染就可以通过一次DrawCall完成。4.**相机裁剪**:每个相机(Camera)会根据其可见性(Visibility)设置和视口(Viewport)设置,对渲染节点进行裁剪。只有位于相机视口内且可见层级(Layer)相机Visibility匹配的节点才会被渲染。5.**渲染命令提交**:经过排序和批次合并后的渲染数据,会被转换成渲染命令(RenderCommand),并提交到渲染队列中。渲染队列根据相机的优先级(Priority)进行排序,优先级高的相机先渲染。6.**执行渲染**:渲染引擎(如WebGL、OpenGLES)执行渲染命令,将图像绘制到帧缓冲区(FrameBuffer)上。如果是多个相机,可能会渲染到多个渲染纹理(RenderTexture)上,然后通过后期处理(如合成)输出到屏幕。在整个流程中,CocosCreator使用了一种基于组件的架构。每个节点可以挂载多个组件,其中渲染组件(如Sprite、Label、ParticleSystem等)负责提供渲染数据。相机组件(Camera)控制渲染的视角和视口。关于性能优化,我们可以注意以下几点:-合理使用节点层级,避免过深的节点树。-尽量使用相同的材质和纹理,以促进批次合并。-使用动态合图(DynamicAtlas)将多个小纹理合并成大纹理,从而增加批次合并的机会。-合理设置节点的ZIndex和Layer,以便正确排序和裁剪。下面我们根据引用内容补充一些细节:-引用[2]提到相机组件的Priority和Visibility:Priority决定相机的渲染顺序,Visibility决定相机可以看到哪些层级的节点。-引用[3]提到动画帧率:虽然渲染流程没有直接关系,但动画的更新也会影响渲染的内容。通常动画的更新是在渲染前进行的。以上是CocosCreator渲染流程的基本介绍。如果需要更深入的细节,可以参考官方文档或相关源码。§§相关问题§§1.CocosCreator中如何优化渲染性能?2.相机组件在渲染流程中具体起到什么作用?3.什么是渲染批次合并?它是如何减少DrawCall的?4.动态合图(DynamicAtlas)是什么?它是如何工作的?</think>### Cocos Creator 渲染流程详解 Cocos Creator 的渲染流程是基于**节点-组件**架构实现的,核心流程如下: #### 1. **场景遍历渲染数据收集** - 引擎从场景根节点开始深度优先遍历节点树 - 收集所有包含**渲染组件**的节点(如 `Sprite`、`Label`、`MeshRenderer`) - 每个渲染组件提供顶点数据、纹理、材质等信息 - *引用[1]:节点是可视化对象的基础,通过层级关系构成场景结构*[^1] #### 2. **渲染排序批次合并** ```mermaid graph LR A[渲染数据] --> B[按层级排序] B --> C[按Z深度排序] C --> D[按材质ID排序] D --> E[批次合并] ``` - **排序规则**: 1. 节点层级(Layer)优先级 2. Z轴深度(2D为ZIndex,3D为WorldZ) 3. 材质/纹理ID - **批次合并**:相同材质/纹理的渲染
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值