CocosCreator3.8研究笔记(八)CocosCreator 节点和组件的使用


我们知道,在CocosCreator 节点和组件的修改有两种方法:

  • 属性检查器中的设置
  • 脚本中的动态修改

脚本中动态修改,能实现各种各样的游戏逻辑,例如响应玩家输入,删除、修改、销毁节点或组件。

不过想要实现这些游戏逻辑,需要在脚本中访问这些组件或节点。


一、访问节点


1、获得组件所在的节点


只要在组件方法里访问 this.node 变量。

onLoad() {let node = this.node;node.setPosition(0.0,0.0,0.0);
}

2、获得同一个节点上的其它组件


使用 getComponent 查找需要的组件,传入类型,例如:

  this.sprite = this.getComponent(Sprite);

还可以通过传入类名来获取,对于自定义的组件,类名就是脚本的文件名,并且 区分大小写

  this.testSprite = this.getComponent("TestSprite");

节点上也有一个 getComponent 方法, 作用一样:

 console.log( this.node.getComponent(Label) === this.getComponent(Label) );  // true

如果在节点上找不到组件,getComponent 会返回 null,访问 null 值,会在运行时抛出 “TypeError” 错误,

如果不确定组件是否存在,需要判断一下:

 this.label = this.getComponent(Label);if (this.label) {this.label.string = "test";} else {console.error("this.label is null");}

3、属性检查器中设置节点及使用


这里以Node节点为例:

(1)、层级管理器中添加Node 节点,名字为Body

在这里插入图片描述


(2)、声明一个 type 为 Node 的属性

例如:

@property({type:Node})
private Body = null;

此时,属性检查器中的body节点如下:

在这里插入图片描述


( 3)、将层级管理器中的Body节点拖入 右侧 属性检查器对应的Node


拖入后,显示如下:

在这里插入图片描述


这样操作后, Body 属性就会被设置成功,我们可以在脚本里访问 Body。


(4)、在脚本里访问 Body 节点

log('Body==' + this.Body.name);

在这里插入图片描述


4、属性检查器中设置组件及使用


这里以player组件为例:


(1)、层级管理器中添加一个 main 节点,同时在资源管理器中添加main.ts 脚本 ,

并在属性检查器中,将main.ts 脚本 拖入,绑定在main 节点上。


如图:

在这里插入图片描述


(2)、在main.ts 中添加type为playercontrol的属性

    @property({type:PlayerControl})private PlayerControl = null;

(3)、将层级管理器中的Player节点拖入 右侧 属性检查器对应的PlayerControl


在这里插入图片描述


通过以上设置后,我们可以在脚本里访问 PlayerControl。


(4)、在脚本里访问 PlayerControl

​ 这样就不需要再自己调用 getComponent 来获取 PlayerControl。

在这里插入图片描述


5、查找子节点

有时场景里面的组件比较多,需要有一个脚本来统一管理,如上的main.ts 的作用。


如果用 属性检查器 来一个一个将它们关联到这个脚本上,工作量就非常大。


为了更好地统一管理这些对象,我们可以把它们放到一个父节点下,然后通过父节点来获得所有的子节点:


let cannons = this.node.children;

还可以通过子节点的名字来获取:

this.node.getChildByName("child name");

如果子节点的层次较深,还可以使用 find根据传入的路径进行逐级查找:

find("a/b/c", this.node);

二、访问已有变量里的值


可以使用 import 来实现脚本的跨文件操作。

每个脚本都能用 import{ } from + 文件名(不含路径) 来获取到对方 exports 的对象。


例如:有一个 utils.ts 脚本

// , now the filename matters
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;@ccclass("utils")
export class utils extends Component {public static utilsNode: any = null;public static utilsLabel: any = null;
}

在user.ts 中使用 utils.ts ,访问 utils.utilsNode \utils.utilsNode bi

 
import { _decorator, Component, Node, Label } from 'cc';
const { ccclass, property } = _decorator;
// this feels more safe since you know where the object comes from
import{utils}from "./utils";@ccclass("user")
export class user extends Component {onLoad() {utils.utilsNode = this.node;utils.utilsLabel = this.getComponent(Label);}
}

三、节点常用接口


1、创建新节点

let node =new Node('a');
node.setPosition(0,0,-10);

2、节点激活与关闭

this.node 访问当前脚本所在节点。

this.node.active 表示该节点 自身的 激活状态,这个节点 当前 是否可被激活则取决于它的父节点。


判断节点当前是否已经激活:

activeInHierarchy 

激活节点

this.node.active = true; 

若节点原先就处于 可被激活 状态,修改 active 为 true 就会立即触发激活操作:

  • 在场景中重新激活该节点和节点下所有 active 为 true 的子节点。
  • 该节点和所有子节点上的所有组件都会被启用,它们中的 update 方法之后每帧会执行。
  • 这些组件上如果有 onEnable 方法,这些方法将被执行。

一个节点是关闭状态时,它的所有组件都将被禁用, 它所有子节点,以及子节点上的组件也会跟着被禁用。


3、索引子节点

  • this.node.children:返回节点的所有子节点数组。
  • this.node.children.length:返回节点的子节点数量。

注意:以上两个 API 都只会返回节点的直接子节点,不会返回子节点的子节点。


4、更改节点位置

有以下两种方法:

  • 使用 setPosition 方法:

    this.node.setPosition(1, 1, 0);
    this.node.setPosition(new Vec3(1, 1, 0))
    
  • 设置 position 变量:

    this.node.position = new Vec3(1, 1, 0);
    

5、更改节点旋转

this.node.setRotation(90, 90, 0);

通过欧拉角设置本地旋转:

this.node.setRotationFromEuler(90, 90, 0);

6、更改节点缩放

this.node.setScale(1, 1, 0);

7、更改节点的父节点

假设父节点为 parentNode,子节点为 this.node

可以通过以下两种方法调整:

this.node.parent = parentNode;
this.node.removeFromParent();
parentNode.addChild(this.node);

8、克隆节点

克隆节点 通过 instantiate 完成。

import { _decorator, Component, Node,instantiate, director } from 'cc';
const { ccclass, property } = _decorator;@ccclass("testClone")
export class testClone extends Component {@property({type:Node})private target: Node = null;start(){let scene = director.getScene();let node = instantiate(this.target);scene.addChild(node);node.setPosition(0, 0,-10);}
}

9、销毁节点

销毁节点 可以使用 node.destroy()node.removeFromParent()

两者的区别:

  • 通过调用 node.destroy() 函数,销毁节点并不会立刻被移除,在当前帧逻辑更新结束后才会执行。

    当一个节点销毁后,该节点就处于无效状态,可以通过 isValid 判断当前节点是否已经被销毁。

  • 通过调用`node.removeFromParent()函数,节点并不会从内存中释放,因为引擎内部仍会持有它的数据。


import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;@ccclass("testDestroy")
export class testDestroy extends Component {@property({type:Node})private target: Node = null;private positionz: number = -20;start(){// 10秒后销毁节点setTimeout(function () {this.target.destroy();}.bind(this), 10000);}update(deltaTime: number){console.info(this.target.isValid);this.positionz += 1*deltaTime;if (this.target.isValid) {this.target.setPosition(0.0,0.0,this.positionz);}}
}

总结:

如果一个节点不再使用,直接调用它的 destroy 而不是 removeFromParent,也不需要设置 parentnull,否则会导致内存泄漏。


四、组件常用接口

Component 是所有组件的基类,任何组件都包括如下的常见接口:

  • this.node:该组件所属的节点实例
  • this.enabled:是否每帧执行该组件的 update 方法,同时也用来控制渲染组件是否显示
  • update(deltaTime: number):作为组件的成员方法,在组件的 enabled 属性为 true 时,其中的代码会每帧执行。
  • onLoad():组件所在节点进行初始化时执行。
  • start():会在该组件第一次 update 之前执行,通常用于需要在所有组件的 onLoad 初始化完毕后执行的逻辑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/108230.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring boot-Resolved element must not contain multiple elements 警告

首先强调一下,此问题不影响程序运行。 报错信息: package org.springframework.util; ...public abstract class Assert ...public static void state(boolean expression, String message) {if (!expression) {throw new IllegalStateException(messa…

Transformers-Bert家族系列算法汇总

🤗 Transformers 提供 API 和工具,可轻松下载和训练最先进的预训练模型。使用预训练模型可以降低计算成本、碳足迹,并节省从头开始训练模型所需的时间和资源。这些模型支持不同形式的常见任务,例如: 📝 自…

特斯拉Dojo超算:AI训练平台的自动驾驶与通用人工智能之关键

特斯拉公开Dojo超算架构细节,AI训练算力平台成为其自动驾驶与通用人工智能布局的关键一环 在近日举行的Hot Chips 34会议上,特斯拉披露了其自主研发的AI超算Dojo的详细信息。Dojo是一个可定制的超级计算机,从芯片到系统全部由特斯拉自主设计…

本地MQTT服务器搭建(EMQX)

一、下载EMQX 下载地址:EMQ (emqx.com) 打开官网后,选择右边的免费试用按钮 然后单击EMQX Enterprise标签,然后选择下面的EMQX开源版,选择开源版的系统平台为Windows,单击免费下载。 在新页面下单击立即下载 二、安装…

SQL注入 - 宽字节注入

文章目录 SQL注入 - 宽字节注入宽字节注入前置知识宽字节靶场实战判断是否存在SQL注入判断位数判显错位判库名判表名判列名 SQL注入 - 宽字节注入 靶场 sqli - labs less-32 宽字节注入主要是绕过魔术引号的,数据库解析中除了UTF-8编码外的所有编码如:G…

微分中值定理

目录 费马定理 罗尔定理 拉格朗日中值定理 柯西中值定理 几个常用的泰勒公式 微分中值定理是微积分中的一个重要定理,它用于描述一个函数在某个区间内的平均变化率与该区间内某一点的瞬时变化率之间的关系。微分中值定理有两个主要形式:拉格朗日中值…

阿里云-源码构建容器镜像

1、阿里云Code代码平台 1.1 创建访问令牌。 登录云效Codeup控制台,单击右上角个人设置。 在个人设置页面,单击左侧导航栏中的个人访问令牌。 单击创建访问令牌,设置配置项,然后单击立即创建。以下为创建访问令牌需要授予的最小权…

【C++进阶】:红黑树

红黑树 一.红黑树简单实现1.性质二.更新颜色1.情况一2.情况二3.情况三 3.完整代码(代码有注释,稍微画图很容易理解,旋转部分可以看我的AVL树博客) 二.map和set1.基本实现2.迭代器 本篇的前置条件是AVL树的旋转和搜索树,如果不了解可以看看我的AVL树博客 …

SpringMVC 的三种异常处理方式详解

目录 1. 什么是异常 2. 为什么要全局异常处理 3. SpringMVC异常分类 4. 异常处理思路 5. 三种异常处理方式示例 ① 配置 SimpleMappingExceptionResolver 处理器 ② 实现 HandlerExceptionResolver 接口 ③ 使用ControllerAdviceExceptionHandler实现全局异常 6. 响应…

AgentGPT:基于GPT-4的开源AI自动化机器人工具

【产品介绍】 AgentGPT是一个基于GPT-4的开源AI自动化机器人工具,可以让你在浏览器中配置和部署自主的 AI机器人。你可以给机器人设置一个名字和一个目标,然后点击部署按钮,就可以看到机器人进行的行为和输出,完全不需要人为干涉的…

vue实现鼠标拖拽div左右移动的功能

直接代码&#xff1a; <template><div class"demo"><div class"third-part" id"发展历程"><div class"title">发展历程</div><div class"content" id"nav" v-if"dataList…

2023年华数杯数学建模C题母亲身心健康对婴儿成长的影响解题全过程文档及程序

2023年华数杯全国大学生数学建模 C题 母亲身心健康对婴儿成长的影响 原题再现&#xff1a; 母亲是婴儿生命中最重要的人之一&#xff0c;她不仅为婴儿提供营养物质和身体保护&#xff0c;还为婴儿提供情感支持和安全感。母亲心理健康状态的不良状况&#xff0c;如抑郁、焦虑、…