CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解

这篇具有很好参考价值的文章主要介绍了CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、什么是装饰器?


装饰器是TypeScript脚本语言中的概念。

TypeScript的解释:在一些场景下,我们需要额外的特性来支持标注或修改类及其成员。装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。


在TypeScript中,装饰器分为:类装饰器、属性装饰器、方法装饰器、方法参数装饰器。


由此可知:

  • 装饰器的作用:标注或修改类及其成员
  • 装饰器作用的目标:类及其成员(类,方法, 访问符,属性或参数)

大家都知道,从Cocos Creator3.x 开始,开发语言主要是:TypeScript,那么装饰器也是需要必须理解的。


二、CocosCreator 的装饰器


在理解CocosCreator 的装饰器之前,我们需要先了解几个知识点:CocosCreator序列化Cocos Creator 的脚本编译时机CocosCreator装饰器执行时机


  • CocosCreator序列化: 编辑器中设置好了属性,会被保存到资源文件中,在使用的时候,自动还原成设置好的属性。这就是CocosCreator的序列化。

  • 脚本编译时机: 在前面介绍vs code 脚本编辑工具的时候,我们也有介绍到 ,脚本编译的时机:修改项目脚本后,重新返回 Cocos Creator 会自动的触发脚本编译。然后我们也配置了 VS Code 编译任务, 配置完成后,在VS Code 中按下快捷键 Ctrl + Shift + B 便会自动显示 CocosCreator compile,执行即可编译。

感兴趣的朋友请前往查看CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置。


  • 装饰器执行时机:装饰器对类行为的改变,是代码编译时发生的,而不是在运行时。也就是说,装饰器的本质就是编译时执行的函数。

1、CC 类


(1)、什么是cc类?

将ccclass 关键词做为注解,添加在类上时,这个类被称为CC类。


语法如下:

@ccclass('name')  

如图,PlayerControl 为cc类:


CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解,CocosCreator3.8,笔记,typescript,CocosCreator,CocosCreator3.8,编程语言


(2)、CC 类的作用

CC 类注入了控制cocos creator 对该类对象的序列化、编辑器对此类对象的显示。


(3)、CC 类注意事项

  • CC类的名称是唯一的

  • 不能以 cc.internal. 作为前缀,这是 Cocos Creator 的保留类名前缀

  • 没声明 ccclass 的组件类,无法作为组件添加到节点上

  • 当CC类是组件时,Node 可以通过组件类的CC类名查找到该组件


2、组件类装饰器

组件类装饰器只能用来修饰 Component 的子类。


(1)、executeInEditMode

正常情况下,所有组件只会在运行时执行, 在编辑器模式下并不会触发,executeInEditMode 默认值为 false

如果需要在编辑器模式下就执行,我们可以将executeInEditMode 设置为’true’,表示允许在编辑器模式下运行。


如下代码:

const { ccclass, executeInEditMode } = _decorator;
@ccclass('Example')
@executeInEditMode(true)
export class Example extends Component {
    update (dt: number) {
        // 在编辑器下每帧执行
    }
}

(2)、requireComponent

requireComponent 参数用来指定当前组件的依赖组件,默认值为 null

当组件添加到节点上时,如果依赖的组件不存在,引擎会自动将依赖组件添加到同一个节点,防止脚本出错。


const { ccclass, requireComponent } = _decorator;

@ccclass('Example')
@requireComponent(Sprite)
export class Example extends Component {
}

(3)、executionOrder

executionOrder 用来指定脚本生命周期回调的执行优先级。

该优先级设定只对 onLoadonEnablestartupdatelateUpdate 有效,对 onDisableonDestroy 无效。

  • 对于同一节点上的不同组件,数值小的先执行,数值相同的按组件添加先后顺序执行
  • 对于不同节点上的同一组件,按节点树排列决定执行的先后顺序。

const { ccclass, executionOrder } = _decorator;

@ccclass('Example')
@executionOrder(3)
export class Example extends Component {
}

(4)、disallowMultiple

同一节点上只允许添加一个同类型(含子类)的组件,防止逻辑发生冲突,默认值为 false。

const { ccclass, disallowMultiple } = _decorator;

@ccclass('Example')
@disallowMultiple(true)
export class Example extends Component {
}

(5)、menu

@menu(path) 用来将当前组件添加到组件菜单中。

该菜单:是添加在 属性检查器 面板中按下添加组件按钮后的下拉框内。


CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解,CocosCreator3.8,笔记,typescript,CocosCreator,CocosCreator3.8,编程语言


CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解,CocosCreator3.8,笔记,typescript,CocosCreator,CocosCreator3.8,编程语言


const { ccclass, menu } = _decorator;

@ccclass('Example')
@menu('foo/bar')
export class Example extends Component {
}

(6)、help

指定当前组件的帮助文档的 URL。

设置完成后,在 属性检查器 中就会出现一个帮助图标,点击即可打开帮助文档的 URL。


const { ccclass, help } = _decorator;
@ccclass('Example')
@help('https://docs.cocos.com/creator/3.8/manual/zh/scripting/decorator.html')
export class Example extends Component {
}

3、属性装饰器(property)

属性装饰器用于控制 Cocos Creator 编辑器中对该属性的序列化、属性检查器 中对该属性的展示等。


属性装饰器 property 可以被应用在 cc 类的属性或访问器上。


(1)、属性编辑器常见属性类型

  • 基础属性:CCInteger、CCFloat、CCBoolean、CCString

  • cc 类型

  • 数组类型:[CCInteger]、[Node]


当使用基础属性类型或者 cc 类作为数组元素时,将分别以整数数组和节点数组的形式在 属性检查器 中展示。


  • 若值的类型是 JavaScript 原始类型 numberstringboolean,则其类型分别对应 Creator 的CCFloatCCStringCCBoolean

语法如下:

@property({ type:Node,visible:true})

@property({type:CCInteger,visible:true})
n:number=5;

@property({ type:[Node],visible:true})


下图是脚本文件 PlayerControl.ts 与Creator 编辑器属性检查器中属性展示:

CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解,CocosCreator3.8,笔记,typescript,CocosCreator,CocosCreator3.8,编程语言


Cocos Creator额外提供几种装饰器可以快速声明 cc 类型。

装饰器 对应的 property 写法
@type(t) @property(t)
@integer @property(CCInteger)
@float @property(CCFloat)


以下声明,可以替代 @property 的写法:

@integer // 声明属性的 cc 类型为整数
index = 0;

@type([Node]) // 声明属性 children 的 cc 类型为 Node 数组
children: Node[] = [];

@type(String) // 警告:不应该使用构造函数 String。等价于 CCString。也可以选择不声明类型
text = '';

(2)、属性检查器中属性的可见性


需要注意的是:不是所有定义的属性装饰器都是可见的,在以下两种情况,是不会显示在属性检查器:

  • 属性名是否以 _ 开头 ,会识别为 private 属性,private 属性不会在编辑器组件属性面板上显示。
  • visible属性值为false

(3)、序列化(serializable)


属性默认情况下都会被序列化,序列化后就会将编辑器中设置好的属性值保存到场景等资源文件中,之后在加载场景时就会自动还原成设置好的属性值。如果不想序列化,可以设置 serializable: false。

@property({ serializable: false })
num = 0;

(4)、override

所有属性都会被子类继承,如果子类要覆盖父类同名属性,需要显式设置 override 参数,否则会有重名警告:

@property({ tooltip: "my id", override: true })
id = "";

(5)、group

当脚本中定义的属性过多且杂时,可通过 group 对属性进行分组、排序,方便管理。

同时还支持对组内属性进行分类。


group 写法包括以下两种:

@property({ group: { name } })
@property({ group: { id, name, displayOrder, style } })


参数 说明
id 分组 ID,string 类型,是属性分组组号的唯一标识,默认为 default
name 组内属性分类的名称,string 类型。
displayOrder 对分组进行排序,number 类型,数字越小,排序越靠前。默认为 Infinity,表示排在最后面。 若存在多个未设置的分组,则以在脚本中声明的先后顺序进行排序。
style 分组样式,目前支持 tabsection 样式。 默认为 tab

(6)、get/set 使用

@property
_num:number=1;
set num(val){
    this._num=val;
}
get num(){
    return this._num;
}

(7)、Cocos Creator 常用内置属性

  • Color(颜色)
  @property(Color)
  color:Color
  • Gradient (渐变)
  @property(Gradient)
  gradient = new Gradient();
  • GradientRange (渐变色范围)

通过颜色、渐变色、双颜色或双渐变色控制颜色文章来源地址https://www.toymoban.com/news/detail-703472.html

  @property(GradientRange)
  gradientRange:GradientRange = new GradientRange();

到了这里,关于CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果

    上一篇,我们介绍了动画编辑器相关功能面板说明,感兴趣的朋友可以前往阅读: CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明。 熟悉了动画编辑器的基础操作,那么再使用动画编辑器制作动画就比较简单了。 今天,我们来介绍动画编辑

    2024年02月07日
    浏览(43)
  • CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置

    一、设置文件显示和搜索过滤步骤 为了提高搜索效率以及文件列表中隐藏不需要显示的文件, VS Code 需要设置排除目录用于过滤。 比如 cocoscreator 中,编辑器运行时会自动生成一些目录:build 、 temp 、 library, 所以应该在搜索中排除。 而 assets 目录下的每个文件都会生成一个

    2024年02月10日
    浏览(38)
  • CocosCreator3.4.2源码渲染流程解读

     首先上一张脑图镇楼,有些流程还有待后续补充,但是整个刷新过程差不多都完成了。 在上一个xmind文件地址 https://download.csdn.net/download/m0_37609239/87254684 接下来就正式开始讲代码: 每帧刷新渲染还是从mainloop开始讲,前面的流程可以看 ​​​​​​​​​​​​​​CocosC

    2023年04月08日
    浏览(37)
  • Python学习—装饰器的力量

    作为许多语言都存在的高级语法之一,装饰器是你必须掌握的知识点。 Python的装饰器(Decorator)允许你扩展和修改可调用对象(函数、方法和类)的行为,而无需永久修改可调用的对象本身。进一步解释就是装饰器(Decorator):从字面上理解,就是装饰对象的器件。可以在不

    2024年02月10日
    浏览(40)
  • CBV添加装饰器的三种方式

    2024年02月08日
    浏览(36)
  • python中可变参数与装饰器的例子

    输出结果: 例子来源《Python tips: 什么是*args和**kwargs? - MK2 - 博客园 (cnblogs.com)》 搭配装饰器使用,用来判断是否为空 @符号是一个语法糖,当执行函数时,会把当前函数传入到@指向的函数中执行。 结合项目代码来看,目前我们大多是用在前置检查,且会把装饰器函数定义在

    2024年02月05日
    浏览(44)
  • python带参数装饰器的两种写法

    装饰器是 Python 中非常有用的语法特性,可以用于包装或者修改函数的行为。有时候我们希望给装饰器添加参数,以便于在装饰器内部使用,那么这时候就需要使用带参数的装饰器。常用的两种带参数装饰器的写法如下: 在装饰器函数外层再套一个函数,用来接收和处理装饰

    2024年02月13日
    浏览(36)
  • Python从入门到精通8天(装饰器的基本使用)

    装饰器是一个著名的设计模式,经常被用于有切面(aspect)需求的场景,如插入日志、性能测试、事务处理等。装饰器可以抽离出大量函数中与函数功能本身无关的雷同代码并继续重用。概括的讲,装饰器的作用就是为已经存在的对象添加额外的功能。这种编程方式被称为面

    2023年04月23日
    浏览(43)
  • Next.js使用装饰器decorator 解决[作为表达式调用时,无法解析类修饰器的签名。]

    Next.js 会自动检测 jsconfig.json 或 tsconfig.json 中的 experimentalDecorators 。 tsconfig.json 然后重启服务 否则装饰器无法识别 不声明的话vscode 执行 ts检测 也会报错 作为表达式调用时,无法解析类修饰器的签名。 支持的四种装饰器 类装饰器 也可以这样写 下方写法可以将属性写在当前

    2024年02月14日
    浏览(44)
  • 发光太阳聚光器的蒙特卡洛光线追踪研究(Matlab代码实现)

     💥💥💞💞 欢迎来到本博客 ❤️❤️💥💥 🏆博主优势: 🌞🌞🌞 博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️ 座右铭: 行百里者,半于九十。 📋📋📋 本文目录如下: 🎁🎁🎁 目录 💥1 概述 📚2 运行结果 🎉3 参考文献 🌈4 Matlab代码及文章 蒙特

    2024年02月10日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包