Jump to content

Making Parts of Sprites Visible/Invisible


iamameme
 Share

Recommended Posts

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? 

Screen Shot 2017-05-22 at 6.26.53 PM.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...