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);