Change texture when press another button

Hi, friends,

I have 2 buttons rotation and reset, and the button rotation has 2 textures rotation and X.

My code goes like this when I press rotation button it changes from rotation to X but what about when I press the reset button and change the X button to rotation again?

Hi @Unavailable,

In the same way you do the first rotation, you can store the initial rotation of the entity to use when resetting.

Can you post your current code to take a look?

2 Likes

this is reset button

var Reset = pc.createScript('reset');

Reset.attributes.add('Character', {
    type: 'entity'
});
Reset.attributes.add('isPlaying', {
    type: 'boolean',
    default: false
});
Reset.attributes.add('Rotate', {
    type: 'entity'
});
// initialize code called once per entity
Reset.prototype.initialize = function() {
    this.entity.element.on('mousedown', this.onPress, this);
    this.entity.element.on('touchstart', this.onPress, this);
    
    this.entity.element.on('click', function (evt) {
    var animation = this.app.root.findByName('Character');
    animation.animation.play('mixamo.com.glb');
    }, this);
    
    this.entity.element.on('click', function(ev){
        var img = this.app.root.findByName('Rotate');
        ev.element.textureAsset = this.RotateOff;
    },this);
};

// update code called every frame
Reset.prototype.update = function(dt) {
    
};

Reset.prototype.onPress = function(event){
  this.ResetRotation();
    
    this.Character.script.rotating.loop = false;
    this.Rotate.script.element = this.RotateOff;
    this.app.fire('sequence:Start');
    this.isPlaying = false;
    
};

Reset.prototype.ResetRotation = function () { 
    this.Character.setLocalEulerAngles(0, 0, 0);
};

this is rotate btn

var Rotatebtn = pc.createScript('rotatebtn');

Rotatebtn.attributes.add('rotateOn', {
    type: 'asset',
    assetType: 'texture'
});

Rotatebtn.attributes.add('RotateOff', {
    type: 'asset',
    assetType: 'texture'
});

Rotatebtn.attributes.add('isPlaying', {
    type: 'boolean',
    default: true
});

Rotatebtn.attributes.add('Character', {
    type: 'entity',
});

// initialize code called once per entity
Rotatebtn.prototype.initialize = function() {
    this.entity.element.on('mousedown', this.onPress, this);
    this.entity.element.on('touchstart', this.onPress, this);
    
};

// update code called every frame
Rotatebtn.prototype.update = function(dt) {
    
};

Rotatebtn.prototype.onPress = function (event) {
    if (this.isPlaying) {
        this.Character.script.rotating.loop = false;
        event.element.textureAsset = this.rotateOn;
        this.app.fire('sequence:Start');
        this.isPlaying = false;
    } else {
        this.Character.script.rotating.loop = true;
        event.element.textureAsset = this.RotateOff;
        this.app.fire('sequence:Start');
        this.isPlaying = true;
    }
};