klg

Masking group of sprites

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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 :P

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :P

 

Forgot to quote you in my reply. Thanks.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.