Set property visibility dynamically

Cocos Creator
#1

Hello,

I have the following typescript code:

@property ({ type: cc.Boolean })
get Checkbox () {
    return this._checkbox;
}

set Checkbox (value: boolean) {
    this._checkbox = value;
    debugger;
}

_customProperty: number = 0;

@property ({ type: cc.Integer, visible: false })
get CustomProperty () {
    return this._customProperty;
}

set CustomProperty (value: number) {
    this._customProperty = value;
}

In this example I have 2 properties:

  1. Checkbox
  2. CustomProperty is hidden in the editor.

I want to make the CustomProperty to be shown in the editor when the Checkbox becomes true.

#2

CC Conponent has visibile attribute and you can play with it.

Eg:

AllowJump: false,
JumpPower {
value: 100,
visible: this.AllowJump
}

So, when AllowJump is enable in editor, JumpPower field will become visible.

P.S. there could be error/typo as I just recalled it from past experience. Check documentation for deatils.

Edit: ref link: https://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html

#3

It does not work on type script at all.
In type script the approach is different and from the document it should be like this:

    @property
    customOption: boolean = false;

    @property({ visible: () => { return this.customOption; } })
    position: boolean = false;

However, the editor outputs an error that defines that the this object is undefined.
Seems like the function of visible cannot see the object context.

I will be more than appreciated if you supply a typescript code that actually works.

#4

visible should be assigned with a boolean value and you are assigning a function which I think is not right.

#5

Actually, you can. And it is working. Its just cannot get the “this” properly.

If you can provide an example of how it can work in type script I will be appriciate that.

#6

I see. I am not familiar with TS. So GL!

#7

Try this

@property({ 
  visible: function( this: MyComponent ) { return this.customOption; }
})
3 Likes
#8

Works Prefect!

I actually solved it by adding a static property to my class component but your approach seems to be more elegant.

Thank you…