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. [skill] 补码

    转载,写的很好!额,我的数学. 原文:https://www.douban.com/note/223507364/ 关于补码,看过一些书籍和网文,基本都是在“求反加一”的方法.步骤上反复强调,而对于补 ...

  2. java 数组(二)

    public class ArrayDemo{ public static void main(String[] args){ int[] arr = {1,5,3,8,2,9,17,13}; get ...

  3. 筛选BETWEEN '2018-1-1 00:00:00' AND '2018-5-18 00:00:00'每日`status`='1'的记录总条数

    最近做了一个小任务,要求是:使用MySQL #筛选BETWEEN '2018-1-1 00:00:00' AND '2018-5-18 00:00:00'每日`status`='1'的记录总条数 SE ...

  4. 日志监控工具安装:windows上安装elk

    Elasticsearch + Kibana + logstash   for     windows   安装 https://blog.csdn.net/u011781521/article/de ...

  5. UIImage常用封装

    根据颜色返回图片,根据str返回颜色,压缩UIImage不大于300k .h代码: #import <Foundation/Foundation.h> @interface ImageSe ...

  6. LVS基础知识

    LVS介绍(Linux Virtual Server) 负载调度器,已经集成到内核 工作原理:VS根据请求报文的目标IP和目标协议及端口将其调度转发至某RS,根据调度算法来挑选RS iptables/ ...

  7. 004-读书笔记-企业IT架构转型之道-阿里巴巴中台战略思想与架构实战-共享服务中心建设原则

    一般来说服务能力包括两个层次,一个是底层paas的能力,PaaS层结局大型架构在分布式.可靠性.可用性.容错.监控以及运维层面上的通用需求:第二个层次是业务能力,业务能力提供云化的核心业务支撑能力,这 ...

  8. ul+li水平居中的几种方法

    一.posotion:relative; 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  9. hash值重写,就是以自己定义的规则来显示hash值

    未重写hashCode值 重写hashCode后的值  

  10. SpringBoot java.lang.IllegalArgumentException: Request header is too large

    在application.properties##tomcat 请求设置server.max-http-header-size=1048576server.tomcat.max-connections ...