1.简介

节点(cc.Node)是渲染的必要组成部分。所有需要在游戏场景中显示的内容都必须是节点或者依附于节点之上。节点负责控制显示内容的位置、大小、旋转、缩放、颜色等信息。

2.节点属性

1: name: 获取节点的名字
2: active: 设置节点的可见性;
3: position: 相对坐标,参照物是父亲节点;
4: rotation: 旋转,顺时针为正, 数学逆时针为正;
5: scale: 缩放;
6: anchor: 锚点, 左下角(0, 0), 右上角(1, 1) 可以超过这个范围可以
7: Size: 大小
8: Color: 环境颜色;
9: Opacity: 透明度,
10: Skew: 扭曲;
11: Group: 分组;
12: parent: 父亲节点的cc.Node;
13: children/childrenCount: 孩子节点的数组;
14: tag : 节点标签;

更详细的可以参考官方的API文档,连接地址:https://docs.cocos.com/creator/api/zh/classes/Node.html    其中可以观看cc.Node的具体有哪些属性和方法。

属性检查器上显示如下图:

 2.1 位置(Position):指定了节点锚点所在的相对坐标,由两个属性X和Y组成。

2.2 旋转(Rotation):指以锚点为中心,旋转属性只有一个值,即旋转角度,单位为度(°)。

2.3 缩放(Scale):由两个属性X和Y组成,代表横向缩放和纵向缩放,默认值为1,即100%。

2.4 锚点(Anchor):是节点位置的参照点,也是自身旋转、缩放的基准点。同时锚点也是该节点的子节点的坐标原点。取值【0,0】~【1,1】,左下角为【0,0】,右上角为【1,1】,中心为【0.5,0.5】。

2.5 尺寸(Size):本节点的大小,对节点自身没有太多影响,但是会影响节点上的组件。比如常见的精灵组件会根据节点尺寸对渲染图片进行缩放。

2.6 颜色(Color):节点的颜色,影响本节点及其所属组件的渲染,以及其子节点和其他所属组件的渲染。在不透明的情况下,设置节点颜色会直接叠加到节点与所属组件的渲染效果上,并影响子节点。

 2.7 透明度(Opacity):节点的透明度。取值0~255,0为透明,255为完全不透明,128位半透明。会影响本节点(包括子节点)及其所属组件的渲染。

2.8 倾斜值(Skew):节点的倾斜角度,斜向拉伸,0的效果与180一样。

2.9 分组(Group):任意字符串,不可重复。节点分组是为了属性判断和物理碰撞。

3.子节点

每个节点都有自己的父节点(parent),父节点与子节点(child)以一对多的形式成树形结构(即场景树)。最根部的节点以根节点(cc.Canvas 画布 Cocos Creator默认根节点)为自己的父节点。通常用户自定义节点都会在画布的子节点或者更深层的子节点。

子节点的节点属性受父节点的属性影响:位置、旋转和缩放均是相对于父节点的锚点为原点的(具体详见第11节点坐标会讲到本地坐标和相对坐标之间的转换)。

4.节点与渲染

2D世界不存在近大远小,但是需要明确其遮挡关系。Cocos Creator通过渲染顺序来处理遮挡问题,后渲染的图形会挡住先渲染的图形,下面介绍如何控制渲染与遮挡。

4.1 同级别遮挡

4.2 不同级别遮挡

5.组件脚本与场景节点关联

Cocos Creator通过把组件脚本添加到场景节点中的方式,把可视化编辑器和代码联系到一起。

5.1 组件脚本关联节点:首先选中希望添加此组件的场景节点,在“属性检查器”中单击“添加组件”-->“添加用户脚本组件”-->选择自定义的组件脚本;也可以直接选择脚本按鼠标左键拖拽到指定的节点“属性检查器“上即可。

5.2 删除关联: 在属性检查器中,选择指定的脚本组件,单击组件右上角的图标,选择“Remove”即取消当前节点与组件的关联

6.代码获取其他节点

脚本开发是游戏设计中重要的一环,可以参考第五节Cocos Creator 脚本简介 内容。

7.代码创建和销毁节点

<7>Cocos Creator 节点 cc.Node的更多相关文章

  1. Cocos Creator 节点

    //节点从创建到节点挂载一些过程 1.JS中节点使用: a.创建:在properties中定义节点(可能包括节点的默认值和类型): b.挂载:在相应的方法中获取节点获取相应节点,挂载到父元素 例== ...

  2. <4>Cocos Creator基本概念(场景树 节点 坐标 组件 )

    1.场景树 Cocos Creator是由一个一个的游戏场景组成,场景是一个树形结构,场景由 有各种层级关系的节点(下一节有具有介绍)组成: 如创建一个HelloWorld的默认项目NewProjec ...

  3. <8>Cocos Creator组件开发cc.Component

    1.组件简介 组件是Cocos Creator的主要构成,渲染(场景显示内容).逻辑.用户输入反馈.计时器等等几个方面都是由组件完成的.根据Cocos Creator的总体架构,组件和节点配合完成游戏 ...

  4. Cocos Creator学习目录

    目录 安装和启动 文件结构 编辑器基础 基本概念 (场景树 节点 坐标 组件 ) Cocos Creator 脚本简介 Cocos Creator调试 节点 cc.Node 组件开发cc.Compon ...

  5. Cocos Creator 入门

    Cocos Createor 资源 略 场景 节点树 节点与组件 坐标系 脚本 组件声明,生命周期回调 var Component = cc.Class({ // 用于序列化,可省略 name: 's ...

  6. cc.Node—场景树

    对于cc.Node我分了四个模块学习: 1.场景树,2.事件响应,3.坐标系统,4.Action的使用:在此记录经验分享给大家. 场景树 1: creator是由一个一个的游戏场景组成,通过代码逻辑来 ...

  7. Cocos Creator cc.Node.点击事件

    触摸事件 1.触摸事件的类型:START触摸启动,MOVED移动,ENDED弹起来,CANCEL取消; ENDED和CANCEL区别是ENDED物体内弹起来,CANCEL是在物体外范围弹起. 2.监听 ...

  8. Cocos Creator学习二:查找节点和查找组件

    1.目的:只有通过方便的获取节点对象以及组件,才能较好的进行逻辑控制. 2.通过 cc.find(节点全路径名称字符串) 获取节点. 3.通过getComponent获取组件(注意一个是类型,一个是类 ...

  9. cocos creator Touch事件应用(触控选择多个子节点)

    最近参与了cocos creator的研究,开发小游戏,结果被一个事件坑得不行不行的.现在终于解决了,分享给大家. 原理 1.触控事件是针对节点的 2.触控事件的冒泡,是一级一级往上冒泡,中间可以阻止 ...

随机推荐

  1. js 正则判断字符串下划线的长度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 如何使用Beyond Compare 对比差异文件【制作Patch(补丁包)文件】

    场景:研发部的代码从SVN变更至GIt,通过Jenkins每天自动生成程序包. 如需要获取单独的程序包更新,而不是整个程序包覆盖更新,这时候就需要用到Beyond Compare 对比工具 操作步骤1 ...

  3. bzoj 2563 [2012国家集训队Round 1 day2] 阿狸和桃子的游戏 贪心

    正解:贪心 解题报告: 链接在这儿! 知道解法之后会jio的好像很简单的样子……其实挺难想到的QAQ 不过大佬讲了方法之后还是懂了 有一个很神仙的想法就是,你可以理解为每个点周围的边都有半个是自己的, ...

  4. laravel dingo/api添加jwt-auth认证

    前面我们学了laravel dingo/api创建简单的api,这样api是开放给所有人的,如何查看和限制api的调用呢?可以用jwt-auth来验证,JSON Web Token Authentic ...

  5. 我想要得那块牌—记烟台大学第一届"ACM讲堂"

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sr19930829/article/details/26812621           2014年 ...

  6. 并发编程---互斥锁---互斥锁与join的区别

    互斥锁 互斥锁:就是把多个进程并发,修改成一块共享数据的操作变成串行,保证是一个一个来修改的. 缺点:效率低,加锁过程复杂 优点:增加了安全性 from multiprocessing import ...

  7. 封装||property

    封装 封装:主要是指在类的定义阶段将,以__开头的属性名进行变形..例如:__name ==> _People__name 封装的主要特点: 1.在类外部无法直接__name,想要在外部调用可以 ...

  8. vuex操作

    import Vuex from 'vuex' //引入Vue.use(Vuex) //加载到Vue中//创建一个数据存储对象var store=new Vuex.Store({ //state可以当 ...

  9. git flow 使用步骤

    Mac安装git-flow:brew install git-flow 克隆新代码:git clone git@gitlab.xxx.cn:abc/test.git 切换到远程的develop分支(很 ...

  10. 【UML】-NO.43.EBook.5.UML.1.003-【UML 大战需求分析】- 状态机图(State Machine Diagram)

    1.0.0 Summary Tittle:[UML]-NO.43.EBook.1.UML.1.003-[UML 大战需求分析]- 状态机图(State Machine Diagram) Style:D ...