iamameme Posted May 22, 2017 Share Posted May 22, 2017 Hey! I've been getting started on developing a game for Phaser, and I've run into an issue. It's a bit hard to describe, but I linked an image of my game to kind of describe it. The balls that you see on screen are meant to go inside that box. They move across the screen. I want them to not be visible outside the box, that way it looks like they ease into it. The problem is, I'm not sure how to do this without it going over my background (the lines that you see on the outside of the box). How can I make it so the sprite is only visible inside the box? Link to comment Share on other sites More sharing options...
Tom Atom Posted May 23, 2017 Share Posted May 23, 2017 Hi, two ideas comes onto my mind: - make your background group of sprites (to form shape you need) and draw it as a last object, - use crop rectangle for each sprite and update it on every update - see this example: http://phaser.io/examples/v2/sprites/horizontal-crop Link to comment Share on other sites More sharing options...
Jammy Posted May 23, 2017 Share Posted May 23, 2017 Could you possibly 7 hours ago, iamameme said: Hey! I've been getting started on developing a game for Phaser, and I've run into an issue. It's a bit hard to describe, but I linked an image of my game to kind of describe it. The balls that you see on screen are meant to go inside that box. They move across the screen. I want them to not be visible outside the box, that way it looks like they ease into it. The problem is, I'm not sure how to do this without it going over my background (the lines that you see on the outside of the box). How can I make it so the sprite is only visible inside the box? A simple option, you could just have sprites around the edges of the viewport over the bubble sprites, so essentially it covers up where the bubbles are. Basically imagine using the background as the foreground. Another option could be using a mask and would probably me more appropriate https://pixijs.github.io/examples/#/demos/masking.js https://phaser.io/examples/v2/sprites/mask Cronos72 1 Link to comment Share on other sites More sharing options...
iamameme Posted May 25, 2017 Author Share Posted May 25, 2017 On 5/23/2017 at 2:09 AM, Jammy said: Could you possibly A simple option, you could just have sprites around the edges of the viewport over the bubble sprites, so essentially it covers up where the bubbles are. Basically imagine using the background as the foreground. Another option could be using a mask and would probably me more appropriate https://pixijs.github.io/examples/#/demos/masking.js https://phaser.io/examples/v2/sprites/mask Masks worked like a charm! All I did was make a rectangular mask the covered the inside of the box and applied it to the balls! Thanks so much Link to comment Share on other sites More sharing options...
Recommended Posts