Sign in to follow this  
iamameme

Making Parts of Sprites Visible/Invisible

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.