Script won't change the value of the opacity on a button

https://playcanvas.com/project/1268187/overview/start
I am stuck on this. I am trying to change the opacity of a button based on the mouse loaction. The problem is when the mose enters the specified area it doesn’t affect the opacity of the buuton, it jsut sets the opacity to 1.

// Mouse and opacity changer
ButtonPress.prototype.onMouseMove = function(event) {
    // Create a Vector3 object for the screen position of the mouse
    var screenPosition = new pc.Vec3(event.x, event.y, 0);
    
    // Create a ray to detect mouse interaction with the button
    this.ray.direction = new pc.Vec3();
    this.cameraEntity.camera.screenToWorld(screenPosition.x, screenPosition.y, this.cameraEntity.camera.farClip, this.ray.direction);
    this.ray.origin.copy(this.cameraEntity.getPosition());

    // Check for intersection between the ray and the button's hit area
    if (this.hitArea.intersectsRay(this.ray)) {
        // Get the button's position in the world
        var buttonPosition = this.entity.getPosition();
        
        // Measure the distance from the mouse position to the button center
        var distance = this.ray.origin.distance(buttonPosition);
        console.log("Distance is", distance);
        // Get the defined threshold for opacity changes
        var threshold = this.radius_threshold; 
        
        // If the mouse is within the threshold distance
        if (distance <= threshold) {
            // Normalize the distance to a 0-1 scale
            var normalizedDistance = distance / threshold; 
            
            // Define minimum opacity level when the mouse is at maximum distance
            var minOpacity = 0.3; 
            
            // Set the opacity dynamically based on the normalized distance
            this.entity.element.opacity = 1.0 - normalizedDistance * (1.0 - minOpacity); 
        } else {
            // Reset opacity to minimum if mouse is beyond the threshold
            this.entity.element.opacity = 0.3; 
        }
    } else {
        // Reset opacity to minimum if not hovering over the button
        this.entity.element.opacity = 0.3; 
    }
};

Any ideas on how to fix it?

Hi @Simon_Hyde!

I guess the hover color of the button component in the editor is overriding your script.

Are you sure you need to use the button component? Maybe only the element component is enough for your use case.

Hi
Ahh yes, I need the button component part. Maybe I need to write mouse hover and button press in the function on an enity that isn’t a button…an entity like a squashed sphere or something?

Yes, that’s an option. Alternatively you can set the colors of the button component instead of the opacity of the element component. (I suggest to check the result without a button component first, to be sure that’s indeed the problem).

ok, thanks for that… I’ll look into your suggestion first to see if I get any inforamtion os to what’s going on.

Hello
I am don’t understand why the mouse position stops changing once it is within the hitArea2? Shouldn’t it continue to change?

// Mouse move event handler
ButtonPress.prototype.onMouseMove = function(event) {
  // Create a Vector3 object to store the screen position of the mouse
  var screenPosition = new pc.Vec3(event.x, event.y, 0);
  // Calculate the direction of the ray from the camera entity to the mouse
  this.ray.direction = new pc.Vec3();
  this.cameraEntity.camera.screenToWorld(screenPosition.x, screenPosition.y, this.cameraEntity.camera.farClip, this.ray.direction);
  this.ray.origin.copy(this.cameraEntity.getPosition());

  // The hit area is defined by a sphere around the button's position
  if (this.hitArea2.intersectsRay(this.ray)) {
    // Get the position of the button
    var buttonPosition = this.entity.getPosition();

    // Calculate the distance from the mouse to the center of the button
    var distance = this.ray.origin.distance(buttonPosition);
    console.log("Mouse is this close", distance);
    // Use the assigned radius as a threshold
    var threshold = this.radius_threshold;
    //console.log("threshold", threshold);
    // Check if the distance is within the threshold
    if (distance <= threshold) {
      // Calculate normalizedDistance within the if block for continuous update
      var normalizedDistance = distance / threshold;

      // Set minimum opacity (the value it will have when the mouse is at max distance)
      var minOpacity = 0.4;

      // Smoothly calculate opacity from 1.0 (at distance 0) to minOpacity (at threshold)
      this.entity.element.opacity = 1.0 - normalizedDistance * (1.0 - minOpacity);

      //console.log("Normalized Distance:", normalizedDistance);
      //console.log("Opacity:", this.entity.element.opacity);
    } else {
      // If the mouse is further than the threshold, reset to minimum opacity
      this.entity.element.opacity = 1;
    }
  } else {
    // If not hovering over the button, ensure opacity is at minimum
    this.entity.element.opacity = 0.4;
  }
};

I defined the hitArea2 as

ButtonPress.attributes.add("radius_threshold", { type: "number", title: "Radius Opacity", description: "The radius of the ButtonPress's opacity detection sphere." });

// Initialize code called once per entity
ButtonPress.prototype.initialize = function() {
    this.hitArea = new pc.BoundingSphere(this.entity.getPosition(), this.radius);
    this.hitArea2 = new pc.BoundingSphere(this.entity.getPosition(), this.radius_threshold);