Custom property type

[skara]

Is it possible to create a custom property for a class like such:

properties: {
    margins: {
        default: function() {
    	    return { left: 0, right: 0, top: 0, bottom: 0}
    	},
        type: cc.Object
    }

What I see is this:

Is it possible to make it have a input box for each key?

I’ve also tried this:

margins: {
	default: function() {
		return {
			left: {
				default: 0.0,
				type: cc.Float
			},
			right: {
				default: 0.0,
				type: cc.Float
			},
			top: {
				default: 0.0,
				type: cc.Float
			},
			bottom: {
				default: 0.0,
				type: cc.Float
			}
		}
	},
	type: cc.Object
}

It doesn’t work either…

[persy]

In theory you can implement your own property inspector, but it would be a lot easier to just split it into 4 separate float properties

[hossainiir]

Hi try following code:

var margin = cc.Class({
  name: "margin",
  properties: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  }
});

cc.Class({
   extends: cc.Component,
   properties: {
     margin_1: {
      type: margin,
      "default": null
       },
     margins: {
       type: [margin],
       "default": []
     },
   }
 });

[skara]

@hossainiir

var margin = cc.Class({
name: “margin”,
properties: {
left: 0,
right: 0,
top: 0,
bottom: 0,
}
});

cc.Class({
extends: cc.Component,
properties: {
margin_1: {
type: margin,
“default”: null
},
margins: {
type: [margin],
“default”: []
},
}
});

Thanks this did the trick, although i used

type: margin,
default: cc.Object

and this time when I hit “Create” button it resulted in exactly what I wanted:

[amcgamer]

Do you know how would be in Typescript?

[CrushedPixel]

In TypeScript, you can do it like this:

@ccclass("Margin")
class Margin {
    @property(Number)
    left: number = 0;

    @property(Number)
    right: number = 0;

    @property(Number)
    top: number = 0;

    @property(Number)
    bottom: number = 0;
}

@ccclass
export default class MyClass extends cc.Component {
    @property(Margin)
    margin: Margin = new Margin();
}