【Cocos Creator】编辑器自定义

2024-07-09 05:28| 来源: 网络整理| 查看: 265

一、声明属性

在这里插入图片描述 js: 要声明属性，需要在 cc.Class 定义的 properties 字段中，填写属性名字和属性参数。在此处声明的属性在Cocos Creator编辑器属性检查器面板中可以读取和编辑。如下： JS:

// 声明一个带说明的Sprite属性 backGround: { type: cc.Sprite, displayName: "背景", //显示名称 tooltip: "这是背景",//说明 default: null, },

TS：

// 声明一个带说明的Sprite属性 @property({ type: cc.Sprite, displayName: "背景", //显示名称 tooltip: "这是背景"//说明 }) backGround: cc.Sprite = null;

二、下拉列表

要在属性检查器上显示为下拉列表的样式，需设置属性类型为枚举，并设置默认值为枚举值。为了设置为枚举，需定义一个枚举类型，可以使用Cocos提供的cc.Enum定义枚举。在这里插入图片描述 ts:

要想选择不同的下拉选项，在属性面板上显示或隐藏不同的属性，需把要动态设置可见性的属性的visible写成函数的形式，并在函数中根据不同的情况返回不同的布尔值。在这里插入图片描述

// 根据选项显示是否可见 backGround1: { type: cc.Sprite, displayName: "背景1", visible() { return this.isShow; }, default: null }, // 根据选项显示是否可见 @property({ type: cc.Sprite, displayName: "背景", visible() { return this.isShow } }) backGround1: cc.Sprite = null;

三、滑动条

实现滑动条样式需设置属性的min，max，step，并把slide设置为true。在这里插入图片描述

// 带说明，只能输入整数，最大值10，最小值0 @property({ type: cc.Integer, displayName: "血量", min: 0, max: 10, tooltip: "人物当前血量" }) HP = 10; // 声明滑动条，不加type就是浮点值 age: { type: cc.Integer, min: 0, max: 120, step: 1, slide: true, displayName: "年龄", default: 32 },

四、回调函数

要想在属性面板绑定回调函数，需设置属性的type为cc.Component.EventHandler，设置默认值为空，并且在构造函数中初始化属性为cc.Component.EventHandler的实例。

在这里插入图片描述

doubleKill: { type: cc.Component.EventHandler, displayName: "回调函数", default: null, }, // 声明事件回调，类似button的点击事件回调 @property({ type: cc.Component.EventHandler, displayName: "回调函数" }) doubleKill = new cc.Component.EventHandler();

ts：设置颜色在这里插入图片描述

@property(cc.color) color: cc.Color = cc.Color.WHITE;

TS：

const { ccclass, property } = cc._decorator; let SexyType = cc.Enum({ 未知: 0, 男: 1, 女: 2 }); @ccclass export default class NewClass extends cc.Component { @property(cc.Label) label: cc.Label = null; @property(cc.Boolean) isShow: boolean = false; // 根据选项显示是否可见 @property({ type: cc.Sprite, displayName: "背景", visible() { return this.isShow } }) backGround1: cc.Sprite = null; // 声明一个Sprite属性 @property({ type: cc.Sprite, displayName: "背景" }) backGround: cc.Sprite = null; // 声明一个带说明的属性 @property({ type: cc.Node, displayName: "底座", tooltip: "底部炮台的父节点" }) baseNode: cc.Node = null; // 声明文本框 @property({ displayName: "文本框" }) text = "文本"; // 带说明，只能输入整数，最大值10，最小值0 @property({ type: cc.Integer, displayName: "血量", min: 0, max: 10, tooltip: "人物当前血量" }) HP = 10; // 声明滑动条，不加type就是浮点值 @property({ type: cc.Integer, min: 0, max: 120, step: 1, slide: true, displayName: "年龄" }) age = 32; // 自定义枚举，下拉框属性，中文显示 @property({ type: cc.Enum(SexyType), displayName: "性别" }) sex = SexyType.未知; // 声明cc.ValueType子类型，Vec2，Vec3等 @property({ displayName: "坐标" }) pos: cc.Vec2 = new cc.Vec2(0); // 声明事件回调，类似button的点击事件回调 @property({ type: cc.Component.EventHandler, displayName: "回调函数" }) doubleKill = new cc.Component.EventHandler(); }

JS：

【本文地址】

公司简介

联系我们

【Cocos Creator】 编辑器自定义

【Cocos Creator】编辑器自定义