klg Posted February 18, 2015 Share Posted February 18, 2015 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? Link to comment Share on other sites More sharing options...
beuleal Posted February 18, 2015 Share Posted February 18, 2015 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 buttonnextBtn = this.game.add.button(10, 10,"nextBtn",this.changeImage,this);2) create ur spritemainImage = 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 1 Link to comment Share on other sites More sharing options...
klg Posted February 18, 2015 Author Share Posted February 18, 2015 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. Link to comment Share on other sites More sharing options...
klg Posted February 18, 2015 Author Share Posted February 18, 2015 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 buttonnextBtn = this.game.add.button(10, 10,"nextBtn",this.changeImage,this);2) create ur spritemainImage = 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. Link to comment Share on other sites More sharing options...
beuleal Posted February 18, 2015 Share Posted February 18, 2015 hm... what about change the sprite.x and sprite.y? U can handle the visibility using sprite.visible = "false"; klg 1 Link to comment Share on other sites More sharing options...
klg Posted February 18, 2015 Author Share Posted February 18, 2015 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. Link to comment Share on other sites More sharing options...
mxmlb Posted February 19, 2015 Share Posted February 19, 2015 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 1 Link to comment Share on other sites More sharing options...
klg Posted February 19, 2015 Author Share Posted February 19, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts