由于面板显示不支持嵌套，自己也没有去研究inspector面板元素的显示控制，CocosCreator是用vue编写的，本人正在学习vue，后期考虑扩展下Inspector，官方链接：https://docs.cocos.com/creator/manual/zh/extension/extends-inspector.html

 

常用Action面板化：（只要放在脚本文件目录下就可以了）

Panel_Action.js

var Panel_Action_Type = cc.Enum({    Panel_None: 0,    Panel_Sequence: 1,    Panel_Repeat: 2,    Panel_RepeatForever: 3,    Panel_Spawn: 4,    Panel_DelayTime: 5,    Panel_MoveTo: 6,    Panel_MoveBy: 7,    Panel_RotateTo: 8,    Panel_RotateBy: 9,    Panel_ScaleTo: 10,    Panel_ScaleBy: 11,    Panel_FadeIn: 12,    Panel_FadeOut: 13,    Panel_FadeTo: 14,    Panel_Blink : 15,    Panel_JumpTo:16,    Panel_JumpBy: 17,    Panel_BezierTo: 18,    Panel_BezierBy: 19,    Panel_SkewTo: 20,    Panel_SkewBy: 21,    Panel_TintTo: 22,    Panel_TintBy: 23,});var Panel_Action = cc.Class({    name: "Panel_Action",    properties: () => ({        actionType: {            default: Panel_Action_Type.Panel_None,            type: Panel_Action_Type,            displayName: "动作类型",        },        action_sequence: {            default: null,            type: require("PanelAction").Panel_Sequence,            displayName: "顺序动作",            visible: function() {                return this.actionType == Panel_Action_Type.Panel_Sequence;            }        },        action_repeat: {            default: null,            type: require("PanelAction").Panel_Repeat,            displayName: "重复动作",            visible: function() {                return this.actionType == Panel_Action_Type.Panel_Repeat;            }        },        action_repeatForever: {            default: null,            type: require("PanelAction").Panel_RepeatForever,            displayName: "永久重复动作",            visible: function() {                return this.actionType == Panel_Action_Type.Panel_RepeatForever;            }        },        action_spawn: {            default: null,            type: require("PanelAction").Panel_Spawn,            displayName: "并行动作",            visible: function() {                return this.actionType == Panel_Action_Type.Panel_Spawn;            }        },        action_delayTime: {            default: null,            type: require("PanelAction").Panel_DelayTime,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_DelayTime;            }        },        action_moveTo: {            default: null,            type: require("PanelAction").Panel_MoveTo,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_MoveTo;            }        },        action_moveBy: {            default: null,            type: require("PanelAction").Panel_MoveBy,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_MoveBy;            }        },        action_rotateTo: {            default: null,            type: require("PanelAction").Panel_RotateTo,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_RotateTo;            }        },        action_rotateBy: {            default: null,            type: require("PanelAction").Panel_RotateBy,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_RotateBy;            }        },        action_scaleTo: {            default: null,            type: require("PanelAction").Panel_ScaleTo,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_ScaleTo;            }        },        action_scaleBy: {            default: null,            type: require("PanelAction").Panel_ScaleBy,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_ScaleBy;            }        },        action_fadeIn: {            default: null,            type: require("PanelAction").Panel_FadeIn,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_FadeIn;            }        },        action_fadeOut: {            default: null,            type: require("PanelAction").Panel_FadeOut,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_FadeOut;            }        },        action_fadeTo: {            default: null,            type: require("PanelAction").Panel_FadeTo,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_FadeTo;            }        },        action_blink: {            default: null,            type: require("PanelAction").Panel_Blink,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_Blink;            }        },        action_jumpTo: {            default: null,            type: require("PanelAction").Panel_JumpTo,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_JumpTo;            }        },        action_jumpBy: {            default: null,            type: require("PanelAction").Panel_JumpBy,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_JumpBy;            }        },        action_bezierTo: {            default: null,            type: require("PanelAction").Panel_BezierTo,            tooltip: "按贝赛尔曲线轨迹移动到目标位置",            visible: function() {                return this.actionType == Panel_Action_Type.Panel_BezierTo;            }        },        action_bezierBy: {            default: null,            type: require("PanelAction").Panel_BezierBy,            tooltip: "按贝赛尔曲线轨迹偏移",            visible: function() {                return this.actionType == Panel_Action_Type.Panel_BezierBy;            }        },        action_skewTo: {            default: null,            type: require("PanelAction").Panel_SkewTo,            tooltip: "偏斜到目标角度",            visible: function() {                return this.actionType == Panel_Action_Type.Panel_SkewTo;            }        },        action_skewBy: {            default: null,            type: require("PanelAction").Panel_SkewBy,            tooltip: "偏斜指定的角度",            visible: function() {                return this.actionType == Panel_Action_Type.Panel_SkewBy;            }        },        action_tintTo: {            default: null,            type: require("PanelAction").Panel_TintTo,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_TintTo;            }        },        action_tintBy: {            default: null,            type: require("PanelAction").Panel_TintBy,            visible: function() {                return this.actionType == Panel_Action_Type.Panel_TintBy;            }        },    }),});module.export = Panel_Action;

 

 

使用Action的组件（拖到需要做动作的节点上）

PanelAction.js

var Panel_ActionInterval = cc.Class({    name: "Panel_ActionInterval",    properties: {            },});var Panel_Sequence = cc.Class({    name: "Panel_Sequence",    extends: Panel_ActionInterval,    properties: () => ({        actionArray: [require("Panel_Action")],    }),});var Panel_Repeat = cc.Class({    name: "Panel_Repeat",    extends: Panel_ActionInterval,    properties: () => ({        action: require("Panel_Action"),        times: {            default: 1,            type: cc.Integer,            displayName: "次数",            min: 1,        },    }),});var Panel_RepeatForever = cc.Class({    name: "Panel_RepeatForever",    extends: Panel_ActionInterval,    properties: () => ({        action: require("Panel_Action"),    }),});var Panel_Spawn = cc.Class({    name: "Panel_Spawn",    extends: Panel_ActionInterval,    properties: () => ({        actionArray: [require("Panel_Action")],    }),});var Panel_DelayTime = cc.Class({    name: "Panel_DelayTime",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },    },});var Panel_MoveTo = cc.Class({    name: "Panel_MoveTo",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "目标坐标值",        },    },});var Panel_MoveBy = cc.Class({    name: "Panel_MoveBy",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "位移偏移量",        },    },});var Panel_RotateTo = cc.Class({    name: "Panel_RotateTo",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "目标旋转值",        },    },});var Panel_RotateBy = cc.Class({    name: "Panel_RotateBy",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "旋转偏移量",        },    },});var Panel_ScaleTo = cc.Class({    name: "Panel_ScaleTo",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "目标缩放值",        },    },});var Panel_ScaleBy = cc.Class({    name: "Panel_ScaleBy",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "缩放偏移量",        },    },});var Panel_FadeIn = cc.Class({    name: "Panel_FadeIn",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },    },});var Panel_FadeOut = cc.Class({    name: "Panel_FadeOut",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },    },});var Panel_FadeTo = cc.Class({    name: "Panel_FadeTo",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        opacity: {            default: 0,            type: cc.Integer,            displayName: "透明值",            min: 0,            max: 255,        },    },});var Panel_Blink = cc.Class({    name: "Panel_Blink",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        blinks: {            default: 1,            type: cc.Integer,            displayName: "次数",            min: 1,        },    },});var Panel_JumpTo = cc.Class({    name: "Panel_JumpTo",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "目标坐标值",        },        height: {            default: 0,            type: cc.Float,            displayName: "高度",        },        jumps: {            default: 1,            type: cc.Integer,            displayName: "次数",            min: 1,        },    },});var Panel_JumpBy = cc.Class({    name: "Panel_JumpBy",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "坐标偏移量",        },        height: {            default: 0,            type: cc.Float,            displayName: "高度",        },        jumps: {            default: 1,            type: cc.Integer,            displayName: "次数",            min: 1,        },    },});var Panel_BezierTo = cc.Class({    name: "Panel_BezierTo",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2s: {            default: [],            type: cc.Vec2,            displayName: "所有坐标",        },    },});var Panel_BezierBy = cc.Class({    name: "Panel_BezierBy",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2s: {            default: [],            type: cc.Vec2,            displayName: "所有坐标偏移量",        },    },});var Panel_SkewTo = cc.Class({    name: "Panel_SkewTo",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "目标偏斜角度值",        },    },});var Panel_SkewBy = cc.Class({    name: "Panel_SkewBy",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        vec2: {            default: new cc.Vec2(),            displayName: "偏斜角度偏移量",        },    },});var Panel_TintTo = cc.Class({    name: "Panel_TintTo",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        color: {            default: new cc.Color,            displayName: "目标颜色值"        }    },});var Panel_TintBy = cc.Class({    name: "Panel_TintBy",    extends: Panel_ActionInterval,    properties: {        duration: {            default: 0,            type: cc.Float,            displayName: "时长",            min: 0,        },        color: {            default: new cc.Color,            displayName: "颜色值偏移量"        }    },});cc.Class({    extends: cc.Component,    properties: {        //baseAction: [Panel_Action],        baseAction2: require("Panel_Action"),        //baseAction3: Panel_Action,        //baseAction4: Panel_TintTo,        //baseAction5: Panel_TintTo,    },    // LIFE-CYCLE CALLBACKS:    // onLoad () {},    start () {            },    // update (dt) {},});module.export = {    Panel_ActionInterval : Panel_ActionInterval,    Panel_Sequence : Panel_Sequence,    Panel_Repeat : Panel_Repeat,    Panel_RepeatForever : Panel_RepeatForever,    Panel_Spawn : Panel_Spawn,    Panel_DelayTime : Panel_DelayTime,    Panel_MoveTo : Panel_MoveTo,    Panel_MoveBy : Panel_MoveBy,    Panel_RotateTo : Panel_RotateTo,    Panel_RotateBy : Panel_RotateBy,    Panel_ScaleTo : Panel_ScaleTo,    Panel_ScaleBy : Panel_ScaleBy,    Panel_FadeIn : Panel_FadeIn,    Panel_FadeOut : Panel_FadeOut,    Panel_FadeTo : Panel_FadeTo,    Panel_Blink : Panel_Blink,    Panel_JumpTo : Panel_JumpTo,    Panel_JumpBy : Panel_JumpBy,    Panel_BezierTo : Panel_BezierTo,    Panel_BezierBy : Panel_BezierBy,    Panel_SkewTo : Panel_SkewTo,    Panel_SkewBy : Panel_SkewBy,    Panel_TintTo : Panel_TintTo,    Panel_TintBy : Panel_TintBy,}

 

文章开头就说明了，暂时官方默认的面板没法支持嵌套定义的组件，先记录，后期再扩展inspector。

写成组件，主要是方便非程序的编辑人员就可以制作动画，虽然官方也提供了动作编辑器面板