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. browse-agent type and curl post

    https://www.jb51.net/web/499127.html http://www.atool.org/useragent.php  query for type 用Curl测试POST ...

  2. 原码,补码,反码的概念及Java中使用那种存储方式

    原码,补码,反码的概念及Java中使用那种存储方式: 原码:原码表示法是机器数的一种简单的表示法.其符号位用0表示正号,用:表示负号,数值一般用二进制形式表示 补码:机器数的补码可由原码得到.如果机器 ...

  3. linux系统操作笔记

    tar  cvf  test.tar  /etc gzip  test.tar bzep2 test.tar 归档压缩 tar czf  test.tar.gz  /etc vi  /etc/test ...

  4. 流计算技术实战 - CEP

    CEP,Complex event processing Wiki定义 "Complex event processing, or CEP, is event processing that ...

  5. MDK5如何新建一个工程

    1.首先新建一个文件夹,然后在子文件夹下新建四个子文件,子文件分别为:CORE.HALLIB.OBJ.USER 2.打开MDK5,new一个工程,然后选择开发板芯片的型号 3.在这四个文件中分别添加相 ...

  6. 使用Python + Selenium破解滑块验证码

    在前面一篇博客<使用 Python + Selenium 打造浏览器爬虫>中,我介绍了 Selenium 的基本用法和爬虫开发过程中经常使用的一些小技巧,利用这些写出一个浏览器爬虫已经完全 ...

  7. Python创建第一个django应用

    在helloworld工程的基础上,我们准备创建第一个基于web的django应用,把这个应用名字命名为Guest   1.首先,是如何创建这个应用包,当然第一选择我们可以进入到cmd中,执行如下命令 ...

  8. 使用Git,如何忽略不需要上传的文件(配置文件)

    步骤1:在目录下,选择GIt Bash Here 2.输入命令 : git update-index --assume-unchanged 文件名 3.再输入指令 git  status 查看修改文件 ...

  9. python全栈开发day10

    day10知识点总结 while循环补充: continue,终止当前循环,开始下一次循环 break,终止所有循环 pycharm 技巧1.setting 中搜索 mouse 设置鼠标滚轮 改变字体 ...

  10. vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

    引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...