Forums » Help » MouseOver and transparency

Hi, I have some buttons with the shape of a small moon. the other part is transparent
I would like to activate the mouseover action only when the mouse is on the draw of my moon, and not when the mouse is on the transparent area

How can I do that ?

My "mouse is over" function

inFocus: function() {	
			return (
				(this.pos.x <= (ig.input.mouse.x + ig.game.screen.x)) &&
				((ig.input.mouse.x + ig.game.screen.x) <= this.pos.x + this.size.x) &&
				(this.pos.y <= (ig.input.mouse.y + ig.game.screen.y)) &&
				((ig.input.mouse.y + ig.game.screen.y) <= this.pos.y + this.size.y)
			);
		}

thanks

You should do something more like this function to detect a circle area rather than a rectangle.

 inCircle: function(radius) {
	var center = { x: (this.pos.x + this.size.x/2), y: (this.pos.y + this.size.y/2) };
	var pos = { x: ig.input.mouse.x + ig.game.screen.x, y: ig.input.mouse.y + ig.game.screen.y };
	return (Math.pow((pos.x - center.x),2) + Math.pow((pos.y - center.y),2) <= Math.pow(radius,2));
 }

// usage
if ( this.inCircle(40) ) {
     // mouse is within the circle
}

Hi
thanks for your answer.
But I thought that it was possible to get it automatically.
In fact, my moon is like a ( and not like a circle

It's a little bit desappointing. it won't be possible to find an equation for each of my button shapes

BR
Fabien

you could check the raw image data.
saying, you have the x & y position of your mouse pointer within the entity
(something like: # x = pos.x - ( ig.input.mouse.x + ig.game.screen.x) # )

and youre using a single image ig.Image for the button, you can get the context of your image and the raw image data:

// myImage = ig.Image  
var imgCtx = myImage.data.getContext('2d');  
var imgData  = imgCtx.getImageData(0,0,myImage.width * ig.system.scale, myImage.height * ig.system.scale);

now you can check the transparency at an exact point:

// current height  * image width (width is stored without scale)
// + x offset
// multiplied by 4 because there are 4 values for each pixel (rgba)
// and get the 4th one (alpha value)
var alpha= imgData.data[((y * myImage.width * ig.system.scale) + x) * 4 + 3]
if (alpha == 0) {
    // completely transparent. no collision
     // a value of 255 would be opaque
}

after reviewing the ig.Image source, I have to note, that this won't work if you haven't applied a ig.system.scale (the ig.Image.data variable would have stored the Image object instead of the scaled canvas)

(the code above has not been tested, I just wanted to give hints :) )

Havent used this but there's a per pixel collision plugin:

http://impactjs.com/forums/code/per-pixel-collision-detection-plugin

Spawn a small transparent image (pixel) at mouse location and see if it collides?

Yea, that kind of functionality is not native by any means. You will have to get creative. My suggestion would be along the lines that snooze has provided.

Yea, snooze appears to be a bit of demon :-)

Hi
thanks for your answers.
I don't know yet which method I will use but I know now how to do ...

Hi FabienM

Have you managed to get this working. I've just uploaded 2 plugins to github that might help.

The one does hittests on transparent images (intended for transparent buttons)
- code creates a hitmask from your transparent image, you can then query the hitmask with x,y coordinates to get a hit for non-transparent, or a miss for transparent button pixels.

The other is a button state machine that aims to simply state management in button (i.e. mouse over, mouse down, etc ..)

Here the links to the plugins:
ButtonStateMachine
ScaledAlphaHitmask

I'll post the under the code section once I've given them another once-over.

Cool plugins. Post them over at http://www.pointofimpactjs.com when you get a chance also!

Thanx will do.

Need to signup with POI first. Will hopefully get around to it before the end of the week.

Hi Heiko,
I am going to test your plugins, I 'll let you know
Thanks for your help

Fabien

can snooze's concept be applied to an entities image especially if the image isn't animated? When I tested it it didn't seem like the data saved in currentAnim as the same.. I'd appreciate an example if its possible.
I was thinking something along the lines of

myImage = this.currentAnim;
	      //transparency function
			var imgCtx = myImage.data.getContext('2d');  
			var imgData  = imgCtx.getImageData(0,0,myImage.width * ig.system.scale, myImage.height * ig.system.scale);
			// current height  * image width (width is stored without scale)
			// + x offset
			// multiplied by 4 because there are 4 values for each pixel (rgba)
			// and get the 4th one (alpha value)
			var alpha= imgData.data[((y * myImage.width * ig.system.scale) + x) * 4 + 3]
			if (alpha == 0) {
				// completely transparent. no collision
				// a value of 255 would be opaque
			}