Scene场景树结构里的node节点和场景内的层的关系,以及层节点的渲染顺序和触摸响应顺序

场景图(Scene Graph)是一种安排场景内对象的数据结构,它把场景内所有的 节点(Node) 都包含在一个 树(tree) 上。(场景图虽然叫做"图",但实际使用一个树结构来表示)。

虽然场景图是一个树结构,你就能遍历它,Cocos2d-x 使用 中序遍历,先遍历左子树,然后根节点,最后是右子树。

z-order 为负的元素,z-order 为负的节点会被放置在左子树,非负的节点会被放在右子树。实际开发的过程中,你可以按照任意顺序添加对象,他们会按照你指定的 z-order 自动排序。

 渲染时 z-order 值大的节点对象会后绘制,值小的节点对象先绘制。如果两个节点对象的绘制范围有重叠,z-order 值大的可能会覆盖 z-order 值小的。

    上面说到的场景树是包含了场景内的所有节点,这里不得不说到层(Layer),Layer类也继承自node,所以层也是场景内的节点,只是不一定像其他节点对象如精灵/障碍物/菜单这些直接显示出来可以看到,它更像一个逻辑上的父容器,起到当前层包含某些对象的作用,下一层又包含其他对象,这样就区分了两个层上面的对象的事件响应顺序和渲染顺序。

     场景是层的容器,一个游戏场景可以包含许多层(Layer),在层中我们可以加入游戏的一些元素,构成丰富的游戏世界,。比如游戏中的文本标签或者其他人物,怪物等游戏元素都是被层包含,另外在层中我们可以设置游戏元素的属性,比如玩家位置,方向和大小;设置游戏元素的动作,跳、跑、蹲等。

层中最常见的就是触摸监听事件,还有对应的触摸函数。

auto red = LayerColor::create(Color4B(255, 0, 0, 255));//RGBA 颜色数据(红)

red->setContentSize(CCSizeMake(120, 80));//设置大小

red->setPosition(Vec2(50, 100));//设置坐标

addChild(red, 10);//添加到场景并设置绘制层的顺序

 


auto green = LayerColor::create(Color4B(0, 255,0, 255));//RGBA 颜色数据(绿)

green->setContentSize(CCSizeMake(120, 80));//设置大小

green->setPosition(Vec2(100, 150));//设置坐标

addChild(green, 30);//添加到场景并设置绘制层的顺序

 


auto blue = LayerColor::create(Color4B(0, 0, 255, 255));//RGBA 颜色数据(蓝)

blue->setContentSize(CCSizeMake(120, 80));//设置大小

blue->setPosition(Vec2(150, 200));//设置坐标

addChild(blue, 20);//添加到场景并设置绘制层的顺序

 

学习笔记6:图1.png

 通过三个图层的创建,我们可以了解到addchild的第二个参数,默认省略参数值为0,数字越大表示该层在最后加载(在最高一层),也就是在最上层显示,也就是最后绘制,所以绘制优先级低。一般背景层的参数值最小,最先绘制。相对而言,参数值越大表示越先被触摸,触摸优先级越大。  结合最开始场景树的概念,这里层的加载顺序和渲染顺序其实就是场景树节点的z-order值大小顺序,数值大的后渲染,所以覆盖了有重叠的先渲染的节点对象,所以按这逻辑也正好符合数值越大的层(其实就是节点)先被触摸先响应事件。

     大部分转自:https://www.byjth.com/biji/25.html

     

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤实现: 1. 在Vue组件引入antd的Tree组件。 2. 在数据定义不同场景需要展示的Tree节点数据。 3. 使用v-if或者v-show指令来控制不同场景Tree节点的展示。 4. 在切换场景时,切换数据节点数据即可。 下面是一个示例代码: ```html <template> <div> <el-radio-group v-model="currentScene" @change="onSceneChange"> <el-radio :label="'scene1'">场景1</el-radio> <el-radio :label="'scene2'">场景2</el-radio> <el-radio :label="'scene3'">场景3</el-radio> </el-radio-group> <div v-show="currentScene === 'scene1'"> <a-tree :tree-data="treeData1"></a-tree> </div> <div v-show="currentScene === 'scene2'"> <a-tree :tree-data="treeData2"></a-tree> </div> <div v-show="currentScene === 'scene3'"> <a-tree :tree-data="treeData3"></a-tree> </div> </div> </template> <script> import { Tree } from 'ant-design-vue'; export default { components: { 'a-tree': Tree }, data() { return { currentScene: 'scene1', treeData1: [ { title: 'Node 1', key: '1' }, { title: 'Node 2', key: '2' }, { title: 'Node 3', key: '3' }, ], treeData2: [ { title: 'Node A', key: 'A' }, { title: 'Node B', key: 'B' }, { title: 'Node C', key: 'C' }, ], treeData3: [ { title: 'Apple', key: 'apple' }, { title: 'Banana', key: 'banana' }, { title: 'Cherry', key: 'cherry' }, ] } }, methods: { onSceneChange(value) { this.currentScene = value; } } } </script> ``` 在上面的代码,我们首先导入了antd的Tree组件,然后在数据定义了三种不同的场景需要展示的Tree节点数据,然后使用v-show指令根据不同场景来展示不同的Tree结构。 最后,我们通过一个radio按钮来控制场景的切换,并在onSceneChange回调函数更新当前的场景值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值