Code problem regarding material properties and buttons

Help & Support
1

Hi! First post! I’m exploring using HTML5 for my company and I really enjoy the ease of use and feature set of PlayCanvas. I am having one problem however. I’m trying to change the properties of a material with a sprite button. my sprite.js button shows up but I can’t get the code sorted out for the property change. Below is my code for the button action if someone has some ideas they would be greatly appreciated! Thanks in advance! Oh, also this particular code snippet is tied to the “red black” button at the moment. (I know the current code would change it to a shade of gray but it’s not changing it to anything at the moment)

pc.script.create(‘test’, function (context) {
// Creates a new Test instance
var Test = function (entity) {
this.entity = entity;
};

Test.prototype = {
    initialize: function () {
        this.entity.script.sprite.on('click', this.onClick, this);
        this.redMaterial = context.assets.find("Red", pc.asset.ASSET_MATERIAL);
    },

    onClick: function () {
        this.redMaterial.ambient = new pc.Color(0.25,0.25,0.25);
        this.redMaterial.diffuse = new pc.Color(0.25,0.25,0.25);
    }
};

return Test;

});

Here is a link to the project

Thanks again!

2

Hello,

After you change material properties you need to call the update method of the material. So in your code try calling

this.redMaterial.update()

at the end of the onClick method

3

In addition to @vaios’s comment. You are storing the asset object not the material.

context.assets.find() returns a pc.asset.Asset object. You can get the loaded resource (the material) from the resource property.

var asset = context.assets.find("Red", pc.asset.ASSET_MATERIAL);
this.redMaterial = asset.resource;
4

Thank you so much for the feedback. Unfortunatley the code still doesn’t do anything, This is what I have now:

pc.script.create(‘test’, function (context) {
var Test = function (entity) {
this.entity = entity;
};

Test.prototype = {
    initialize: function () {
        this.entity.script.sprite.on('click', this.onClick, this);
        var asset = context.assets.find("Red", pc.asset.ASSET_MATERIAL);
        this.redMaterial = asset.resource;
    },

    onClick: function () {
        this.redMaterial.ambient = new pc.Color(0.25,0.25,0.25);
        this.redMaterial.diffuse = new pc.Color(0.25,0.25,0.25);
        this.redMaterial.update()
    }
};

return Test;
});

Do either of you see any red flags? Thanks again for the help!

5

Hmmm,

OK, on closer inspection. The material you get from asset.resource isn’t the same material as the one on the model. It’s a clone. This may be a engine bug. I’ll get back to you on that.

In the meantime, you can do this:

var modelEntity = context.root.findByName("cup");
this.redMaterial = modelEntity.model.model.getMaterials()[0];

Which will definitely get the correct material from the model itself.

6

That did it! Thanks a ton Dave, you’re a ninja!

7

:tada:

Awesome.

I’ll look into the bug a little more.