Cocos2d-x的UI是按照树形结构组织的。
大家学过数据结构的话 就知道 什么是树了。
树只有一个 根节点,根节点没有父节点,其他节点都有父节点和子节点,而叶子节点没有子节点,叶子节点就是指没有子节点的节点。
在这里父和子 都是相对的。
我们知道树结构的遍历有3种方式,说是遍历 就是把每个节点找个遍的意思,前序遍历,中序遍历,后序遍历。
所谓的前,中,后指的是根节点,先遍历根节点就是前,后遍历就是最后查找根节点,中序遍历就是中间遍历。
所以 前序遍历的话 就是 0,-1, -3,3,2,-4, 4
中序遍历的话就是-3,-1,0,-4, 2, 4
后序遍历就是-3, 3, -1 -4, 4, 2, 0
而我们cocos2dx采取的是中序遍历。
绘制UI的时候需要UI的坐标,颜色,弯曲等。
绘制UI需要的坐标是世界坐标。但我们提供的是本地坐标系,所以要转换成世界坐标系。要使用变换矩阵。提供给shader。
这里绘制使用的是visit函数。
void Node::visit()
{
auto renderer = Director::getInstance()->getRenderer(); //获得渲染器
Mat4 parentTransform = Director::getInstance()->getMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); //获得世界坐标系的变换矩阵
visit(renderer,parentTransform,true); //渲染
}
void Node::visit(Renderer* renderer,const Mat4 &parentTransform,uint32_t parentFlags)
{
// quick return if not visible. children won't be drawn.
if (!_visible)
{
return;
}
uint32_t flags = processParentFlags(parentTransform,parentFlags); //这里把processParentFlags当做参数传入了函数,肯定要处理,看到红色参数,在这里处理了。
// IMPORTANT:
// To ease the migration to v3.0,we still support the Mat4 stack,
// but it is deprecated and your code should not rely on it
Director* director = Director::getInstance();
director->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); //push
director->loadMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW,_modelViewTransform);
bool visibleByCamera = isVisitableByVisitingCamera();
int i = 0;
if(!_children.empty())
{
sortAllChildren();
// draw children zOrder < 0
for( ; i < _children.size(); i++ )
{
auto node = _children.at(i);
if ( node && node->_localZOrder < 0 )
node->visit(renderer,_modelViewTransform,flags); //递归
else
break;
}
// self draw
if (visibleByCamera)
this->draw(renderer,flags);
for(auto it=_children.cbegin()+i; it != _children.cend(); ++it)
(*it)->visit(renderer,_modelViewTransform,flags); //递归
}
else if (visibleByCamera)
{
this->draw(renderer,flags);
}
director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); //pop
// FIX ME: Why need to set _orderOfArrival to 0??
// Please refer to https://github.com/cocos2d/cocos2d-x/pull/6920
// reset for next frame
// _orderOfArrival = 0;
}
uint32_t Node::processParentFlags(const Mat4& parentTransform,uint32_t parentFlags)
{
if(_usingNormalizedPosition) {
CCASSERT(_parent,"setNormalizedPosition() doesn't work with orphan nodes");
if ((parentFlags & FLAGS_CONTENT_SIZE_DIRTY) || _normalizedPositionDirty) {
auto s = _parent->getContentSize();
_position.x = _normalizedPosition.x * s.width;
_position.y = _normalizedPosition.y * s.height;
_transformUpdated = _transformDirty = _inverseDirty = true;
_normalizedPositionDirty = false;
}
}
uint32_t flags = parentFlags;
flags |= (_transformUpdated ? FLAGS_TRANSFORM_DIRTY : 0);
flags |= (_contentSizeDirty ? FLAGS_CONTENT_SIZE_DIRTY : 0);
if(flags & FLAGS_DIRTY_MASK)
_modelViewTransform = this->transform(parentTransform); //转换
_transformUpdated = false;
_contentSizeDirty = false;
return flags;
}
Mat4 Node::transform(const Mat4& parentTransform)
{
Mat4 ret = this->getNodeToParentTransform();
ret = parentTransform * ret;
return ret;
}
这里没有涉及颜色和弯曲效果,只与位置有关。