Stop rendering stuff outside of the game world

[ForgeableSum]

So I have a small problem. In my game, I am tiling images orthogonally. The widths/height of my tiles don't exactly fit into the game worlds dimensions - that is, a tile (the last one on the x or y axis) is often hanging off the edge of the game world, outside of the world bounds. 

 

I don't want this stuff do be rendered because I want the player to be able to see outside of the game world (where there is just empty space). How do I tell Phaser to not render stuff outside the game world?

[MichaelD]

Well there is this: http://phaser.io/examples/v2/sprites/collide-world-bounds if the objects are having a physics body.

 

If not, you could check like this

var isOutside = (object.x+object.width > game.width) || (object.y+object.height > game.height);

[wayfinder]

Are you talking about cutting off all pixels outside the world bounds while still drawing the portions of images that are inside the bounds? Or would it be enough to just not draw anything outside the world bounds, with the implication that portions of elements that are partially inside would disappear as well?

[drhayes]

Maybe by setting the camera bounds a bit tighter?

[Fenopiù]

On 16/9/2015 at 4:38 PM, wayfinder said:

Are you talking about cutting off all pixels outside the world bounds while still drawing the portions of images that are inside the bounds? Or would it be enough to just not draw anything outside the world bounds, with the implication that portions of elements that are partially inside would disappear as well?

It's a very old post but I've the same issue.

I would like to render moving images in an imaginary box (i.e. box who is big from 50, 50 to 600, 600), when part of these images goes outside of that box, those parts have non to be rendered.

So, if I have the box above and an image who is big 20x20, if the image position is 580,590 I want that the part in the box (20x10) is rendered and the part outside the box not.

How can I implement that?

I've created the box but I really don't know how to tell Phaser to render these images only inside this box (and still render other images, like background, a this box doesn't exist at all).

[Fenopiù]

Ok, I've found this example who seems to have the right solution for me: https://phaser.io/examples/v2/sprites/sprite-group-mask

But it just seems.

Same code, for the example works, for my game doesn't.

Example code:

//  A mask is a Graphics object
var mask = game.add.graphics(0, 100);

//  Shapes drawn to the Graphics object must be filled.
mask.beginFill(0xffffff);

//  Here we'll draw a rectangle for each group sprite
mask.drawRect(130, 0, 140, 200);
mask.drawRect(330, 0, 140, 200);
mask.drawRect(530, 0, 140, 200);

//  And apply it to the Group itself
group.mask = mask;

It work correctly and 60FPS.

My code:

//  A mask is a Graphics object
var mask = game.add.graphics(0, 0);

//  Shapes drawn to the Graphics object must be filled.
//mask.beginFill(0xffffff);
mask.drawRect(x, y, xx - x, yy - y)

//  And apply it to the Group itself
simb.mask = mask;

if (image.search('SIMB') == -1){
  images.create(x, y, image);
} else {
  simb.create(x, y, image);
}

The problems are:

If I comment "mask.beginFill(0xffffff);" nothing showed up and my FPS goes to 10FPS;

If I put "mask.beginFill(0xffffff);" (like in the example) I just saw e blank rectangle (correct size and position) and my FPS goes to 10FPS;

Without the mask thing and the if, FPS are 60FPS stable.

What happens?

[Fenopiù]

Solution found!!!!!!I've simply added a:

 mask.alpha = 0;

after the mask.beginFill and now I'have my images showed wher I want!

[ForgeableSum]

hmm, I've stumbled across this problem again many years later. I'd love to find a way to simply stop rendering stuff outside the game world like a crop on a group or a crop on the world. 

So far the only workarounds I could come up with is cropping the individual sprites when they reach the edge of the world. 

I don't like @Fenopiù's solution because creating an entire new graphics object adds webgl draw calls and is therefore detrimental to performance. 

[Fenopiù]

15 hours ago, feudalwars said:

hmm, I've stumbled across this problem again many years later. I'd love to find a way to simply stop rendering stuff outside the game world like a crop on a group or a crop on the world. 

So far the only workarounds I could come up with is cropping the individual sprites when they reach the edge of the world. 

I don't like @Fenopiù's solution because creating an entire new graphics object adds webgl draw calls and is therefore detrimental to performance. 

After a while I've moved to crop all images outside the rectangle instead of mask them.