Masking group of sprites

[klg]

Hi, I have a bunch of sprites with mouse click event inside a group.The group is masked to show only one sprite at a time. It is a kind of an image slider, where you can click next to see the next sprite and prev to see the previous one. 

 

Everything is working properly but the interactive objects can still be clicked even if they are invisible ie not shown in the mask.

 

I hope I'm able to explain the problem clearly. Please let me know if you need more info.

 

Thank you so much in advance. I have been struct on this for hours now.

 

Edit: I found an old post on PIXIjs forum for masking and it seems like masking does not have any effect on interactive objects but it is an old post. 

http://www.html5gamedevs.com/topic/822-pixijs-now-with-masking-webgl-and-canvas/

 

Is there any workaround for this?

[beuleal]

Hi klg,

 

I have a similar image slider, and there is only one sprite. So, when the user click on "next" the sprite change its texture.

 

u can do it fallowing:

 

1) create ur button

nextBtn = this.game.add.button(10, 10,"nextBtn",this.changeImage,this);

2) create ur sprite

mainImage = this.game.add.sprite(100, 100,"image");		

3) create ur function changeImage()

changeImage: function (){   mainImage.loadTexture('Image2');}

Try it and let i know it it works

[klg]

Hi beuleal,

 

Thanks you so much for sharing your answer. I don't think this will work in my case. I do not have a slider with images. I have a bunch of cards generated as a bitmapdata. These bitmapdata are used to create sprites which are added to a group. Also, the cards are generated using data from the server and depending on the screen size I show 3, 6, 9, 12 etc cards in a table at a certain time. All other cards can be accessed by next and prev buttons.

 

I noticed there is a property called hitArea. do you know anything about this one. I'm trying to use this in my case but it does not seem to work.

 

Thanks again.

[klg]

Hi klg,

 

I have a similar image slider, and there is only one sprite. So, when the user click on "next" the sprite change its texture.

 

u can do it fallowing:

 

1) create ur button

nextBtn = this.game.add.button(10, 10,"nextBtn",this.changeImage,this);

2) create ur sprite

mainImage = this.game.add.sprite(100, 100,"image");		

3) create ur function changeImage()

changeImage: function (){   mainImage.loadTexture('Image2');}

Try it and let i know it it works

 

Forgot to quote you in my reply. Thanks.

[beuleal]

hm... what about change the sprite.x and sprite.y?

 

U can handle the visibility using sprite.visible = "false";

[klg]

hm... what about change the sprite.x and sprite.y?

 

U can handle the visibility using sprite.visible = "false";

 

I'm not sure how to get the slider effect using sprite.visible property. Is it possible?

The sprites are positioned at different x and y coordinates inside group. Basically I want to have this group on 70 percent of my canvas width and rest 30 percent will have something else.

 

Thank you so much for trying to help me.

[mxmlb]

Hi,

 

You can indeed use the visible property : all masked sprites visible = false, and when you're about to bring a new image you just set its visible property = true before animating.

 

As an other solution, how do you register for the input on your image ? 

You can : 

- just set inputEnabled when an image is shown, and remove it when you hide it

- set the pixelPerfectClick of your input component to true : don't really know if masked images are considered alpha = 0, but it might do the job

[klg]

Hi,

 

You can indeed use the visible property : all masked sprites visible = false, and when you're about to bring a new image you just set its visible property = true before animating.

 

As an other solution, how do you register for the input on your image ? 

You can : 

- just set inputEnabled when an image is shown, and remove it when you hide it

- set the pixelPerfectClick of your input component to true : don't really know if masked images are considered alpha = 0, but it might do the job

 

Thanks mxmlb. I'll give this a try. I'm using sprite.input for click event so inputEnabled should work too. 

 

I was trying to find a way to do this with phaser or pixi rather than doing it manually. I'll assume that phaser or pixi does not have any way to take care of interactive sprites in masked area.

 

Edit: I was able to make this work by changing the inputEnabled property on sprite. Thanks again mxmlb and beuleal for your help.