Color attribute always returns black

Help & Support
1

Hey,

This is the first time I am using color attributes and they are giving me some headaches.

Attribute creation code looks like this:

let XRayShader = pc.createScript( 'xrayShader' );

XRayShader.attributes.add( 'frontColor', { type: 'rgb', default: [0, 1, 0], title: 'Front Color' } );
XRayShader.attributes.add( 'sideColor', { type: 'rgb', default: [1, 1, 1], title: 'Side Color' } );
XRayShader.attributes.add( 'factor', { type: 'number', default: 1, min: 0, max: 4, title: 'Factor' } );
XRayShader.attributes.add( 'lift', { type: 'number', default: 0, min: -1, max: 1, title: 'Lift' } );
XRayShader.attributes.add( 'fresnel', { type: 'number', default: 1, min: 0.1, max: 4, title: 'Fresnel' } );

All number attributes work perfectly fine, but when I log the color attributes to console I get the following output:

console.log(this.frontColor, this.sideColor);

grafik

I guess there is something very obvious I am missing here.

Thanks in advance,
Dirk

2

Hi @DiBi,

If you mean the NaN value you are getting for alpha … I tested the exact same attributes as yours, in two browsers, and I wasn’t able to reproduce this (I am getting 1 for alpha).

image
Though I’d say, don’t worry, since you aren’t using rgba but only rgb, so Ι don’t think they’ll be an issue here.

3

Hi Leonidas,

Thanks for the quick response. The alpha value is in fact unusued so that NaN is fine.

RGB always returning 0 is the real problem. I tried moving those attributes to another script, but still cannot get color values set in the inspector (or the default value when untouched).

Looks like I’ll have to dig a little deeper because I guess this works fine in a new project, just like you tested.

4

If this is isolated in a single project seems like some minor data corruption or something? @yaustar may be able to bring it to the attention of the editor team :slight_smile:

1 Like
5

You can also try to remove the attribute from the script, parse, re add it, parse and see if that helps?

6

I have tried all that. Renamed the attribute + parse, removed and added new attributes + parse. Even renamed the scripts + build & parse and deleted and recreated the entity.

Only thing I have not tried yet is settting up a new scene.

7

Is it a public project? If not, could you fork it and add me ‘yaustar’ to it to take a look please?

8

The project is private. I have to talk to the project owner tomorrow to create a fork.

Thanks for your help.

9

One more note before an admin can make the project accessible:

The color object created in the attribute can be modified via code:

this.sideColor.r = 1; // works

Color attributes on custom script components are not carried over from editor to launch version. I tried adding color attributes to other scripts in the project and none of them works.

10

It looks like something that was done in main.build.js as removing it also removes the issue with new scripts.

At a guess, it’s something to do with the use of pc.Color#data but can’t do much as it’s a ‘compiled’ JS file.

11

Are you using a NPM package or something similar that uploads code to PlayCanvas?

12

Yes, we are using NPM to build and upload code to PlayCanvas.

I am checking right now, if the project owner can give you access to the Git repository, so you can have a look at the actual sources.

13

Found the issue. Whatever NPM package you are using is monkey patching the way that the engine is handling script attributes. It’s based on an older API that tries to use set values against pc.Color#data which no longer exist (they have been replaced by .r, .g, .b, .a and the .data property is implemented to use a temporary array to support older projects).

Hence, it stays at 0, 0, 0, 1.

Once I fixed the monkey patch code in main.build.js, it ‘works’. I use ‘’ because I don’t know what else could be outdated with it the NPM package used.

We have developed a tool that can upload code to a PlayCanvas project which we are maintaining and doesn’t rely on monkey patching: https://github.com/playcanvas/playcanvas-sync that may be suitable for future projects.

2 Likes
14

Thank you so much for helping us out. At least we know the reason for this issue now. I’ll talk to the guy who has set up the project and see how we can fix it.

Have a nice weekend,
Dirk

1 Like
15

Default value for rgb & rgba not work now?

16

This bug was due to code in the app. Default values for colours do still work.

17

Ok, found it (it’s a part of an createscript package from npm: https://www.npmjs.com/package/createscript):

                case 'rgb':
                case 'rgba':
                    if (value instanceof pc.Color) {
                        if (old instanceof pc.Color) {
                            old.copy(value);
                            return old;
                        } else {
                            return value.clone();
                        }
                    } else if (value instanceof Array && value.length >= 3 && value.length <= 4) {
                        for (var i = 0; i < value.length; i++) {
                            if (typeof(value[i]) !== 'number')
                                return null;
                        }
                        if (!old) old = new pc.Color();

                        for (var i = 0; i < 4; i++)
                            old.data[i] = (i === 4 && value.length === 3) ? 1 : value[i];

                        return old;
                    } else if (typeof(value) === 'string' && /#([0-9abcdef]{2}){3,4}/i.test(value)) {
                        if (!old)
                            old = new pc.Color();

                        old.fromString(value);
                        return old;
                    } else {
                        return null;
                    }
                    break;

How should it look like?

18

I’m not sure why it’s even there in the first place as it’s overriding the Engine code for this: